DIV+CSS布局

DIV+CSS布局方法

DIV+CSS的网页标准化设计是web标准中的一种新的布局方式，正逐渐代替传统的表格（Table）布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。

DIV+CSS布局的优势：

1、表现和内容分离，便于站点重构页面
DIV+CSS模式具有比表格更大的优势，他将网页结构与内容相分离，代码简洁，利于搜索，方便后期维护和修改。
2、结构清晰，对搜索引擎更加友好
DIV+CSS构架的页面具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。
3、便于web项目开发分工协作
DIV+CSS构架的表现和内容分离的特性使得程序员和页面设计者只要通过一定页面元素的约定便可进行各自擅长的程序控制和页面展示部分的开发，减少相互的关联性，大大提高了开发效率。

DIV+CSS布局的操作方法:

布局的标准形式：
头部+导航+内容+尾部
内容部分的布局又可分为两列右窄左宽型、两列左窄右宽型，3列宽度居中几种方式。这些页面布局的基本原则是为每个独立的部分建立一个div层，以头部+导航+两列右窄左宽型+尾部布局为例，其div布局如下：

"container">
   
"header">This is the Header
   
"menu">This is the Menu
   
"mainContent">
     
"sidebar"> This is the sidebar
     
"content">
   
   
"footer">This is the footer

  

然后利用css属性对div层进行版式等相关信息的控制
例如sidebar层和content层的相对位置可以通过设定#sidebar{float：right}和#content{float：left}进行，即通过设定层的向右浮动和向左浮动完成定位。
CSS对层的控制主要体现在层容器与页面相对的上下左右边距、内容与边框之间的填充边距、内容区域大小、边框变化等几个方面问题，如图所示：

width和height定义的是content部分的宽度和高度，padding、border和margin的宽度依次加在外面，背景会填充padding和content部分，通常，与页面的相对位置主要由margin属性来控制，而padding是指元素的周边和内部的内容之间所空的空格，又称为填充区域。
在CSS的样式表定义中，进行一般的网页布局需要了解以下几个方面的问题：
1、保持居中
保持整体页面居中
通过CSS的margin属性对元素进行定义可以达到控制网页显示位置的效果

body{text-align：center；margin：0 auto；}

”margin：0 auto“代表上下边距为0， 左右边距为自动调整。
保持页面背景居中
页面背景的居中包括左右居中和上下居中，可使用下面的定义：

body{background：url（）#FFF no-repeat center}

让url指示图片设置背景不重复（no-repeat） 并将居中（center），这个居中是左右居中，而垂直居中不需要设置，会自动居中。
文字图片内容居中
对于左右居中：
text-algin：center 即可让文字与图片内容居中
对于文字垂直居中，则要设置行高 使用line-height来实现文字与图片的垂直居中。当line-height和height的值一样时 则居中。
2、内容排版
在需要水平排版内容时，通过margin-left和margin-right来调整左右间距达到合适的效果，在需要垂直排版内容时，通过margin-top和margin-bottom调整上下间距达到合适效果。
3、浏览器的兼容性
不同的浏览器由于设计的不同，对于同样的CSS设计可能效果略有不同，所以在完成页面的设计后需要在可能碰到的浏览器上进行测试。目前较常用的浏览器有：（IE9、IE10、Google Chrome、Firefox、Opera等）。
页面DIV布局分析
页面结构大致分为以下几个部分：
（1）头部区域：包含网站的标题和说明文字。
（2）导航区域：包含一组横向导航条。
（3）主体部分：又分为侧边栏、主题内容。
（4）底部：包括一些版权信息。
设计结构如图：
其DIV结构如下面的代码块：

"Header">
"menu">
"content">
   
"content_left">
   
"content_right">
 
"Footer">

有了这些分析，页面布局与规划已经完成，接下来就是完成HTML代码和CSS搭建出整个页面的框架。