简单的html+css页面制作_html/css_WEB-ITnose
今天用html+css做一个最简单的页面。效果图如下：
说明：这里的韩文用中文随便代替。
1、拿到效果图首先分析页面布局
该图是竖排结构，分5个大的DIV：
我做的页面宽度是1024px的，在5个DIV外面加一个大框给一个名为all的class。设定宽为1024px，并居中。
一般页面都是按顺序做，这个看个人习惯。由于只是一个页面，我的css就和HTML写在一个页面里面。
2、先写第一个div，给他一个class名称为top.
css样式如下：
效果如下：
这样第一个div就做好了。
3、下面做menu和logo
css如下：
效果图：
4、做menu的子菜单
css如下：
一般二级菜单的可以用js做，我这边没用js，直接用的css,给一级菜单和二级菜单定位，用样式（图中矩形框中的css）控制二级菜单的隐藏显示。这样写的缺点就是不兼容IE6。其他的主流浏览器像谷歌，火狐和IE高版本都可以兼容。
5、banner最好做了，直接放图片或设置背景都可以。此处省略
6、分析主体内容，第4个DIV
该DIV中分上下两层，第一层显示新闻列表，关于我们和产品中心，第二层显示logo+版权说明和一个下拉框
因为第一层的内容是并排显示，所以这三个DIV设置像左浮动。
按从左向右的顺序，先做新闻板块
样式：
7、图中关于我们又分左右结构，直接让图片左浮，左右结构就出来了。这种写法暂时还没遇到什么问题。
产品中心应该是用js做的百叶窗效果，这里暂时只是样式。效果会后续补上。在产品中心和底部logo之间加底部的logo和其他div就会自动下去了。
下面附上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>html+css基本页面</title><style type="text/css">*{ margin:0; padding:0; font-size:12px; color:#464646;}a{ text-decoration:none;}ul li{ list-style:none;}.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}/*.clear样式的作用是清除浮动*/.all{ width:1024px; margin:0 auto;}.top{ background:#404040; display:table; width:100%;}.top ul{ float:right; margin-right:30px;}.top ul li{ float: left; margin:0px 10px;}.top ul li a{ display:block; color:#c2c2c2; line-height:30px; margin:10px 0px; width:75px; text-align:center;}.top ul li a.a_hover{background:url(images/topa_bg.png) no-repeat;}.top ul li a:hover{background:url(images/topa_bg.png) no-repeat;}.header{ background:url(images/menu_bg.jpg) repeat-x;}.logo img{ display:block; margin:0px auto; padding-top:20px;}.menu{ display:table; margin:0 auto;}.menu ul li{ float:left; position:relative;}.menu ul li.li_line{ width:2px; background:url(images/li_linebg.png) no-repeat; height:44px;}.menu ul li a{ display:block; line-height:44px; width:150px; text-align:center; color:#000; font-size:14px;}.menu ul li a.menua_hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}.menu ul li a:hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}.menu ul li:hover ul{ display:table;}.menu ul li ul{ position:absolute; width:350px; padding-left:30px; left:15px; background:#001126; display:none;}.menu ul li ul li{ float:left;}.menu ul li ul li a{ width:80px; line-height:24px; color:#fff; font-size:12px;}.menu ul li ul li a:hover{ background:none; color:#246477;}.main{ padding:20px; background:url(images/bottombg.jpg); height:183px;}.news{ float:left; width:220px; margin:0px 20px;}.news dl dd{ float:left; color:#464646; font-size:14px; font-weight:bold; line-height:24px;}.news dl dt{ float:right; line-height:24px; background:url(images/newsdd_bg.jpg) no-repeat left center; padding-left:6px;}.news ul li{ line-height:22px;}.news ul li a{ background:url(images/newa_bg.jpg) no-repeat left center; padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:210px; display:block;} .about{ width:305px; display:table; margin:0px 20px; float:left;}.about img{ float:left; margin:20px;}.about img.view{ margin:5px 0px 0px 0px;}.about h3{ line-height:24px; margin-top:20px; color:#4380ab; font-size:16px; }.about span{ line-height:20px; display:block;}.pro{ width:320px; float:left; border:1px solid #d7d7d7; display:table;}.pro ul{ float:left;}.pro ul.pro_ulview{ width:254px;}.pro ul.pro_ulview li{ float:left; background:none; width:157px; margin-right:10px;}.pro ul.pro_ulview li a.more{ margin:10px 0px 0px 20px; display:block;}.pro ul img.view{ margin-top:40px; }.pro ul img{ float:none; display:block;}.pro ul strong{ display:table; line-height:30px; margin-left:20px;}.pro ul span.view{ width:140px; display:block; margin-left:20px;}.pro ul li{ width:33px; height:112px; background:url(images/pro_libg.jpg);}.footer_logo{ float:left; margin:20px;}.footer_menu{ float:left; margin:5px 0px 0px 70px;}.footer_menu ul li{ float:left; width:102px; line-height:30px; text-align:center;}.footer_menu ul li.fli_line{ width:1px; background:url(images/fli_linebg.png) no-repeat; height:30px;}.footer_menu ul.bq{ margin-left:38px;}.footer_menu ul span{ line-height:22px; margin-right:10px; color:#7d7d7d;}.select{ float:right; margin-top:20px;}</style></head><body><div class="all"> <div class="top"> <ul> <li><a href="#" class="a_hover">头部示例1</a></li> <li><a href="#">头部示例2</a></li> <li><a href="#">头部示例3</a></li> <li><a href="#">头部示例4</a></li> </ul> </div> <div class="clear"></div> <div class="header"> <div class="logo"> <img src="/static/imghw/default1.png" data-src="images/logo.png" class="lazy" alt="logo" /> </div> <div class="menu"> <ul> <li class="li_line"></li> <li> <a href="#" class="menua_hover">菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> <li class="li_line"></li> <li><a href="#">菜单2</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> <li class="li_line"></li> <li><a href="#">菜单3</a></li> <li class="li_line"></li> <li><a href="#">菜单4</a></li> <li class="li_line"></li> <li><a href="#">菜单5</a></li> <li class="li_line"></li> <li><a href="#">菜单6</a></li> <li class="li_line"></li> </ul> </div> </div> <div class="clear"></div> <div> <img src="/static/imghw/default1.png" data-src="images/banner.jpg" class="lazy" alt="banner" /> </div> <div class="clear"></div> <div class="main"> <div class="news"> <dl> <dd>NEWS</dd> <dt>more</dt> </dl> <div class="clear"></div> <ul> <li><a href="#">新闻示例1新闻示例1新闻示例1新闻示例1</a></li> <li><a href="#">新闻示例2新闻示例2新闻示例2新闻示例</a></li> <li><a href="#">新闻示例3新闻示例3新闻示例3新闻示例</a></li> <li><a href="#">新闻示例4新闻示例4新闻示例4新闻示例</a></li> </ul> </div> <div class="about"> <img src="/static/imghw/default1.png" data-src="images/about.png" class="lazy" alt="about" /> <h3 id="ABOUT">ABOUT</h3> <span>关于我们关于我们关于我们关于我们关于我们关于我们</span> <a href="#"><img class="view lazy" src="/static/imghw/default1.png" data-src="images/about_view.png" alt="view"/></a> </div> <div class="pro"> <ul class="pro_ulview"> <li> <strong>产品<span>案例1</span></strong> <span class="view">产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介</span> <a href="#" class="more"><img src="/static/imghw/default1.png" data-src="images/about_view.png" class="lazy" alt="view"/></a> </li> <img class="view lazy" src="/static/imghw/default1.png" data-src="images/pro_img.png" alt="pro"/> </ul> <ul> <li></li> </ul> <ul> <li></li> </ul> </div> <div class="clear"></div> <div class="footer_logo"><img src="/static/imghw/default1.png" data-src="images/footer_logo.png" class="lazy" alt="footer_logo" /></div> <div class="footer_menu"> <ul> <li><a href="#">首页</a></li> <li class="fli_line"></li> <li><a href="#">关于我们</a></li> <li class="fli_line"></li> <li><a href="#">产品中心</a></li> </ul> <div class="clear"></div> <ul class="bq"><span>版权所有@某某网站</span><span>联系电话:01234567890</span></ul> </div> <div class="select"><img src="/static/imghw/default1.png" data-src="images/select.jpg" class="lazy" alt="select" /></div> </div> </div></body></html>至于图片，用的到的就从效果图上切下来就ok了。
第一次总结这样的东西，不足之处还请见谅。希望可以和大家一起交流，一起进步。
页面一般分特效页面和普通页面。
布局一般分为菜单+LOGO，主体内容和尾部的版权说明。
特效页面的布局不确定，普通页面的布局一般分上中下，中间部分又分上下结构或左右结构。先把大体框架搭起来，再一点点往里填，会好做一点。
最后给大家一个参考网站：http://www.w3school.com.cn/里面前端需要的东西基本上都有了。遇到问题也可以去里面找解决方法。个人极力推荐。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML的角色：構建Web內容
Apr 11, 2025 am 12:12 AM
HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
