DIV CSS布局.docVIP

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布局分析，我们以DIVCSS5列表页面分析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 /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /titlecss布局案例实验页面-/titlelink href=index.css rel=stylesheet type=text/css //head bodydiv id=header我是头部（上）/divdiv id=centersdiv class=c_left我是中的左/divdiv class=c_right我是中的右/divdiv class=clearnbsp;/div/divdiv 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 #CC