【下载文档:  div结合css布局bbs首页(div+css布局入门).txt 】

---

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: 复制代码 代码如下: 图片不能上传，没办法了，不影响学习。 这是我设计的第一个布局，从中了解了，div是块状的，默认是占整行的，如果想设计成两列或多列，可以用float属性，它可以向左（float:left）浮动，这时，如果下面的div大小可以放下的话，就会浮动到上面一行，这样就形成了两列的布局， 多列以此类推。理解了基本的，以后就可以向细的方向学习了。希望给像我一样的初学美工的朋友点帮助，做开发的了解美工也很重要，艺多不压身嘛。