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

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

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

}

导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

#nav{

height:25px;

width:760px;

font-size:14px;

list-style-type:none;

}

#navli{

float:left;

}

#navlia{

color:#000000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-align:center;

background-color:#009966;

margin-left:2px;

}

#navlia:hover{

background-color:#006633;

color:#FFFFFF;

}

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

#content{

height:auto;

width:740px;

line-height:1.5em;

padding:10px;

}

#contentp{

text-indent:2em;

}

#contenth5{

font-size:16px;

margin:10px;

版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

#footer{

height:50px;

width:740px;

line-height:2em;

text-align:center;

background-color:#009966;

padding:10px;

}

最后回到样式开头大家会看到这样的样式代码：

*{

margin:0px;

padding:0px;

}
更多内容请看Solaris基础知识入门网页优化专题，或
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

<styletype="text/css">

<!--
上一页 [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

特别推荐