CSS教程_十步学会用css建站.pptVIP

然后需要让content层的四周都空出25px的间隙，这本来是件很简单的事，理论上我们只需在#content的css文件中加入padding: 25px;就行了，但是IE给我们上了“一课”,它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁，所以我们用另一种办法。 我们往需要填充的层中加入padding层，它的功能仅限于显示间隙： div id=sidebar-adiv class=paddingLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst./div/div 同样的，再往html文件的content层中加入padding层。由于padding层的功能仅是制造空隙，所以不要设置它的宽度，只需在css中添加: #sidebar-a {float: right;width: 280px;}#sidebar-a .padding {padding: 25px;}#content {margin-right: 280px;}#content .padding {padding: 25px;} 就像我们之前用的方法一样，我们只选择了类(class)为padding，且父类(parent)为#content或#sidebar-a的元素(element)。 接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入： #sidebar-a {float: right;width: 280px;line-height: 18px;}#content {margin-right: 280px;line-height: 18px;} 现在可以看到标题about和contact us显得相当突兀，这是因为我们使用的字体并不是一种网页字体，我们需要将其替换为图片，并将其存放于/images/headings/文件夹中： 替换方法为，在html文件的h2标签中写入： h2img src=images/headings/about.gif width=54 height=14 alt=About //h2h2img src=images/headings/contact.gif width=98 height=14 alt=Contact Us //h2 于是得到下图 第七步：网站头部图标与logo部分的设计 为实现设计时的网页头部效果，我们需要以下两幅图：/images/headers/about.jpg /images/general/logo_enlighten.gif 首先我们给#header层添加背景图案 #header {height: 150px;background: #db6d16url(../images/headers/about.jpg);} 我们使用的背景属性为一些简写的属性名，用其能规定背景的颜色，图案，图案的位置，是否重复以及如何重复。之所以把背景色设为桔黄色，是因为当用户使浏览 器屏蔽图片时，网站的头部不会变的一片空白。应该注意到图片的路径是相对于css的存放位置而言的，而不是html文件，因此有../。 接着替换掉h1/h1标签里的