1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。
代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>山水之间</title><style>h1{font-style: italic;padding-left: 10px;float: left;}a{text-decoration: none;display: block;width: 50px;padding: 8px;float: right;text-align: center;}ul{list-style-type: none;margin: 0;padding-top: 60px;}a:link,a:visited{color: #000000;}a:hover,a:active{background-color: #ffffff;color: #ff0000;}table{width: 100%;height: 150px;padding: 0;margin: 0;border-collapse: separate;border-spacing: 100px;}.top{background-image: url(img/top.jpg);width: 100%;height: 100px;}.banner{background-image: url(img/banner.jpg);width: 100%;height: 180px;padding-left: 30px;padding-top: 10px;margin-top: 10px;}.main{width: 100%;height: 550px;}.img{float: left;padding: 50px;margin-left: 60px;}.wen{display: block;width: 188px;height: 138px;float: left;margin-top: -40px;padding-left: 50px;padding-right: 50px;margin-left: 60px;}.bottom{width: 100%;text-align: center;}</style></head><body><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="banner">山与水的融合,是静和动的搭配<br /><br />单调与精彩的结合,也就组成了最美的风景<br /><br />在青山间探索,在绿水间泛舟......</div><div class="main"><h2>风光欣赏</h2><div class="img"><img src="img/img1.jpg"/></div><div class="img"><img src="img/img2.jpg"/></div><div class="img"><img src="img/img3.jpg"/></div><div class="img"><img src="img/img4.jpg"/></div><div class="wen"><h3>绿松</h3>这几颗松树向阳一边的枝芽,向下斜斜地伸着,向搭起一道绿色的天梯。</div><div class="wen"><h3>瀑布</h3>流云奔涌,群山浮动、滚滚的云流翻山而过,直泻深谷,气势磅礴,宏伟壮观。</div><div class="wen"><h3>青山</h3>湖泊生活在山脚下,绿绿的青山环抱着她,清敞的湖水映出身边的生机勃勃。</div><div class="wen"><h3>泛舟</h3>泛舟一日景,垂钓一片湖。</div></div><div class="bottom">版权所有©山水之间</div></body>
</html>
运行结果如下: