第八章作业-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86933352/article/details/143761237

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);
			}
			.title{
				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="title">山水之间</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>版权所有&copy;山水之间</p>
			</center>
		</div>
	</body>
</html>