一、网页结构分析七条原则
这以下7个原则是经过多年网站实战经验之后的总结，只要掌握这7个原则，可以解决大部分在编写网站布局中的问题。
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像素.
代码:
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;} 1
banner 广告区域
结构分析：
在一个div容器中,容器中只有一张图片布局, 可以设置容器的内边距padding:来调整图片的位置.
效果：
css：
html：
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：
