大家都知道從平面設計人員拿來的PS（圖片）給CSS重構者重構時，需要對網頁美工圖片進行分析，只有進行很好的分析才能有CSS布局。
因此DIV CSS布局在分析中占很大部分，我們分析網頁美工圖片不是分析圖片好看是否，而是從css布局出發分析網頁的美工圖片，而CSS布局分析直接影響以後的css重構html頁面是否好寫的一步。
布局知識：
DIV+CSS布局，CSS布局是網頁html通過div標簽+css樣式表代碼開發制作的（html）網頁的統稱。
div+css布局好處：便於維護，有利seo（谷歌將網頁打開速度作為排名因素及SEO因素），網頁打開速度更快，符合web標准等。
制作div+css網頁前思考布局：
首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下布局框架來思考。
下面通過一個實例講解下CSS布局分析，我們以ThinkCSS列表頁面分析css布局：
首先我們可以分析出我們DIV CSS布局重構此頁面結構框架，我們可以看出是 上、中、下結構，其中又包括了左右結構。
由此我們就要寫此頁面CSS和html時候就先從上到下 從外到內原則寫css與html。
我們首先建一個web的文件夾並在此文件夾裡新建html頁面命名為index.html ，css文件命名為index.css。這裡有個訣竅就是可以導入模板方式來建css與html初始頁面，然後將css文件引用到html，也就是我在模板裡介紹的css模板，再在CSS模板的基礎上再寫再添加css。
以下是index.html 的html代碼：
<!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>css布局案例實驗頁面-www.thinkcss.com.cn</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">我是頭部（上）</div>
<div id="centers">
<div class="c_left">我是中的左</div>
<div class="c_right">我是中的右</div>
<div class="clear"> </div>
</div>
<div id="footer">我是底部（下）</div>
</body>
</html>
index .css的CSS代碼如下：
body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;}
ol, ul ,li{list-style: none;}
img {border: 0;}
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;}
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;}
.clear{clear:both;height:1px; margin-top:-1px; width:100%;} .dis{display:block;}
.undis{display:none;}
/*此上面代碼是初始CSS模板，下面是新寫CSS布局框架代碼*/
#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;}
#header{ height:68px; border:1px solid #CCCCCC; }
#centers{ padding:8px 0;}
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;}
#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; }
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}
你可以考出此兩段代碼新建個試試，我們就布局出以上美工頁面CSS和html框架，然後根據各內容繼續添加CSS與html源代碼。
以上是我們今天講解的css布局_div css布局重要及說明，希望對您有幫助。以上案例未詳解希望你親自多實踐，只有實踐才能練好技術。
- 上一頁:CSS與浏覽器關系
- 下一頁:DIV CSS書寫格式