CSS+div布局实战教程：实现响应式设计

本资源是一份详细的div+css网页开发教程，主要涉及CSS代码编写和网页标准布局实践。内容包括以下几个关键知识点： 1. **CSS样式定义**: - `.h_mainbox` 类设置了外边距、内边距、边框样式、背景图片以及下内边距，用于创建一个具有标题、内容和底部区域的基础容器。 - `.h_mainbox h2` 部分定义了二级标题的样式，包括字体大小、高度、行高、底部边框和颜色。 - `.h_mainbox h2 span` 使用浮动属性将子元素（如链接）置右，并设置正常权重。 - `.h_mainbox ul` 与`.mainlist` 设置了列表样式，包括内边距、背景色和使用自动滚动功能。 2. **响应式设计与IE6/7/8兼容性**: - 注释提到加红色部分的代码有助于在老版本IE浏览器中实现正常显示效果，这可能涉及使用条件注释（`<!--[if lt IE 8]...<![endif]-->`）来应用针对特定浏览器的CSS修复或特性。 3. **网页结构搭建**: - 整个过程包括建立站点、结构分析、创建HTML模板。使用Dreamweaver建立站点，并分析页面结构以确定各个部分的布局。 - HTML结构中，`<div>` 元素被用来定义页面的各个区域，如头部（header）、导航（nav）、主体内容（maincontent，包含main和side）、和底部（footer）。 4. **CSS框架和布局**: - 通过设置`<div id="container">` 作为父容器，将所有子元素宽度设为auto并居中，简化了整体布局。这样做的好处是便于管理，并确保所有子元素随着父容器一起居中显示。 5. **相对路径和根目录路径**: - 页面中的图像引用使用相对路径，如`url(../mainbox_bg.gif)`，这是为了让图片在不同目录下也能正确加载。同时，指定了HTML文档的字符集为GB2312。 通过这个教程，读者可以学习如何使用div+css进行网页布局，优化兼容性和实现简洁的HTML结构。理解并掌握这些知识点对于前端开发者来说至关重要，可以帮助他们创建出适应多种浏览器的美观且功能完整的网站。