大家都知道從平面設計人員拿來的PS（圖片）給CSS重構者重構時，需要對網頁美工圖片進行分析，只有進行很好的分析才能有CSS布局。
因此DIV CSS布局在分析中占很大部分，我們分析網頁美工圖片不是分析圖片好看是否，而是從css布局出發分析網頁的美工圖片，而CSS布局分析直接影響以後的css重構html頁面是否好寫的一步。
布局知識：
DIV+CSS布局，CSS布局是網頁html通過div標籤+css樣式表代碼開發製作的（html）網頁的統稱。
div+css布局好處：便於維護，有利seo（Google將網頁開啟速度作為排名因素及SEO因素），網頁開啟速度更快，符合web標準等。
製作div+css網頁前思考布局：
首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下布局架構來思考。
下面通過一個執行個體講解下CSS布局分析，我們以列表頁面分析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 "> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css布局案例實驗頁面</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布局重要及說明相信大家都已經瞭解了。更多精彩請關注php中文網其它相關文章！
相關閱讀：
HTML的表格樣式
CSS裡的min-height和max-height怎麼使用
css3裡怎麼顯示圓形圖片
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
