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

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

<styletype="text/css">

<!--

*{margin:0px;padding:0px;}

body{

font-size:12px;

margin:0pxauto;

height:auto;

width:805px;

}

.mainBox{

border:1pxdashed#0099CC;

margin:3px;

padding:0px;

float:left;

height:300px;

width:192px;

}

.mainBoxh5{

float:left;

height:20px;

width:179px;

color:#FFFFFF;

padding:6px3px3px10px;

background-color:#0099CC;

font-size:16px;

}

.mainBoxp{

line-height:1.5em;

text-indent:2em;

margin:35px5px5px5px;

}

-->

</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>

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“
共7页: 上一页 [1] [2] 3 [4] [5] [6] [7] 下一页

评论加载中…