第八章 利用CSS制作导航菜单课后练习
1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>山水之间</title>
<style type="text/css">
.bcd{
width: 980px;
}
.b{
width: 980px;
background: url(img/top.jpg);
}
h3{
font-size: 30px;
font-style: italic;
}
a{
text-decoration: none;
font-size: 20px;
margin: 2px;
}
a:hover{
background-color: lawngreen;
color: black;
}
.c{
width: 950px;
background: url(img/banner.jpg);
height: 200px;
margin-top: 10px;
padding-left: 30px;
}
.d{
width: 980px;
}
img{
border: 7px solid #aaafff;
}
.jieshu{
width: 980px;
height: 30px;
background-color: burlywood;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bcd">
<div class="b">
<h3>山水之间</h3>
<p align="right">
<a href="#">首页</a>
<a href="#">诗文</a>
<a href="#">风景</a>
<a href="#">留言</a>
<a href="#">关于</a>
</p>
</div>
<div class="c">
<p>
山与水的交融，是静与动的完美搭配，
<br>
是单调与精彩的巧妙结合，由此构成了最美的风景。
<br>
在青山间探寻，于绿水间泛舟……
</p>
</div>
<div class="d">
<h1>风光欣赏</h1>
<table>
<tr>
<td><img src="img/img1.jpg"/></td>
<td><img src="img/img2.jpg"/></td>
<td><img src="img/img3.jpg"/></td>
<td><img src="img/img4.jpg"/></td>
</tr>
<tr>
<td>
<h2>绿松</h2>
这几颗松树向阳一侧的枝桠，向下斜伸着，宛如搭起一道绿色的天梯。
</td>
<td>
<h2>瀑布</h2>
流云奔涌，群山浮动，滚滚云流翻山越岭，直入深谷，气势磅礴，宏伟壮观。
</td>
<td>
<h2>青山</h2>
湖泊静卧于山脚下，青葱的山峦环抱着它，清澈的湖水倒映出周边的勃勃生机。
</td>
<td>
<h2>泛舟</h2>
泛舟赏一日之景，垂钓获一片金黄。
</td>
</tr>
</table>
<div class="jieshu">
<p>版权所有©山水之间</p>
</div>
</div>
</div>
</body>
</html>
2.利用CSS技术，结合链接和列表，设计并实现“茶韵”页面
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>茶韵</title>
<style type="text/css">
.bcd {
width: 800px;
}
.bc {
width: 800px;
height: 200px;
}
.b {
float: left;
width: 350px;
}
.c {
float: left;
margin-left: 10px;
}
.d {
float: right;
}
#nav {
width: 89px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
height: 30px;
line-height: 30px;
text-align: center;
}
ul li ol {
display: none;
width: 120px;
position: absolute;
top: 242px;
left: 600px;
}
ul li:hover ol {
display: block;
}
ul,
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul li:link {
font-size: 20px;
}
ul li:hover {
background-color: brown;
color: aquamarine;
}
ul li ol li a:link {
font-size: 15px;
text-decoration: none;
}
ul li ol li a:hover {
background-color: brown;
color: white;
}
.jieshu {
margin-top: 40px;
text-align: center;
background: url(img/footer-bg.jpg);
width: 900px;
}
</style>
</head>
<body>
<div class="bcd">
<div><img src="img/top-bg.jpg" /></div>
<div class="bc">
<div class="b">
<span>
闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一最色优美之亭，沏一壶好茶，知已们吟诗作赋，品品茶道。
又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯，蕴含着无穷的奥秘与无尽之美。
从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。
越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。
<a href="#">更多茶文化>></a>
</span>
</div>
<div class="c"><img src="img/main.jpg" /></div>
<div class="d">
<nav>
<div id="nav">
<ul>
<li>首页</li>
<li>
茶品
<ol>
<li><a href="#">乌龙茶</a></li>
<li><a href="#">普洱茶</a></li>
<li><a href="#">高山绿茶</a></li>
</ol>
</li>
<li>企业</li>
<li>联系</li>
<li>关于</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="jieshu">
<p>版权所有©茶韵</p>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/KO2131855283/article/details/143698661
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！