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

2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：

#main-nav {  
background: red;  
height: 50px;  
}  
#header {  
background: blue;  
height: 150px;  
}  
#sidebar-a {  
background: darkgreen;  
}  
#content {  
background: green;  
}  
#footer {  
background: orange;  
height: 66px;  
}  
  
 #main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}

表现如下：

第四步：网页布局与div浮动等：

1.浮动，首先让边框浮动到主要内容的右边。用css控制浮动:

 #sidebar-a {  
float: rightright;  
width: 280px;  
background: darkgreen;  
}  
  
 #sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

表现如下：

2.往主要内容的盒子中写入一些文字。在html文件中写入：

 <div id="content"> 
Lorem 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 id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.

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

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

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

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