1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面。
参考代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>山水之间</title><style>.all{width:900px;}.top{width:900px;height: 100px;background-image: url(img/top.jpg);}.biaoti{line-height: 100px;font-size: 60px;font-family: "楷体";font-style: italic;float: left;}.middle{background-image: url(img/banner.jpg);height: 200px;margin-top: 10px;padding-left: 30px;}ul{list-style-type: none;}li{width: 80px;float:right;margin-top: 60px;}a{display: block;font-size: 20px;text-align: center;line-height: 40px;text-decoration: none;color: black;}a:hover{background-color: #aaaacc;color: white;}td{width: 80px;padding-right: 25px;}img{border:7px solid #aaaacc;}p{font-size: 20px;}</style></head><body><div class="all"><div class="top"><div class="biaoti">山水之间</div><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="middle"><p>山和水的融合，是静和动的搭配</p><p>单调与精彩的结合，也就组成了最美的风景</p><p>在青山间探索，在绿水间泛舟......</p></div><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><p>绿松</p>这几颗松树向阳一边的枝桠，向下斜斜地伸着，像搭起一道绿色的天梯</td><td><p>瀑布</p>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td><td><p>青山</p>湖泊生活在山脚下，绿线的青山环抱着她，清澈的湖水映出身边的生机勃勃。</td><td><p>泛舟</p>泛舟一日景，垂钓一片金</td></tr></table><center><br /><br /><p>版权所有©山水之间</p></center></div></body>
</html>页面效果：
1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面。
参考代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>茶韵</title><style type="text/css">.all{width: 900px;}.top{height: 200px;margin: auto;background: url(img/top-bg.jpg) no-repeat;}.wenzi{text-indent: 2em;line-height: 25px;width: 380px;float: left;}.wenzi a{display: block;font-size: 20px;width:180px;line-height: 40px;text-align: center;text-decoration: none;float: right;}.nav{float: right;margin-right: 50px;}a{text-decoration: none;text-align: center;display: block;width: 100px;line-height: 50px;font-size: 20px;color: black;}img{margin-top: 20px;margin-left: 20px;float: left;}ul,ol{list-style-type: none;margin: 0;padding: 0;}ul li ol{display: none;position: absolute;top: -1px;right:100px;}ul li:hover ol{display: block;}ul li{position: relative;}ul li:hover,ul li:active{color: black;font-size: 25px;font-weight: bold;background-color: darkgray;}ul li a:hover,ul li a:active{color: black;font-size: 25px;font-weight: bold;background-color: darkgray;}.last{background-image: url(img/footer-bg.jpg);text-align: center;margin-top: 300px;}</style></head><body><div class="all"><div class="top"></div><div class="wenzi"><span>闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一最色优美之亭，沏一壶好茶，知已们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。</span><a href="#">更多茶文化>></a></div><img src="img/main.jpg"/><br /><div class="nav"><nav><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></nav></div><div class="last">版权所有©茶韵</div></div></body>
</html>