CSS实例：设置nav高度与背景，实现网页布局

本资源是一份详细的HTML与CSS网页标准布局实例教程，主要讲解如何使用div+css来构建一个具有层次感和响应式的网页布局。首先，作者介绍了页面布局的基本步骤，包括： 1. **设置导航栏样式**：通过CSS定义`#nav`的样式，设置了高度为66px，背景图片为`nav_bg.gif`，并设置了底部间距。当鼠标悬停时，导航链接会改变背景图片的位置，以实现动态效果。 2. **一级菜单和二级菜单的样式**：`.nav_main`用于一级菜单，设置高度为36px，隐藏溢出内容，每个列表项`li`使用`float:left`使其水平排列。一级菜单链接`a`和子菜单链接`a`都有各自的样式，包括字体大小、颜色、内边距和背景图片。当鼠标悬停在一级菜单上时，链接和子链接的背景图片也会相应更新。 3. **二级菜单`nav_son`**：二级菜单高度为30px，同样采用浮动布局，子链接宽度为78px，文本居中，悬停时也有背景图片的变化。 4. **HTML结构搭建**：使用`<div>`标签创建了页面的基本结构，如`header`、`nav`、`maincontent`（包含`main`和`side`两个子元素）和`footer`。通过添加`id`属性，便于CSS选择器定位元素。 5. **使用父容器`container`**：为了简化布局，作者引入了一个`container`父元素，将所有其他`div`元素包裹其中。这样，只需要设置`container`的宽度和居中，就可以自动使得内部的所有子元素保持居中，并且调整整体布局的对齐。 6. **相对路径和根目录路径**：在CSS中使用相对路径引用背景图片，如`../images/nav_bg.gif`，这是相对于当前HTML文件的位置来查找图片资源的。 通过这个实例，学习者可以了解如何使用CSS来控制HTML元素的布局和样式，掌握div+css标准布局的核心原理和实践技巧。同时，它也强调了结构分析、设计模式以及灵活运用CSS选择器的重要性。