![]() |
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
用CSS网站布局之十步实录(六) | |||
2010-4-24 8:02:09 文/52CSS 出处:52CSS | |||
你是不是厌倦了那些大红大绿的背景,现在是去掉它们的时候了,只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此,很好,再过几步,你就能很好了解css控制整个网页版面(Layout)的能力。 body { 一般我们把body标签放在css文件的顶端,当然你要是执意要把它放在尾部,浏览器不会和你计较。font-family内的顺序决定字体显示优先级,比方如果所在计算机没有Arial字体,浏览器就会指向Helvetica字体,依次类推;color指字体颜色;background指背景颜色。 你可以看到内容(content)的各块(block)之间的间隙太小了,而基于最初的设计,内容标题(即<h2>)和正文之间的间隙大概是15px,每个段落的间距也大概是15px,所以在css中写入: #content h2 { 然后需要让content层的四周都空出25px的间隙,这本来是件很简单的事,理论上我们只需在#content的css文件中加入padding: 25px;就行了,但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁,所以我们用另一种办法。 <div id="sidebar-a"> 同样的,再往html文件的content层中加入padding层。 #sidebar-a { 就像我们之前用的方法一样,我们只选择了类(class)为padding,且父类(parent)为#content或#sidebar-a的元素(element)。 #sidebar-a {
现在可以看到标题"about"和"contact us"显得相当突兀,这是因为我们使用的字体并不是一种网页字体,我们需要将其替换为以下图片,并将其存放于/images/headings/文件夹中: 于是得到下图: |
|||
最新热点 | 最新推荐 | 相关文章 | ||
用CSS网站布局之十步实录(七) 用css网站布局之十步实录(五) 用css网站布局之十步实录!(四) 用css网站布局之十步实录!(三) 用css网站布局之十步实录!(二) 用css网站布局之十步实录!(一) |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |