八、利用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">
 <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">版权所有©山水之间
</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>用于显示版权信息，通过设置文本居中、顶部边距和文本颜色来规范其样式。
- 顶部区域：通过 class为 top 的
题目二
利用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">
  闲暇时刻，约上三五志同道合知己，去幽静深林寻一景色优美之亭，沏一壶好茶，知已们吟诗作处，赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、轴药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。
<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">
版权所有©茶韵
</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并使文本居中显示，以规范其样式并作为页面底部的标识。
- 顶部图片区域：在