标签：img top 第八章 height width background 习题 font
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>版权所有©山水之间</p>
</center>
</div>
</body>
</html>
标签：img,
top,
第八章,
height,
width,
background,
习题,
font
From： https://blog.csdn.net/2401_87165094/article/details/143478528