div結合css佈局bbs首頁(div css佈局入門)_經驗交流

我把論壇首頁分為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;
}

.
html:

複製程式碼 程式碼如下: