第8章 利用CSS制作导航菜单作业
1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>山水之间</title>
<link type="text/css" href="css/293-1.css" rel="stylesheet"/>
</head>
<body>
<nav>
<div class="div1">
<h1>山水之间</h1>
<div class="div2">
<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>
</div>
<img src="img/banner.jpg"/>
<p>山和水的融合，是静和动的搭配<br /><br />
单调与精彩的结合，也就组成了最美的风景<br /><br />
在青山间探索，在绿水间泛舟….
</p>
<h2>风光欣赏</h2>
</div>
<div id="d1">
<div id="d2">
<div id="pdiv1">
绿松
<div id="ppdiv1">这几棵松树向一边的枝桠,向下斜斜地伸着，像搭起一道绿色的天梯。
</div>
</div>
</div>
</div>
<div id="d3">
<div id="d4">
<div id="pdiv1">
瀑布
<div id="ppdiv1">流云奔涌,群山浮动,滚滚的云流翻山而过,直泻深谷,气势磅礴,宏伟壮观。</div>
</div>
</div>
</div>
<div id="d5">
<div id="d6">
<div id="pdiv1">
青山
<div id="ppdiv1">湖泊生活在山脚下,绿绿的青山环抱着她,清澈的湖水映出身边的生机勃勃。</div>
</div>
</div>
</div>
<div id="d7">
<div id="d8">
<div id="pdiv1">
泛舟
<div id="ppdiv1">泛舟一日景,垂钓一片湖。</div>
</div>
</div>
</div>
<p class="p">版权所有©山水之间</p>
</nav>
</body>
</html>
CSS代码如下：
.div1{
width: 1000px;
height: 200px;
background: url(../img/top.jpg) no-repeat;
}
.div2{
margin-top: -50px;
}
#d1{
width: 220px;
height: 180px;
margin-left: 20px;
margin-top: 180px;
background: url(../img/img-bg.png) no-repeat;
}
#d2{
width:200px;
height: 140px;
margin-left: 11px;
position: absolute;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url(../img/img1.jpg);
}
#d3{
width: 220px;
height: 180px;
margin-left: 270px;
margin-top: -180px;
background: url(../img/img-bg.png) no-repeat;
}
#d4{
width:200px;
height: 140px;
margin-left: 11px;
position: absolute;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url(../img/img2.jpg);
}
#d5{
width: 220px;
height: 180px;
margin-left: 520px;
margin-top: -180px;
background: url(../img/img-bg.png) no-repeat;
}
#d6{
width:200px;
height: 140px;
margin-left: 11px;
position: absolute;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url(../img/img3.jpg);
}
#d7{
width: 220px;
height: 180px;
margin-left: 770px;
margin-top: -180px;
background: url(../img/img-bg.png) no-repeat;
}
#d8{
width:200px;
height: 140px;
margin-left: 11px;
position: absolute;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url(../img/img4.jpg);
}
#pdiv1{
font-size: 25px;
color: #008000;
margin-top: 160px;
margin-left: -11px;
}
#ppdiv1{
color: #000000;
font-size: 19px;
}
.p{
font-family: heiti;
font-weight: bold;
color:#00ff00;
margin-top: 135px;
margin-left: 400px;
}
h1{
font-size: 50px;
font-style: italic;
padding-top: 15px;
padding-left: 15px;
}
li {
list-style-type: none;
float: right;
}
a{
text-decoration: none;
display: block;
margin: 0 8px;
right: 30px;
}
li a:hover{
background-image: url(../img/menu-bg.jpg);
}
img{
width: 1000px;
margin-top: 20px;
}
p{
font-size: 19px;
margin-top: -200px;
margin-left: 22px;
}
h2{
margin-top: 90px;
}2.利用CSS技术，结合链接和列表，设计并实现“茶韵”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>茶韵</title>
<link href="css/293-2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<img src="img/top-bg.jpg" width="800px"/>
<div class="left">
<p>
闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一景色优美之亭，沏一壶好茶
，知己们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒己见，聊聊彼此的胸怀壮志。
无不是人生一大乐事。一只小小的茶杯，蕴含着无穷的奥秘与无尽之美。
从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，
都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻据一口，在嘴间感受一下茶的沁香，仿佛沁透心间。
<a href="#" id="a">更多茶文化>></a>
</p>
</div>
<nav>
<div class="right">
<img src="img/main.jpg" width="200px"/>
<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>
</nav>
<div id="div">
版权所有茶韵©茶韵
</div>
</div>
</body>
</html>CSS代码如下：
.left{
width: 400px;
text-indent: 2em;
font-size: 15px;
}
#a{
font-style: italic;
}
.right{
margin-left: 420px;
margin-top: -175px;
}
#div{
width: 800px;
margin-top: 15px;
text-align: center;
font-weight: bold;
color: #006400;
background-image: url(../img/footer-bg.jpg);
background-repeat: no-repeat;
}
a{
text-decoration: none;
line-height: 35px;
}
ul,ol{
list-style-type: none;
margin-top: -150px;
margin-left: 250px;
}
ul li a:hover{
width: 40px;
display: block;
margin: 0;
background-image: url(../img/menu-bg.jpg);
}
ul li ol{
position: absolute;
display: none;
left: 350px;
top: 415px;
}
ul li:hover ol{
display: block;
}
ul li a:hover{
background-image: url(../img/menu-bg.jpg);
}
ul li ol li a:hover{
width: 80px;
display: block;
background-image: url(../img/menu-bg.jpg);
}