2011-03-16 11:44:40| 分类: 计算机与 Interne | 标签: |举报 |字号大中小 订阅
第三个例子是我们在页面布局中加上了尾部,但一个标准的网站都有导航。这个例子加上了导航,这是最常用的页面表现形式,本次例子中还涉及了另三个要点,是很多朋友在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;}
页面代码如下:
<body>
<div id="container">
<div id="header">这是头部</div>
<div id="menu">这是导航</div>
<div id="mainContent">
<p>1列固定宽度居中+头部+导航+尾部</p>
</div>
<div id="footer">这是尾部</div>
</div>
</body>
效果下图显示:点击看大图
本例有三个关键要点
1、p标签有默认值
一样都是“margin-bottom:5px;”,如果仔细比较以前的示例,会发现,mainContent的上边界比较宽,超出了5px,原因是mainContent里嵌套了一个<p>。“p{margin:0;}”是将<p>的默认值清空。
一样的代码有
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”。
部分代码例子由“标准之路www.aa25.cn”提供,感谢!
评论