作者:Jorux翻译
来源:Jorux翻译
热度:
2006-10-10 13:50:40
刷新页面可以看到在Content层中又出现一些空白,这是由于<h2><p>标签的默认边距(margin)造成的,我们必须消除这些恼人的空白,当又不想把网页中所有的<h2><p>标签地边距都设为0,这就需要使用css的子选择器 ("child css selector"),在html的文件结构中,我们想控制的<h2><p>标签(child)是属于#content层(parent)的,因此在css文件中写入:
| #content h2 { margin: 0; padding: 0; } #content p { margin: 0; padding: 0; } |
这样我们就告诉浏览器,仅仅是隶属于content层的<h2><p>标签的margin和padding的值为0!
第六步:页面内的基本文本的样式(css)设置
你是不是厌倦了那些大红大绿的背景,现在是去掉它们的时候了,只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此,很好,再过几步,你就能很好了解css控制整个网页版面(Layout)的能力。
–言归正传–
先设置全局的文本样式:
| body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff; } |
一般我们把body标签放在css文件的顶端,当然你要是执意要把它放在尾部,浏览器不会和你计较。font-family内的顺序决定字体显示优先级,比方如果所在计算机没有Arial字体,浏览器就会指向Helvetica字体,依次类推;color指字体颜色;background指背景颜色。
如果你都是按本教程的操作,应该能看到下图:

你可以看到内容(content)的各块(block)之间的间隙太小了,而基于最初的设计,内容标题(即<h2>)和正文之间的间隙大概是15px,每个段落的间距也大概是15px,所以在css中写入:
| #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } |
然后需要让content层的四周都空出25px的间隙,这本来是件很简单的事,理论上我们只需在#content的css文件中加入 padding: 25px;就行了,但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码 (HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁,所以我们用另一种办法。
我来说两句:
推荐文章
相关文章