使用CSS布局构建产品导购与问答页面

本资源是一个关于使用Div+CSS进行网页标准布局的实例教程，主要讲解如何构建一个包含头部、导航、主体（两列）和底部的网页布局，并提供了具体的样式定义，如产品导购和使用问答的样式设计。 在这个实例中，我们首先了解了建立站点的基本步骤，包括在Dreamweaver (Dw)中创建站点和设置文档类型声明。接着，对页面结构进行了分析，确定了页面主要由头部、导航、主体（分为左右两列）和底部四大部分组成。 在搭建框架阶段，我们学习了如何使用Div标签来创建这些区域，并给每个区域分配了特定的ID，如"header"、"nav"、"maincontent"、"main"、"side"和"footer"。为了实现整个页面居中显示，我们引入了一个外部的父级Div，即"container"，并将它设置为固定宽度并居中对齐。 对于样式定义，`<div class="product">` 用于产品导购部分，设置了内边距、背景图片以及列表项的样式。`<ul>` 的背景使用了icon2.gif，列表项`<li>` 有特定的高度、内边距、边框和颜色，`<strong>` 标签内的文字加粗，链接`<a>` 在鼠标悬停时会下划线。此外，还有一个特别的类 `.product3`，用于移除底部边框。 在“使用问答”部分，使用了`dl`, `dt`, 和 `dd` 标签来呈现一问一答的格式，其中`dt`代表问题，`dd`表示答案，可以通过CSS为它们添加不同的图标和样式，以区分问题和答案。 这个实例进一步涉及到了相对路径和相对于根目录路径的概念，这对于正确引用页面中的图像和其他资源至关重要。 这个教程详细介绍了使用Div+CSS布局网页的基本流程，包括站点建立、结构分析、框架搭建、样式定义以及路径处理，对于初学者来说是一个很好的实践指导。通过这个实例，读者可以了解到网页布局的基本原理，并学会如何运用CSS控制页面元素的样式和布局。