利用Div+CSS布局网

3、下面简单介绍几种常见的网页布局形式。10.2.1两列布局图10.1是一个典型的两列布局页面，这样的页面通常是：一列较宽，用于展示页面主要内容；一列较窄，用于放置公告板、用户登陆框、目录等信息。10.2.2三列布局图10.2所示为一个典型的三列布局页面，这种布局方式主要出现在网站的首页或频道页。10.2.3多列布局搜狐网是一个很有名的门户网站，该网站经营综合性业务、社区、无线等增值性服务。图10.3为该网站的首页截图。由于网站的信息量比较大，要呈现的信息种类很多，因此采用四列布局，可以使网站结构看起来更加清晰。10.3利用Div+CSS布局网页Div标签作为页面元素的主要容器，

4、可容纳所有子Div标签、图像和文字等内容，并根据具体需要对各子Div标签和对象进行格式化。读者要能灵活掌握Div+CSS准确定位页面元素的排版技术，创建布局合理、美观的网页。10.3.1使用Div+CSS搭建页面通常用Div标签来定义网页上的一个特定的区域，将文字、图片和表格等网页元素放到此区域中，再用CSS对该Div标签定义的区域进行定位和样式的设置。CSS样式表不仅是定义页面样式的最佳工具，同时也具有精确地定位独享的控制能力，因此，它成为不可多得的网页布局工具。为了提高设计效率，可以事先定义好布局所需的CSS样式规则，然后在“插入Div标签”对话框中应用。使用这种方法排版

5、的网页中的代码简洁且更新方便，更能兼容更多的浏览器。1．CSS的盒子模式2．Div+CSS布局操作方法10.3.3Div+CSS标准的优点使用Div+CSS布局网页已经成为一种潮流，下面是使用Div+CSS标准的优点。符合W3C标准。W3C标准是现在主流的标准，这样可以保证网站不会因为网络的升级而惨遭淘汰。结构清晰，容易被搜索引擎搜索到，并能够优化搜索引擎。有很强的易用性，可以进行一次设计后，在其他地方发布。支持浏览器的向后兼容，几乎在所有的浏览器上都可以使用。表现和内容分离。这是使用CSS布局的特色所在，网页有许多内容，而将网页设计部分剥离出来放在一个独立的样式文件中，代码

6、会更加简洁，页面和样式可以方便地进行更新，也能大大提高网页下载速度。在使用表格布局时，会产生很多垃圾代码，并且一些修饰的样式及布局的代码混合在一起。相比之下，Div更着重体现样式和结构相分离，因此结构的重构性强。10.4本章小结当