你對DIV CSS布局的用法是否了解，這裡向大家描述一下，DIV CSS布局大家都知道從平面設計人員拿來的PS（圖片）給CSS重構者重構時，需要對網頁美工圖片進行分析，只有進行很好的分析才能有CSS布局。
DIV CSS布局
DIV CSS布局大家都知道從平面設計人員拿來的PS（圖片）給CSS重構者重構時，需要對網頁美工圖片進行分析，只有進行很好的分析才能有CSS布局。
因此DIV CSS布局在分析中占很大部分，我們分析網頁美工圖片不是分析圖片好看是否，而是從css布局出發分析網頁的美工圖片，而CSS布局分析直接影響以後的CSS重構Html頁面是否好寫的一步。
布局知識：
DIV CSS布局，CSS布局是網頁html通過div標簽+CSS樣式表代碼開發制作的（Html）網頁的統稱。
DIV CSS布局好處：便於維護，有利seo（谷歌將網頁打開速度作為排名因素及SEO因素），網頁打開速度更快，符合web標准等。
制作DIV CSS網頁前思考布局：
首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下布局框架來思考。
下面通過一個實例講解下CSS布局分析，我們以DIV CSS5列表頁面分析CSS布局：
首先我們可以分析出我們DIV CSS布局重構此頁面結構框架，我們可以看出是上、中、下結構，其中又包括了左右結構。
由此我們就要寫此頁面CSS和html時候就先從上到下從外到內原則寫CSS與Html。
我們首先建一個web的文件夾並在此文件夾裡新建html頁面命名為index.html，css文件命名為index.css。這裡有個訣竅就是可以導入模板方式來建css與html初始頁面，然後將CSS文件引用到Html，也就是我在模板裡介紹的css模板，再在CSS模板的基礎上再寫再添加CSS。
◆以下是index.html的Html代碼：
以下為引用的內容：
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHtml1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=gb2312"/>
- <title>css布局案例實驗頁面-www.DIV CSS5.com.cn</title>
- <linkhreflinkhref="index.CSS"rel="stylesheet"type="text/CSS"/>
- </head>copyrightwww.DIV CSS5.comDIV CSS5
- <body>
- <dividdivid="header">我是頭部（上）</div>
- <dividdivid="centers">
- <divclassdivclass="c_left">我是中的左</div>
- <divclassdivclass="c_right">我是中的右</div>
- <divclassdivclass="clear"> </div>
- </div>
- <dividdivid="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.5Arial,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:0auto;
- clear:both;font-size:18px;line-height:68px;font-weight:bold;}
- #header{height:68px;border:1pxsolid#CCCCCC;}
- #centers{padding:8px0;}
- #footer{border-top:1pxsolid#CCCCCC;background:#F2F2F2;}
- #centers.c_left{float:left;width:230px;border:1pxsolid#00CC66;
- background:#F7F7F7;margin-right:5px;}
- #centers.c_right{float:left;width:500px;border:1pxsolid#00CC66;background:#F7F7F7}
你可以考出此兩段代碼新建個試試，我們就布局出以上美工頁面CSS和html框架，然後根據各內容繼續添加CSS與Html源代碼。
以上是我們今天講解的css布局_DIV CSS布局重要及說明，希望對您有幫助。以上案例未詳解希望你親自多實踐，只有實踐才能練好技術。
【編輯推薦】
- CSS布局時需注意的八大技巧
- IE6.0對padding的解讀分析
- 揭露CSS中margins折疊現象內幕
- DIV+CSS開發XHtml網頁對SEO優化的影響
- DIV CSS網頁布局中對段落進行排版的方法