使用Div+CSS构建网页布局实战教程

"产品导购与使用问答的样式定义与网页布局实例" 在网页设计中，`div+css`是一种常见的布局方式，它通过定义HTML中的`div`元素样式来实现页面结构和样式的分离，提高代码的可维护性和重用性。在给定的“产品导购”样式定义中，我们可以看到如何利用CSS来美化一个特定的产品展示区域。 `.product` 是一个通用类，用于定义整个产品的基础样式，如内边距（`padding:0px 10px;`）。这里的`padding`属性设置了左右内边距为10像素，使得内容与容器边缘保持一定的距离。 `.product ul` 是产品列表的样式，背景使用了图片`icon2.gif`，并且设置了背景的位置（`background-position:5px 12px;`）以及重复方式（`no-repeat;`）。这意味着每个列表项的左边会有图标，并且不会重复显示。 `.product ul li` 定义了列表项的基本样式，包括高度（`height:58px;`），内上边距（`padding:14px 0 0 64px;`），下边框（`border-bottom:1px dashed #dcdcdc;`）以及文字颜色（`color:#777;`）。内上边距的设置使得内容与边框有适当的间距，下边框则分隔了不同的产品条目。 `.product ul li strong` 用于加粗产品名称，保持在块级元素中，设置高度和颜色使其更突出。 `.product ul li a` 是链接的样式，颜色为灰色（`color:#777;`），鼠标悬停时会下划线（`a:hover { text-decoration:underline;}`），增强了用户体验。 `.product ul li.product3` 是一个特例，没有下边框，这可能是为了区分最后一个产品条目，`border-bottom:none;`移除了其下边框。 接下来，“使用问答”部分使用了`dl`、`dt`和`dd`标签，这是语义化HTML中用于定义列表的标准方式。`dl`代表定义列表，`dt`是定义术语或问题，`dd`则是对应的解释或答案。这种方式有助于搜索引擎理解页面内容，同时方便屏幕阅读器等辅助技术的用户。 在网页标准布局实例教程中，我们遵循了一定的步骤来构建页面： 1. **建立站点**：在Dreamweaver（Dw）中创建站点，设置好工作环境。 2. **结构分析**：分析页面布局，将页面拆分为头部、导航、主体和底部等部分。 3. **搭建框架**：使用`div`元素创建页面结构，为每个区域分配一个ID，如`header`、`nav`、`maincontent`、`main`、`side`和`footer`。 4. **居中布局**：通过添加一个包含所有内容的外层`div`（如`container`），并设置其宽度和居中样式，实现整体页面的居中显示。 在实际开发过程中，开发者还会涉及到图片切割、相对路径和相对于根目录路径的使用，以确保资源的正确引用。此外，通过调整CSS样式，可以实现不同元素的显示效果，比如文字加粗、颜色变化、背景图片等，以达到理想的页面设计。