div结合css布局bbs首页(div+css布局入门)_经验交流

原创: 2016-05-16 12:04:12 1928浏览

我把论坛首页分为header区，信息区，内容区，页脚区。首先用一大div把这些包含进来，主要是考虑到页面整体调节方便，比如要调成宽屏的或者是窄屏的，只要设置一下这个大div就可以了。
先把代码贴出来，供朋友们调试使用。
css:

复制代码代码如下:

/* CSS Document */ 
body{ 
background-color:#F5F5F5; 
margin:0; 
padding:0; 
font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ,sans-serif; 
font-size:12px; 
} 
.pagehoder{ 
width:100%; 
margin:auto; 
background-color:#2662DF; 
border-left:2px solid #7197D7; 
border-rigth:2px solid #7197D7; 
border-bottom:2px solid #7197D7; 
} 
.header{ 
border-top:2px solid #7197D7; 
height:60px; 
background-color: #B1C3D9; 
} 

.logo{ 
background:url(../images/logo.png) no-repeat ; 
width:200px; 
height:60px; 
float:left; 
} 
.img{ 
background:url(../images/images1.jpg) repeat-x ; 
height:60px; 
} 
.navigate { 
padding-left:20px; 
background-color:#F3F8FE; 
height:10px; 
} 
.navigate li{ 
float:left; 
} 
.navigate li a{ 
margin-left:2px; 
padding-top:3px; 
padding-bottom:3px; 
text-align:center; 
display:block; 
text-decoration:none; 
width:70px; 
height:10px; 
background-color:#ececec; 
} 
.navigate li a:hover{ 
color:#ffffff; 
background-color:#bbbbbb; 
} 
.notice{ 
background-color:#ffffff; 
height:20px; 
} 
.content{ 
background-color:#0000FF; 
height:400px; 
} 
.contentHead{ 
text-align:center; 
padding-top:5px; 
padding-bottom:0px; 
height:20px; 
background-color:#71A3CC; 
} 
.f1{ 
width:60%; 
float:left; 
background-color:#71A3CC; 
} 
.f2{ 
width:12%; 
float:left; 
background-color:#71A3CC; 
} 
.f3{ 
width:12%; 
float:left; 
background-color:#71A3CC; 
} 
.f4{ 
width:15%; 
background-color:#71A3CC; 
} 

.typeHolder{ 
width:100%; 
background-color:#D9DBE4; 
} 
.type{ 
width:60%; 
float:left; 
} 
.boardHolder{ 
text-align:center; 
width:100%; 
background-color:#FFFFFF; 
} 
.boardName{ 
width:60%; 
float:left; 
} 
.subject{ 
width:12%; 
float:left; 
background-color:#F7F7F8; 
} 
.article{ 
width:12%; 
float:left; 
background-color:#F7F7F8; 
} 
.last{ 
width:15%; 
background-color:#F7F7F8; 
} 
.msg{ 
background-color:#FAFAFA; 
height:60px; 
} 
.footer{ 
background-color:#99CC33; 
height:20px; 
text-align:center; 
} 