CSS盒子模式DIV布局.docx

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想：

表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：

font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“＜div＞文字块一＜/div＞＜div＞文字块二＜/div＞＜div＞文字块三＜/div＞”，而用“＜p＞文字块一＜/p＞＜p＞文字块二＜/p＞＜p＞文字块三＜/p＞”更合适。

用DIV+CSS设计思路是这样的:

1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。

先看结果图：

演示地址：

CSS排版结果图

1.用div来定义语义结构

现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），

典型版面分栏结构

其结构代码如下：

＜divid="header"＞＜/div＞

＜divid="nav"＞＜/div＞

＜divid="content"＞＜/div＞

＜divid="footer"＞＜/div＞

上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这样代码就变成:

＜divid=”mainBox”＞

＜divid="header"＞＜/div＞

＜divid="nav"＞＜/div＞

＜divid="content"＞＜/div＞

＜divid="footer"＞＜/div＞

＜/div＞

最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，同时加上边框，那么它的样式是：

#mainBox{

margin:

0pxauto;

height:

auto;

width:

760px;

border:

1pxsolid#006633;

}

页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。

其样式代码为：

#header{

height:

100px;

width:

760px;

background-image:

url（headPic.gif）;

background-repeat:

no-repeat;

margin:

0px0px3px0px;

}

导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

#nav{

height:

25px;

width:

760px;

font-size:

14px;

list-style-type:

none;

}

#navli{

float:

left;

}

#navlia{

color:

#000000;

text-decoration:

none;

padding-top:

4px;

display:

block;

width:

97px;

height:

22px;

text-align:

center;

background-color:

#009966;

margin-left:

2px;

}

#navlia:

hover{

background-color:

#006633;

color:

#FFFFFF;

}

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。

内容区块样式代码为：

#content{

height:

auto;

width:

740px;

line-height:

1.5em;

padding:

10px;

}

#contentp{

text-indent:

2em;

}

#contenth3{

font-size:

16px;

margin:

10px;

版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。

其样式代码如下：

#footer{

height:

50px;

width:

740px;

line-height:

2em;

text-align:

center;

background-color:

#009966;

padding:

10px;

}

最后回到样式开头大家会看到这样的样式代码：

*{

margin:

0px;

padding:

0px;

}

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。

最终完成全部样式代码是这样的：

＜styletype="text/css"＞

＜!

--

*{

margin:

0px;

padding:

0px;

}

body{

font-family:

Arial,Helvetica,sans-serif;

font-size:

12px;

}

#mainBox{

margin:

0pxauto;

height:

auto;

width:

760px;

border:

1pxsolid#006633;

}

#header{

height:

100px;

width:

760px;

background-image:

url（headPic.gif）;

background-repeat:

no-repeat;

margin:

0px0px3px0px;

}

#nav{

height:

25px;

width:

760px;

font-size:

14px;

list-style-type:

none;

}

#navli{

float:

left;

}

#navlia{

color:

#000000;

text-decoration:

none;

padding-top:

4px;

display:

block;

width:

97px;

height:

22px;

text-align:

center;

background-color:

#009966;

margin-left:

2px;

}

#navlia:

hover{

background-color:

#006633;

color:

#FFFFFF;

}

#content{

height:

auto;

width:

740px;

line-height:

1.5em;

padding:

10px;

}

#contentp{

text-indent:

2em;

}

#contenth3{

font-size:

16px;

margin:

10px;

}

#footer{

height:

50px;

width:

740px;

line-height:

2em;

text-align:

center;

background-color:

#009966;

padding:

10px;

}

--＞

＜/style＞

结构代码是这样的：

＜divid="mainBox"＞

＜divid="header"＞＜/div＞

＜ulid="nav"＞

＜li＞＜ahref="#"＞首页＜/a＞＜/li＞

＜li＞＜ahref="#"＞文章＜/a＞＜/li＞

＜li＞＜ahref="#"＞相册＜/a＞＜/li＞

＜li＞＜ahref="#"＞Blog＜/a＞＜/li＞

＜li＞＜ahref="#"＞论坛＜/a＞＜/li＞

＜li＞＜ahref="#"＞帮助＜/a＞＜/li＞

＜/ul＞

＜divid="content"＞

＜h3＞前言＜/h3＞

＜p＞第一段内容＜/p＞

＜h3＞理解CSS盒子模式＜/h3＞

＜p＞第二段内容＜/p＞

＜/div＞

＜divid="footer"＞

＜p＞关于华升　广告服务　华升招聘　客服中心　QQ留言　网站管理　会员登录　购物车＜/p＞＜p＞Copyright©2006-2008TangGuohui.AllRightsReserved＜/p＞

＜/div＞

＜/div＞

好了，此文到此结束，更多内容，如：

CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。