DIV CSS网页布局实例：十步学会用CSS建站

同样的，再往html文件的content层中加入padding层。

由于padding层的功能仅是制造空隙，所以不要设置它的宽度，只需在css中添加:

#sidebar-a {  
float: rightright;  
width: 280px;  
}  
#sidebar-a .padding {  
padding: 25px;  
}  
#content {  
margin-right: 280px;  
}  
#content .padding {  
padding: 25px;  
}  
#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: rightright;  
width: 280px;  
line-height: 18px;  
}  
#content {  
margin-right: 280px;  
line-height: 18px;  
}  
  
#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="http://www.webjx.com/htmldata/sort/images/headings/about.gif" width="54" height="14" alt="About" /></h2> 
<h2> <img src="http://www.webjx.com/htmldata/sort/images/headings/contact.gif" width="98" height="14" alt="Contact Us" /> </h2> 
<h2><img src="http://www.webjx.com/htmldata/sort/images/headings/about.gif" width="54" height="14" alt="About" /></h2>
<h2> <img src="http://www.webjx.com/htmldata/sort/images/headings/contact.gif" width="98" height="14" alt="Contact Us" /> </h2>

于是得到下图：

第七步：网站头部图标与logo部分的设计：

为实现设计时的网页头部效果，我们需要以下两幅图：

上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] 下一页

复制本页网址和标题，发送给你QQ/Msn的好友一起分享

上一篇:DIV CSS标准制作网页学习之学习DTD的元素

下一篇:用CSS如何控制网页中图片自适应大小？