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: 复制代码 代码如下: