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