CSS需要怎麼佈局？ CSS佈局的時候需要注意哪些方面？ CSS佈局有哪些技巧呢？今天我們就來給大家一一總結一下。如何才能有很好的CSS佈局。
大家都知道從平面設計人員拿來的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中文網其它相關文章！
相關閱讀：
#CSS裡的min-height和max-height怎麼使用
#以上是CSS佈局有哪些技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
