还在为CSS布局发愁？你该看看这7条原则
一、网页结构分析七条原则
这以下7个原则是经过多年网站实战经验之后的总结，只要掌握这7个原则，可以解决大部分在编写网站布局中的问题。
1、先结构后样式.
2、能用CSS表现出来的效果，就尽量少用图像.
3、切图之前一定要认真的去分析页面效果图.
4、尽量使用最简单的网页结构.
5、大结构可以用id，内部结构用class.
6、定位：相对定位＋绝对定位.
7、给容器设置内边距或外边距或者边框，对应容器的宽度一定要减去相应的宽度或高度.
二、网页结构总体结构划分
大部分网页结构都可以划分为以下五个部分：
1、header 头部区域。
2、nav 导航区域。
3、banner 广告区域。
4、content 内容页区域。
5、footer 底部导航区域。
三、HTML+CSS 结构分析
css 全局样式设置
网页背景宽为:2000px;内容宽度为:980px;网页里重用的字体为宋体，字号为12px 标题字为14px 或 16px;
header 区域：
效果:
解析:
1.header 中只要设置一张Logo,可设置一个div标签.这里布局可设置Padding值：Logo 离左边距 10像素，顶部20px; height= 119-20=99 像素. width:980-5=975像素.
代码:
/*header*/
#header{width:975px; height:99px; margin:0 auto; padding:20px 0 0 5px;}
html：
<div id="header"><a href="#"><img src="images/logo.gif" width="168" height="76" alt="绿色食品网" /></a></div>
nav 区域:
结构分析:
导航结构可按左中右进行划分;左边和右边切一个小块 width:17px; height:58px;填充背景，不平铺.中间的导航宽度为 width:980-17*2 = width:946px 使用背景填充平铺水平方向. 切出导航分割线，作为li 标签有中间平铺。li 的宽度 为 946/9 = 105, height 为分割线的高度; 去掉最右边的分割线，单独给li设置样式,无背景.
css 代码:
1 /*nav*/ 2 #nav{width:980px; height:58px; margin:0 auto;} 3 .navLeft{display:block; width:17px; height:58px; float:left; background:url(../images/navLeft.jpg) no-repeat;} 4 .navCenter{width:946px; height:52px; padding-top:6px; float:left; background:url(../images/navBg.jpg) repeat-x;} 5 .navCenter li{width:105px; height:31px; line-height:31px; float:left; text-align:center; background:url(../images/navLine.jpg) no-repeat right center;} 6 .navCenter a:link,.navCenter a:visited{font-size:14px; color:#fff; text-decoration:none; font-weight:bold;} 7 .navCenter a:hover{text-decoration:underline;} 8 .navCenter li.noBg{background:none;} 9 .navRight{display:block; width:17px; height:58px; float:left; background:url(../images/navRight.jpg) no-repeat;}
html:
1 <div id="nav"> 2 <span class="navLeft"></span> 3 <ul class="navCenter"> 4 <li><a href="#">网站首页</a></li> 5 <li><a href="list.html">公司新闻</a></li> 6 <li><a href="#">行业动态</a></li> 7 <li><a href="#">基地管理</a></li> 8 <li><a href="#">会员服务</a></li> 9 <li><a href="#">网上购物</a></li> 10 <li><a href="#">产品展示</a></li> 11 <li><a href="#">关于我们</a></li> 12 <li class="noBg"><a href="#">ENGLISH</a></li> 13 </ul> 14 <span class="navRight"></span> 15 </div>
banner 广告区域
结构分析：
在一个div容器中,容器中只有一张图片布局, 可以设置容器的内边距padding:来调整图片的位置.
效果：
css：
/*banner*/
#banner{width:980px; height:382px; margin:0 auto; padding-top:3px;}
html：
<div id="banner"><img src="images/banner.jpg" width="980" height="382" /></div>
content 内容页区域
效果:
结构分析：
这个内容结构可以划分为上下结构，
上面结构可以使用ul li 来布局; ul li 使用单独样式 conTop，避免和网站其他ul li结构产生冲突， 给conTop 设置padding-left:10px; width=980-10=970; li 的 宽度: 970-7*3-12=211；li 标签里面的结构使用： h2 和 p 标签;
下面部分结构分析：
下部分内容采用 ul li 来划分结构, 将样式命名为 conBot , 在conBot 中可以划分为左中右结构，conBotL，conBotC
在conBotL 块中: 结构分为上下结构，上面部分放H2标签 和 更多图片的链接（span标签），span标签采用相对定位. 定位=相对定位+绝对定位；下面部分采用 dl,dt,dd 标签;
在 conBotC 块中:结构分为上下结构，上面部分采用H2标签，span标签进行相对定位。
下面的样式设置 ul,li 结构: 图片和底部文字单独设置样式。
在 conBotR 块中: 结构分为上下结构，上面部分放H2标签 和 更多图片的链接（span标签），span标签采用相对定位；下面采用一个P标签.
css：
/*content*/ #content{width:980px; overflow:hidden; margin:8px auto 0; background:url(../images/content_bg.jpg) no-repeat #fff; padding-top:9px;} .conTop{width:970px; height:92px; border-bottom:1px solid #E0E0E0; padding-left:10px;} .conTop li{width:211px; height:73px; background:url(../images/li_bg.jpg) no-repeat; float:left; margin-right:7px; padding:10px 12px 0;} .conTop p{color:#9d9d9d; padding-left:38px; line-height:18px;} .conBot{width:980px; height:209px; background:url(../images/content_bg1.jpg) repeat-x left bottom;} .conBotL{width:302px; height:199px; float:left; background:url(../images/line_bg.jpg) no-repeat right top; padding:10px 10px 0;} .conBotL h2{height:38px; position:relative;} .conBotL span{display:block; width:35px; height:20px; position:absolute; right:0; top:10px;} .conBotL dl{height:135px; margin-top:22px;} .conBotL dt{width:100px; height:135px; float:left;} .conBotL dl img{width:94px; height:80px; border:1px solid #d8d8d8; padding:2px;} .conBotL dd{width:189px; height:135px; float:right; line-height:20px;} .conBotL a:link,.conBotL a:visited{color:#398C00; text-decoration:none;} .conBotL a:hover{text-decoration:underline;} .conBotC{width:388px; height:199px; float:left; background:url(../images/line_bg.jpg) no-repeat right top; padding:10px 10px 0;} .conBotC h2{height:38px; position:relative;} .conBotC span{display:block; width:35px; height:20px; position:absolute; right:0; top:10px;} .conBotC ul{width:388px; height:125px; margin-top:22px;} .conBotC li{width:120px; height:125px; float:left; margin-right:13px;} .conBotC .noMargin{margin:0;} .one{height:94px;} .one img{width:114px; height:88px; border:1px solid #E0E0E0; padding:2px;} .two{height:28px; line-height:28px; text-align:center;} .conBotR{width:230px; height:199px; float:left; padding:10px 10px 0;} .conBotR p{margin-top:22px; line-height:22px;}
html：
<div id="content"> <ul class="conTop"> <li> <h2><a href="#"><img src="images/tit_bg1.jpg" alt="有机蔬菜" /></a></h2> <p>主要通过自然降水、施用农家肥人工除草等传统的农...</p> </li> <li> <h2><a href="#"><img src="images/tit_bg2.jpg" alt="有机蔬菜" /></a></h2> <p>含有丰富的碳水化合物、维生素和微量元素，尤其是...</p> </li> <li> <h2><a href="#"><img src="images/tit_bg3.jpg" alt="有机蔬菜" /></a></h2> <p>含有丰富的碳水化合物、维生素和微量元素，尤其是...</p> </li> <li> <h2><a href="#"><img src="images/tit_bg4.jpg" alt="有机蔬菜" /></a></h2> <p>在饲养过程中不添加任何化学合成的添加剂、抗生素...</p> </li> </ul> <div class="conBot"> <div class="conBotL"> <h2><a href="#"><img src="images/tit_bg5.jpg" width="185" height="38" alt="关于我们" /></a><span><a href="#"><img src="images/more.jpg" width="35" height="20" alt="更多" /></a></span></h2> <dl> <dt><a href="#"><img src="images/photo_1.jpg" width="96" height="82" /></a></dt> <dd>绿色食品（北京）有限公司立志于有机事业的发展，坚持以人为本，走可持续发展的道路，从农田到餐桌，实行全过程监控体系，以优质的产品为更多的人提供健康的食品安...<a href="#">详细内容>></a></dd> </dl> </div> <div class="conBotC"> <h2><a href="#"><img src="images/tit_bg6.jpg" width="148" height="38" alt="产品展示" /></a><span><a href="#"><img src="images/more.jpg" width="35" height="20" alt="更多" /></a></span></h2> <ul> <li> <p class="one"><a href="#"><img src="images/photo_2.jpg" width="114" height="88" /></a></p> <p class="two"><a href="#">(古道)纯牛奶</a></p> </li> <li> <p class="one"><a href="#"><img src="images/photo_3.jpg" width="114" height="88" /></a></p> <p class="two"><a href="#">油茶籽油</a></p> </li> <li class="noMargin"> <p class="one"><a href="#"><img src="images/photo_4.jpg" width="114" height="88" /></a></p> <p class="two"><a href="#">龙兴香桃</a></p> </li> </ul> </div> <div class="conBotR"> <h2><a href="#"><img src="images/tit_bg7.jpg" width="126" height="38" alt="联系我们" /></a></h2> <p> 地 址：北京市海淀区知春路未来大厦6层<br /> 邮 编：100191<br /> 热线电话：010-62358888<br /> 传 真：010-88636666<br /> 邮 箱：lssp@lssp.com </p> </div> </div> </div>
作者：向雄
如果对我发表的文章存在疑问或者有更好的建议，可以扫描左边二维码（或者长按识别二维码）加我微信可以相互探讨（加好友，请备注来自博客园）。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
如果对我发表的文章存在疑问或者有更好的建议，可以扫描左边二维码（或者长按识别二维码）加我微信可以相互探讨（加好友，请备注来自博客园）。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
