其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。
DIV1列固定宽度居中+头部+导航+尾部－超级牛最详细的Div+CSS布局案例
第三个例子是我们在页面布局中加上了尾部，但一个标准的网站都有导航。这个例子加上了导航，这是最常用的页面表现形式，本次例子中还涉及了另三个要点，是很多朋友在CSS定义时经常遇到的问题。
CSS代码如下：
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
p{margin:0;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}
#mainContent { height:300px; background:#cff; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下：
1列固定宽度居中+头部+导航+尾部
效果下图显示：点击看大图
本例有三个关键要点
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;}
页面代码如下：
相关推荐：
loading