第8章 利用CSS制作导航菜单
1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>山水之间</title><link type="text/css" href="css/293-1.css" rel="stylesheet"/></head><body><nav><div class="div1"><h1>山水之间</h1><div class="div2"><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></div><img src="img/banner.jpg"/><p>山和水的融合，是静和动的搭配<br /><br />单调与精彩的结合，也就组成了最美的风景<br /><br />在青山间探索，在绿水间泛舟….</p><h2>风光欣赏</h2></div><div id="d1"><div id="d2"><div id="pdiv1">绿松<div id="ppdiv1">这几棵松树向一边的枝桠,向下斜斜地伸着，像搭起一道绿色的天梯。</div></div></div></div><div id="d3"><div id="d4"><div id="pdiv1">瀑布<div id="ppdiv1">流云奔涌,群山浮动,滚滚的云流翻山而过,直泻深谷,气势磅礴,宏伟壮观。</div></div></div></div><div id="d5"><div id="d6"><div id="pdiv1">青山<div id="ppdiv1">湖泊生活在山脚下,绿绿的青山环抱着她,清澈的湖水映出身边的生机勃勃。</div></div></div></div><div id="d7"><div id="d8"><div id="pdiv1">泛舟<div id="ppdiv1">泛舟一日景,垂钓一片湖。</div></div></div> </div><p class="p">版权所有©山水之间</p></nav></body>
</html>
CSS代码如下：
.div1{width: 1000px;height: 200px;background: url(../img/top.jpg) no-repeat;}.div2{margin-top: -50px;}#d1{width: 220px;height: 180px;margin-left: 20px;margin-top: 180px;background: url(../img/img-bg.png) no-repeat;}#d2{width:200px;height: 140px;margin-left: 11px;position: absolute;margin-top: 10px;background-repeat: no-repeat;background-image: url(../img/img1.jpg);}#d3{width: 220px;height: 180px;margin-left: 270px;margin-top: -180px;background: url(../img/img-bg.png) no-repeat;}#d4{width:200px;height: 140px;margin-left: 11px;position: absolute;margin-top: 10px;background-repeat: no-repeat;background-image: url(../img/img2.jpg);}#d5{width: 220px;height: 180px;margin-left: 520px;margin-top: -180px;background: url(../img/img-bg.png) no-repeat;}#d6{width:200px;height: 140px;margin-left: 11px;position: absolute;margin-top: 10px;background-repeat: no-repeat;background-image: url(../img/img3.jpg);}#d7{width: 220px;height: 180px;margin-left: 770px;margin-top: -180px;background: url(../img/img-bg.png) no-repeat;}#d8{width:200px;height: 140px;margin-left: 11px;position: absolute;margin-top: 10px;background-repeat: no-repeat;background-image: url(../img/img4.jpg);}#pdiv1{font-size: 25px;color: #008000;margin-top: 160px;margin-left: -11px;}#ppdiv1{color: #000000;font-size: 19px;}.p{font-family: heiti;font-weight: bold;color:#00ff00;margin-top: 135px;margin-left: 400px;}h1{font-size: 50px;font-style: italic;padding-top: 15px;padding-left: 15px;}li {list-style-type: none;float: right;}a{text-decoration: none;display: block;margin: 0 8px;right: 30px;}li a:hover{background-image: url(../img/menu-bg.jpg);}img{width: 1000px;margin-top: 20px;}p{font-size: 19px;margin-top: -200px;margin-left: 22px;}h2{margin-top: 90px;}2.利用CSS技术，结合链接和列表，设计并实现“茶韵”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>茶韵</title><link href="css/copy2.css" rel="stylesheet" type="text/css"/></head><body><div class="bg"><img src="img/top-bg.jpg"/><br /><br /><div class="text">闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一景色优美之亭，沏一壶好茶，知己们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒己见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。 <a href="#">更多茶文化>></a></div><div class="bg2"><img src="img/main.jpg"/><ul><li><a>首页</a></li><li><a>茶品</a><ol><li><a>乌龙茶</a></li><li><a>普洱茶</a></li><li><a>山高绿茶</a></li></ol></li><li><a>企业</a></li><li><a>联系</a></li><li><a>关于</a></li></ul></div><div class="h">版权所有©茶韵</div></div></body>
</html>CSS代码如下：
.bg{width: 900px;}.text{text-indent: 2em;width: 420px;float: left;}.left a{font-style: italic;text-decoration: none;}.bg2{width: 420px;float: right;display: flex;align-items: flex-start; gap: 60px;}.h{width: 900px;position: absolute;bottom: 330px;text-align: center; background-color: #ffff00;}ul{margin-top: -1px;float:right;margin-left: -1px;}ul li{list-style-type: none;position: relative;}ul li ol {display: none;position: absolute;list-style-type: none;top: -1px;left: -100px;}ul li a{text-align: center;margin-top: 0;line-height: 40px;width: 60px;display: block;}ul li ol li a{font-size: 13px;font-weight: bold;}ul li:hover ol{display: block;}ul li a:hover{font-weight: bolder;background-color: #acacac;}ul li ol li a:hover{background-color: #0b6eff;}