彻底弄懂CSS盒子模式（DIV布局快速入门）

日期：2007年12月9日作者：查看:[大字体中字体小字体]

像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

<styletype="text/css">



</style>

<divclass="mainBox">

<h5>前言</h5>

<p>正文内容</p>

</div>

<divclass="mainBox">

<h5>CSS盒子模式</h5>

<p>正文内容</p>

</div>

<divclass="mainBox">

<h5>转变思想</h5>

<p>正文内容</p>

</div>

<divclass="mainBox">

<h5>熟悉步骤</h5>

<p>正文内容</p>

</div> 更多内容请看Solaris基础知识入门网页优化专题，或

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：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.htmlCSS排版结果图
1. 用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：

<divid="header"></div>

<divid="nav"></div>

<divid="content"></div>

<divid="footer"></div>
更多内容请看Solaris基础知识入门网页优化专题，或
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

<body>

<divid="header"></div>

<divid="nav"></div>

<divid="content"></div>

<divid="footer"></div>
上一页 [1] [2] [3] [4] [5] [6] 下一页
彻底弄懂CSS盒子模式（DIV布局快速入门）相关文章：
·DIV+CSS布局入门实例教程
·创建一个纯CSS的水平导航条
·设计一个基于CSS的网页模板
·Javascript+CSS横向三级导航菜单
·站长推荐：53个CSS-不可或缺的技巧
·CSS文本：word-wrap
·网页设计基础:Div+CSS布局入门教程
·如何使用CSS来进行网页排版
·彻底弄懂CSS盒子模式（DIV布局快速入门）
·CSS中的滑动门技术
彻底弄懂CSS盒子模式（DIV布局快速入门）相关软件
·CSS中文教程
·Rapid CSS 2007 V8.0.0.75
·DVD Region+CSS Free Lite V5.9.8.3
·CSS-BuMa V1.2
·DVD Region+CSS Free V5.983
·ＣＳＳ２中文手册

上一篇:纯CSS代码实现翻页

下一篇:彻底弄懂CSS盒子模式

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

彻底弄懂CSS盒子模式（DIV布局快速入门）

熟悉工作流程

精品推荐

热点TOP10

特别推荐