还在为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="data: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 代码:

 /*nav*/
 #nav{width:980px; height:58px; margin: auto;}
 .navLeft{display:block; width:17px; height:58px; float:left; background:url(../images/navLeft.jpg) no-repeat;}
 .navCenter{width:946px; height:52px; padding-top:6px; float:left; background:url(../images/navBg.jpg) repeat-x;}
 .navCenter li{width:105px; height:31px; line-height:31px; float:left; text-align:center; background:url(../images/navLine.jpg) no-repeat right center;}
 .navCenter a:link,.navCenter a:visited{font-size:14px; color:#fff; text-decoration:none; font-weight:bold;}
 .navCenter a:hover{text-decoration:underline;}
 .navCenter li.noBg{background:none;}
 .navRight{display:block; width:17px; height:58px; float:left; background:url(../images/navRight.jpg) no-repeat;}

html:

 <div id="nav">
     <span class="navLeft"></span>
     <ul class="navCenter">
         <li><a href="#">网站首页</a></li>
         <li><a href="list.html">公司新闻</a></li>
         <li><a href="#">行业动态</a></li>
         <li><a href="#">基地管理</a></li>
         <li><a href="#">会员服务</a></li>
         <li><a href="#">网上购物</a></li>
         <li><a href="#">产品展示</a></li>
         <li><a href="#">关于我们</a></li>
         <li class="noBg"><a href="#">ENGLISH</a></li>
     </ul>
     <span class="navRight"></span>
 </div>

banner 广告区域

结构分析：

在一个div容器中,容器中只有一张图片布局, 可以设置容器的内边距padding:来调整图片的位置.

效果：

css：

/*banner*/

#banner{width:980px; height:382px; margin:0 auto; padding-top:3px;}

html：

<div id="banner"><img src="data: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:; 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:; 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:;}
.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="data:images/tit_bg1.jpg" alt="有机蔬菜" /></a></h2>
            <p>主要通过自然降水、施用农家肥人工除草等传统的农...</p>
        </li>
        <li>
            <h2><a href="#"><img src="data:images/tit_bg2.jpg" alt="有机蔬菜" /></a></h2>
            <p>含有丰富的碳水化合物、维生素和微量元素，尤其是...</p>
        </li>
        <li>
            <h2><a href="#"><img src="data:images/tit_bg3.jpg" alt="有机蔬菜" /></a></h2>
            <p>含有丰富的碳水化合物、维生素和微量元素，尤其是...</p>
        </li>
        <li>
            <h2><a href="#"><img src="data:images/tit_bg4.jpg" alt="有机蔬菜" /></a></h2>
            <p>在饲养过程中不添加任何化学合成的添加剂、抗生素...</p>
        </li>
    </ul>
    <div class="conBot">
        <div class="conBotL">
            <h2><a href="#"><img src="data:images/tit_bg5.jpg" width="185" height="38" alt="关于我们" /></a><span><a href="#"><img src="data:images/more.jpg" width="35" height="20" alt="更多" /></a></span></h2>
            <dl>
                <dt><a href="#"><img src="data: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="data:images/tit_bg6.jpg" width="148" height="38" alt="产品展示" /></a><span><a href="#"><img src="data:images/more.jpg" width="35" height="20" alt="更多" /></a></span></h2>
            <ul>
                <li>
                    <p class="one"><a href="#"><img src="data: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="data: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="data: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="data: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> 

 

作者：向雄 
如果对我发表的文章存在疑问或者有更好的建议，可以扫描左边二维码（或者长按识别二维码）加我微信可以相互探讨（加好友，请备注来自博客园）。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。