DIV CSS布局使用流程
你對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網頁布局中對段落進行排版的方法
