八、利用CSS制作导航栏菜单的习题

题目一：

利用CSS技术，结合链接和样表，设计并实现“ 山水之间 ”页面。

运行效果：

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>山水之间</title><style type="text/css">.all{margin-left: 20px;width: 1000px;}.top{margin-top: 15px;background: url(img1/top.jpg);height: 100px;width: 1000px;}ul{list-style-type: none;}li{float: right;}.top ul li{float: right;margin: 1px;}a{display: block;margin-top: -42px;padding: 10px;width: 35px;text-decoration: none;color: black;}a:hover,a:active{background-color: black;color: greenyellow;}h1{vertical-align: middle;display: inline-block;font-style: italic;}.two{background: url(img1/banner.jpg) no-repeat;height: 200px;}p{padding-top: 10px;padding-left: 30px;}img{border: 1px solid black;padding: 10px;margin: 15px;margin-left: 0px;}.admire{width: 1000px;}.bottom{text-align: center;margin-top: 15px;color: #838b83;}</style></head><body><div class="all"><div class="top">&emsp;<h1>山水之间</h1><ul><li><a href="#">首页</a></li><li><a href="#">诗文</a></li><li><a href="#">风景</a></li><li><a href="#">留言</a></li><li><a href="#">关于</a></li></ul></div><div class="two"><p>山和水的融合，是静和动的搭配</p><p>单调与精彩的结合，也就组成了最美的风景</p><p>在青山间探索，在绿水间泛舟......</p></div><div><h2>风光欣赏</h2><table class="admire"><tr><td><img src="img1/img1.jpg"/></td><td><img src="img1/img2.jpg"/></td><td><img src="img1/img3.jpg"/></td><td><img src="img1/img4.jpg"/></td></tr><tr><td><h3>绿松</h3></td><td><h3>瀑布</h3></td><td><h3>青山</h3></td><td><h3>泛舟</h3></td></tr><tr><td>这几棵松树向阳一边的枝桠，向下斜斜地伸着，像搭起一道绿色的天梯。</td><td>流云奔涌,群山浮动,滚滚的云流翻山而过,直汽深谷,气势磅礴,宏伟壮观。</td><td>湖治生活在山脚下，绿绿的青山环抱着她，清澈的湖水映出身边的生机勃勃</td><td>泛舟一日最，垂钓一片湖。</td></tr></table></div><div class="bottom">版权所有&copy;山水之间</div></div></body>
</html>

代码讲解：

（1）

```
.top ul li{float: right;margin: 1px;}
```
top ul li 是一个复合选择器，它的含义是 ul 元素是top 的元素内部的，并且这个 li 又是 ul 元素内部的。
在本例中就是为“ 首页、诗文、风景、留言、关于”设置右浮动，外边距为1px

（2）

1. 整体容器设定：
- 使用class为all的<div>作为整个页面内容的主要容器，通过设置margin-left和width来限定内容的展示范围并使其在页面上有一定的偏移和宽度约束。
2. 页面区域划分：
- 顶部区域：通过 class为 top 的<div>构建，包含一个标题<h1>（“山水之间”）和一个导航栏（由无序列表 <ul>及其中的<li>和<a>组成）。导航栏的<li>元素通过浮动设置实现从右向左的横向排列，每个<a>链接设置了特定的样式，如块级显示、垂直偏移、内边距等，并在鼠标悬停和点击时改变背景色和文本颜色。
- 横幅区域：class为two的<div>用于展示与山水主题相关的描述性段落<p>，并设置了特定的背景图片以增强视觉效果。
- 风光欣赏区域：通过一个无类名的<div>包含一个标题<h2>（“风光欣赏”）和一个class为admire的<table>。表格用于整齐地展示多幅山水风景图片，每张图片下方配有相应的标题<h3>和描述性文字。
- 底部区域：class为bottom的<div>用于显示版权信息，通过设置文本居中、顶部边距和文本颜色来规范其样式。

题目二

利用CSS技术，结合链接和样表，设计并实现“ 茶韵 ”页面。

运行效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>茶韵</title><style type="text/css">.all{width: 900px;}.MainBody{width: 380px;float: left;margin-left: 30px;}.MainBody a{float: right;text-decoration: none;color: black;margin-right: 30px;}ul,ol{list-style-type: none;margin: 0px;padding: 0px;}ul li{position: relative;}ul li ol{display: none;position: absolute;top: -1px;right: 100px;}ul li:hover,ul li:active{background-color: gray;font-weight:bolder;}ul li:hover ol{display: block;}.NavBar{float: right;margin-top: -190px;margin-right: 40px;}.TeaP,.MainBody{margin-top: 20px;}.MainBody a{}img{margin-left: 30px;}ul li a,ul li ol li a{text-align: center;width: 100px;color: black;text-decoration: none;line-height: 35px;font-size: 20px;display: block;}.bottom{background: url(img1/footer-bg.jpg);text-align: center;margin-left: 30px;}</style></head><body><div class="all"><img src="img1/top-bg.jpg"/><div class="MainBody">&emsp;&emsp;闲暇时刻，约上三五志同道合知己，去幽静深林寻一景色优美之亭，沏一壶好茶，知已们吟诗作处，赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、轴药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。<a href="#">更多茶文化>></a></div><div class="TeaP"><img src="img1/main.jpg"/><br /></div><nav><div class="NavBar"><ul><li><a href="#">首页</a></li><li><a href="#">茶品</a><ol><li><a href="#">乌龙茶</a></li><li><a href="#">普洱茶</a></li><li><a href="#">高山绿茶</a></li></ol></li><li><a href="#">企业</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></div></nav><br /><br /><div class="bottom">版权所有&copy;茶韵</div></div></body>
</html>

代码讲解：

（1）

图上“ 茶品 ”、“ 普洱茶 ”的背景颜色不同于其他的文字，是因为在这里
```
ul li:hover,ul li:active{background-color: gray;font-weight:bolder;}
```
设置了鼠标悬停和鼠标点击时的样式

（2）

本例中的默认隐藏二级导航的实现
对于有二级导航的 “茶品” 选项，在其<li>标签内部嵌套了一个<ol>（有序列表）。这个<ol>中的<li>元素就构成了 “茶品” 的二级导航，每个<li>中的<a>标签用于定义链接。
```
<li><a href="#">茶品</a><ol><li><a href="#">乌龙茶</a></li><li><a href="#">普洱茶</a></li><li><a href="#">高山绿茶</a></li></ol>
</li>
```
默认隐藏可以使用 CSS 的display属性来实现。
```
ul li ol {display: none;
}
```

（3）页面布局

整体容器设定：
- 使用class为all的<div>作为整个页面内容的主要容器，通过设置width来限定内容的展示范围。
页面区域划分：
- 顶部图片区域：在class为all的<div>内首先放置一张通过<img>标签引入的img1/top-bg.jpg图片，作为页面顶部的装饰或背景元素。
- 主体内容区域：
  - 茶文化描述部分：通过class为MainBody的<div>来呈现关于品茶情境及茶杯制作学问等相关的文字描述内容，并且在结尾处设置了一个指向更多茶文化内容的链接<a>。该<div>通过设置width、float等属性进行布局定位，使其在页面中占据一定位置并与其他元素协调排列。
  - 茶相关图片部分：通过class为TeaP的<div>展示一张img1/main.jpg的图片，用于直观呈现茶相关的视觉元素，与文字描述部分相互补充。
- 导航栏区域：利用<nav>标签包裹一个class为NavBar的<div>，其中包含一个<ul>无序列表构建导航栏。导航栏中的每个<li>代表一个主要导航选项，对于 “茶品” 选项还通过嵌套<ol>有序列表实现了二级导航，展示不同种类的茶。通过设置float、margin等属性将导航栏定位在页面右侧合适位置。
- 底部区域：通过class为bottom的<div>展示版权信息，设置了背景图片img1/footer-bg.jpg并使文本居中显示，以规范其样式并作为页面底部的标识。