文字块一
文字块二
文字块三
”更合适。用DIV CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
演示地址：http://www.hsptc.com/css2.htmlCSS 排版结果图
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：
<divid="header"></div>
<divid="nav"></div>
<divid="content"></div>
<divid="footer"></div>
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整洁排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
<body>
<divid="header"></div>
<divid="nav"></div>
<divid="content"></div>
<divid="footer"></div>
</body>
最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
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;
}
导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：
评论加载中…
 |