习题1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>山水之间</title>
<style type="text/css">
.a{
background-image: url("img/top.jpg");
height: 100px;
}
.a p{
position: absolute;`
left:0;
top: -3%;
font-size: 54px;
font-family: "楷体";
}
.a ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 9%;
right: 0%;
}
.a ul li {
margin: 0 10px;
}
.a ul li a {
color: black;
text-decoration: none;
padding: 5px 10px;
}
.a ul li a:hover {
background-color: #000000;
color: white;
}
.b{
background-image: url("img/banner.jpg");
height: 150px;
background-size: cover;
}
.b p{
margin: 40px;
}
.c{
background-image: url("img/top.jpg");
height: 50px;
}
.d img{
width: 380px;
height: 225px;
margin: 20px;
}
.x{
font-size: 48px;
font-family: "楷体";
}
.y{
color: #A9A9A9;
text-align: center;
}
h1{
font-size: 48px;
font-family: "楷体";
}
td{
text-align: left;
font-size: 25PX;
}
</style>
</head>
<body>
<div class="a">
<p>山水之间</p>
<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="b">
<p>山和水的融合，是静和动的搭配<br/></p>
<p>单调与精彩的结合，也就组成了最美的风景<br/></p>
<p>在青山间探索,在绿水间泛舟......<br/></p>
</div>
<div class="c"></div>
<div class="d">
<h1>风光欣赏</h1>
<table>
<tr>
<th><img src="img/img1.jpg"/></th>
<th><img src="img/img2.jpg"/></th>
<th><img src="img/img3.jpg"/></th>
<th><img src="img/img4.jpg"/></th>
</tr>
<tr>
<td><span class="x">绿松</span><br/>
这几棵松树向阳一边的枝<br/>
桠，向下斜斜地伸着，像<br/>
搭起一道绿色的天梯。<br/>
</td>
<td><span class="x">瀑布</span><br/>
流云奔涌,群山浮动,滚滚的<br/>
云流翻山而过,直泻深谷,气<br/>
势磅碣,宏伟壮观。<br/>
</td>
<td><span class="x">青山</span><br/>
湖治生活在山脚下，绿绿<br/>
的青山环抱着她，清澈的<br/>
湖水映出身边的生机勃勃。<br/>
</td>
<td><span class="x">泛舟</span><br/>
泛舟一日景,垂钓一片湖<br/>
</td>
</tr>
</table>
</div>
<div class="y">版权所有©山水之间</div>
</body>
</html>
习题2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>茶韵</title>
<style type="text/css">
.a{
background-image: url("img/top-bg.jpg");
background-size: cover;
height:400px;
}
.b p{
float: left;
font-size: 24px;
}
.b img{
width: 350px;
height: 280px;
}
.b ul{
list-style-type: none;
font-size: 36px;
position: absolute;
right: 0;
top: 40%;
}
.b ul li {
position: relative;
color: #000000;
}
.b ul li a:hover{
background-color: #000000;
color: #ffffff;
}
.b ul li ol{
display: none;
position: absolute;
right: 100%;
top: 0;
background-color: #ffffff;
color: #000000;
font-size: 24px;
width: 100px;
}
.b ul li:hover ol{
display: inline-block;
}
.b ul li ol li a:hover{
background-color: #000000;
color: #ffffff;
}
.c{
background-image: url("img/footer-bg(2).jpg");
background-size: cover;
text-align: center;
height: 30px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b">
<p>
闲暇时刻，约上三五志同道合知已，去幽静深林处，<br/>
寻一景色优美之亭，沏一壶好茶，知已们吟诗作赋，品品茶道。<br/>
又或是下几微好棋，又或是各抒已见，即聊彼此的胸怀壮志。<br/>
无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无层之美。<br/>
从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，<br/>
茶杯在制作的每一个环节，都蕴着大学问。越是小茶杯越有品茶的韵味，<br/>
轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。更多茶文化>><br/>
</p>
<img src="img/main(2).jpg" align="center"/>
<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>
</div>
<div class="c">
<p>版权所有©茶韵</p>
</div>
</body>
</html>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 第八章习题
发表评论 取消回复