彻底弄懂CSS盒子模式（DIV布局）
新客网 XKER.COM 2007-03-20 来源： 收藏本文
熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：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定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
演示地址：http://www.hsptc.com/css2.html
CSS排版结果图
1.用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），
典型版面分栏结构
其结构代码如下：
＜div id="header"＞＜/div＞
＜div id="nav"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="footer"＞＜/div＞
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这样代码就变成:
＜div id=”mainBox”＞
＜div id="header"＞＜/div＞
＜div id="nav"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="footer"＞＜/div＞
＜/div＞
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：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定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
演示地址：http://www.hsptc.com/css2.html
CSS排版结果图
1.用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），
典型版面分栏结构
其结构代码如下：
＜div id="header"＞＜/div＞
＜div id="nav"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="footer"＞＜/div＞
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这样代码就变成:
＜div id=”mainBox”＞
＜div id="header"＞＜/div＞
＜div id="nav"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="footer"＞＜/div＞
＜/div＞
最新相关文章发表评论
评论内容：不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。
阅读排行
随机推荐
实用信息推荐