div结合css布局bbs首页(div+css布局入门)

最近趁离职，我在做一个论坛系统，练练手，需要一个论坛首页的html页面，深知自己美工极差，心里很苦啊。于是买了本div+css网站布局的书，没想到讲得还不错，感觉长进很快，于是磨拳擦掌非要自己写一个不可，高手末笑。代码伺候。 在网页设计中，Div+CSS布局是一种常见的网页结构布局方式，它通过HTML的Div标签结合CSS（层叠样式表）来实现页面元素的定位、样式控制以及页面布局。本篇文章将详细讲解如何利用Div+CSS布局创建一个论坛首页，帮助初学者理解这种布局方式。 我们将论坛首页划分为几个主要区域：Header区、信息区、内容区和页脚区。这些区域通过Div标签进行定义，然后使用CSS进行样式设置和定位。在HTML文件中，我们先创建一个大Div，用于包裹整个页面，这样可以方便地对整体页面进行宽度和样式的调整。例如： ```html <div class="pageholder"> <!-- Header区 --> <div class="header"> <!-- logo --> <div class="logo"></div> <!-- 导航栏 --> <div class="navigate"> <ul> <li><a href="#">导航链接1</a></li> <li><a href="#">导航链接2</a></li> ... </ul> </div> </div> <!-- 信息区 --> <div class="notice">...</div> <!-- 内容区 --> <div class="content"> <!-- 内容头部 --> <div class="contentHead">...</div> <!-- 主要板块 --> <div class="typeHolder"> <div class="type">...</div> </div> <!-- 版块列表 --> <div class="boardHolder"> <div class="boardName">...</div> <div class="subject">...</div> <div class="article">...</div> <div class="last">...</div> </div> </div> <!-- 页脚区 --> <div class="footer">...</div> </div> ``` 接着，我们编写CSS文件来设置各个区域的样式。例如，`pageholder`类用于设置整个页面的宽度和边框，`header`类设置头部背景颜色和高度，`logo`类加载logo图片，`navigate`类定义导航栏的样式，`notice`类定义信息区的样式，`content`类定义内容区的背景颜色和高度，`contentHead`类定义内容头部的样式，而`f1`, `f2`, `f3`, `f4`等类分别定义内容区内的不同列宽和背景色。例如： ```css /* CSS Document */ body { background-color: #F5F5F5; margin: 0; padding: 0; font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; font-size: 12px; } .pageholder { width: 100%; margin: auto; background-color: #2662DF; border-left: 2px solid #7197D7; border-right: 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; } .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; } ... ``` 在实际应用中，Div+CSS布局的优势在于它可以实现更灵活的布局，使网页设计更具响应性。通过浮动、定位、盒模型等CSS特性，我们可以精确控制每个Div元素的位置和大小，实现复杂的网页布局。同时，将样式与内容分离也有利于提高代码的可维护性和可重用性。 对于初学者来说，掌握Div+CSS布局是网页设计的基础，通过不断实践和学习，可以逐渐提升网页设计和布局的能力。在这个例子中，论坛首页的各个部分通过Div和CSS的组合，形成了清晰的结构和美观的界面。继续深入学习和实践，你也可以创造出更多富有创意和功能性的网页。