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:
複製代碼 代碼如下:






sclBBS首頁

首頁

搜尋

會員列表

熱門主題

最新主題

歡迎光臨sclBBS。




版面
主題
文章
最後發表


開源項目



JForum論壇
23
23
23



開源項目1



JForum論壇1
23
23
23



開源項目2



JForum論壇2
23
23
23




開源項目3



JForum論壇3
23
23
23







看誰線上上




目前總共發表了 2,806 篇文章
目前總共有 4,186 位註冊會員
最新註冊的會員: mxjccut
目前總共有 80 位使用者線上 :: 1 位會員, 79 位訪客 [ 系統管理員 ] [ 版主 ]
最高線上人數 2,712 人 [ 記錄時間 :: 2007-08-13 16:12:34 ]
目前線上註冊會員: Admin






Powered by sclBBS author:sclsch@188.com






圖片不能上傳，沒辦法了，不影響學習。
這是我設計的第一個布局，從中瞭解了，div是塊狀的，預設是占整行的，如果想設計成兩列或多列，可以用float屬性，它可以向左（float:left）浮動，這時，如果下面的div大小可以放下的話，就會浮動到上面一行，這樣就形成了兩列的布局，
多列以此類推。理解了基本的，以後就可以向細的方向學習了。希望給像我一樣的初學美工的朋友點協助，做開發的瞭解美工也很重要，藝多不壓身嘛。

