本资源是一份详细的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结构。理解并掌握这些知识点对于前端开发者来说至关重要,可以帮助他们创建出适应多种浏览器的美观且功能完整的网站。