|
十步学会用css建站第六步(2) 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>标签中写入：
<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
<h2> <img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /> </h2>
于是得到下图(点击看大图)：
|
