用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
演示地址：http://www.hsptc.com/css2.htmlCSS排版结果图
- 用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：
| 以下是引用片段： <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="footer"></div> |
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
| 以下是引用片段： <body> <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="footer"></div> </body> |
最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：
| 以下是引用片段： body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; } |
页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：
| 以下是引用片段： #header { height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; } |
导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：
| 以下是引用片段： #nav { height: 25px; width: 760px; font-size: 14px; list-style-type: none; } #nav li { float:left; } #nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px; text-align:center; background-color: #009966; margin-left:2px; } #nav li a:hover{ background-color:#006633; color:#FFFFFF; } |
