超级牛最详细的Div+CSS布局案例教学教材

效果下图显示：点击看大图

本例有三个关键要点

1、p标签有默认值

一样都是“margin-bottom:5px;”，如果仔细比较以前的示例，会发现，mainContent的上边界比较宽，超出了5px，原因是mainContent里嵌套了一个

。“p{margin:0;}”是将

的默认值清空。

一样的代码有

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, td

{margin:0; padding:0;}

p标签有默认值为：p{margin:1em 0;} /* p标签上下外间距为16px; */

ul标签有默认值为：ul{padding-left:40px;margin:1em 0;} /* ul 标签上下外间距为16px;左内间距为40px; */

2、px和em的换算

16px = 1em

12px = 0.75em

10px = 0.625em

3、文字垂直对齐

说到文字垂直对齐，很多人第一反应是vertical-align:middle; 但，其实如想设置文字垂直居中，那么一定要设置ling-height的属性值和height值一样，这样才会使文字垂直居中，单独设置vertical-align:middil是不会使文字垂直居中的。所以在“menu”的样式定义中我没有使用“vertical-align:middil”而是使用了“ line-height:30px”。

DIV2列固定宽度左窄右宽型+头部－超级牛最详细的Div+CSS布局案例

从这个例子开始，我们开始讲左右的布局的CSS，DIV左右布局是CSS中最复杂的。

CSS代码如下：

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:900px;}

#header { height:100px; background:#6cf; margin-bottom:5px;}

#mainContent { margin-bottom:5px;}

#sidebar { float:left; width:200px; height:500px; background:#9ff;}

#content { float:right; width:695px; height:500px; background:#cff;}

页面代码如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• >>
• 14

超级牛最详细的Div+CSS布局案例教学教材

其中居中的关键是将“margin:0auto;”写在最大的背景盒套中，宽度由#container决定。DIV1列固定宽度居中+头部+导航+尾部－超级牛最详细的Div+CSS布局案例第三个例子是我们在页面布局中加上了尾部，但一个标准的网站都有导航。这个例子加上了导航，这是最常用的页面表现形式，本次例子中还涉及

推荐度：

点击下载文档文档为doc格式