一、網頁結構分析七條原則
這以下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>
作者：向雄
如果對我發表的文章存在疑問或者有更好的建議，可以掃描左邊二維碼（或者長按識別二維碼）加我微信可以相互探討（ 加好友，請備注來自博客園）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
如果對我發表的文章存在疑問或者有更好的建議，可以掃描左邊二維碼（或者長按識別二維碼）加我微信可以相互探討（ 加好友，請備注來自博客園）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。