如何利用CSS制作导航菜单
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);
}
.biaoti{
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="biaoti">山水之间</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>运行结果如下所示
2.利用CSS技术，结合链接和列表，设计并实现“茶韵”页面
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>茶韵</title>
<style type="text/css">
.all{
width: 900px;
}
.top{
height: 200px;
margin: auto;
background: url(img/top-bg.jpg) no-repeat;
}
.wenzi{
text-indent: 2em;
line-height: 25px;
width: 380px;
float: left;
}
.wenzi a{
display: block;
font-size: 20px;
width:180px;
line-height: 40px;
text-align: center;
text-decoration: none;
float: right;
}
.nav{
float: right;
margin-right: 50px;
}
a{
text-decoration: none;
text-align: center;
display: block;
width: 100px;
line-height: 50px;
font-size: 20px;
color: black;
}
img{
margin-top: 20px;
margin-left: 20px;
float: left;
}
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li ol{
display: none;
position: absolute;
top: -1px;
right:100px;
}
ul li:hover ol{
display: block;
}
ul li{
position: relative;
}
ul li:hover,ul li:active{
color: black;
font-size: 25px;
font-weight: bold;
background-color: darkgray;
}
ul li a:hover,ul li a:active{
color: black;
font-size: 25px;
font-weight: bold;
background-color: darkgray;
}
.last{
background-image: url(img/footer-bg.jpg);
text-align: center;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="all">
<div class="top"></div>
<div class="wenzi">
<span>闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一最色优美之亭，沏一壶好茶，知已们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。</span>
<a href="#">更多茶文化>></a>
</div>
<img src="img/main.jpg"/>
<br />
<div class="nav">
<nav>
<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>
</nav>
</div>
<div class="last">版权所有©茶韵</div>
</div>
</body>
</html>运行结果如图所示
原文地址：https://blog.csdn.net/2301_80192878/article/details/143832915
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！