[推荐]彻底弄懂CSS盒子模式(DIV布局快速入门)
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
演示地址：http://www.hsptc.com/css2.htmlCSS排版结果图
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：
| 以下是引用片段： <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; } |
| 如何针对Yahoo搜索进行网站优化 | 04-04 | |
| 搜索引擎不收录网站页面的15个原 | 04-04 | |
| 网站推广29大法 | 04-04 | |
| 搜索引擎优化培训教程 | 04-02 | |
| 彻底弄懂CSS盒子模式(DIV布局快速 | 03-19 | |
| Google优化圣经 | 03-19 | |
| 新网站流量快速提高实战 | 02-07 | |
| 2007年，个人站长将何去何从？ | 02-03 | |
| 个人网站到底应该做什么样的广告 | 01-29 | |
| 王通：网站的首页最应该放什么？ | 01-25 | |
| 百度与站长：关于网站收录删除和 | 01-04 | |
| 搜索引擎对页面各元素的权重比例 | 12-26 | |
您现在的位置：