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:

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>sclBBS首页</title>

　　</head>

　　<body>

　　</div>

　　</div>

　　</div>

　　欢迎光临sclBBS。

　　</marquee>

　　</div>

　　</div>

　　</div>

　　<div class="boardName">JForum论坛</div>

　　</div>

　　</div>

　　<div class="boardName">JForum论坛1</div>

　　</div>

　　</div>

　　<div class="boardName">JForum论坛2</div>

　　</div>

　　</div>

　　<div class="boardName">JForum论坛3</div>

　　</div>

　　<div class="type">看谁在线上</div>

　　</div>

　　目前总共发表了 2,806 篇文章

　　目前总共有 4,186 位注册会员

　　最新注册的会员: mxjccut

　　目前总共有 80 位用户在线 :: 1 位会员, 79 位访客 [ 系统管理员 ] [ 版主 ]

　　最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13 16:12:34 ]

　　目前在线注册会员: Admin

　　</div>

　　</div>

　　</body>

　　</html>

　　图片不能上传，没办法了，不影响学习。

　　这是我设计的第一个布局，从中了解了，div是块状的，默认是占整行的，如果想设计成两列或多列，可以用float属性，它可以向左（float:left）浮动，这时，如果下面的div大小可以放下的话，就会浮动到上面一行，这样就形成了两列的布局，

　　多列以此类推。理解了基本的，以后就可以向细的方向学习了。希望给像我一样的初学美工的朋友点帮助，做开发的了解美工也很重要，艺多不压身嘛。

教程首页更多教程