第八章作业

htmledit_views">

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

html"><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>山水之间</title><style type="text/html" title=css>css">.all{margin-left: 20px;width: 1000px;}.one{margin-top: 15px;background: url(img/top.jpg);height: 100px;width: 1000px;}ul{list-style-type: none;}li{float: right;}a{display: block;margin-top: -42px;padding: 10px;width: 35px;text-decoration: none;color: black;}a:hover,a:active{background-color: #ffffff;}h1{vertical-align: middle;display: inline-block;font-style: italic;}.two{background: url(img/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;}.four{width: 1000px;}.bottom{text-align: center;margin-top: 15px;color: #838b83;}</style></head><body><div class="all"><div class="one">&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="four"><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><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>

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

html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>茶韵</title><style type="text/html" title=css>css">.all{width: 900px;}.two{width: 380px;float: left;margin-left: 30px;}.two a{text-decoration: none;color: black;}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: #838b83;font-weight:bolder;}ul li:hover ol{display: block;}.one{float: right;margin-top: -190px;margin-right: 40px;}.three,.two{margin-top: 20px;}.two a{float: right;margin-right: 30px;}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(img/footer-bg.jpg);text-align: center;margin-left: 30px;}</style></head><body><div class="all"><img src="img/top-bg.jpg"/><div class="two">&emsp;&emsp;闲暇时刻，约上三五志同道合知己，去幽静深林寻一景色优美之亭，沏一壶好茶，知已们吟诗作处，赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、轴药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。<a href="#">更多茶文化>></a></div><div class="three"><img src="img/main.jpg"/><br /></div><nav><div class="one"><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>