如何利用CSS制作导航菜单

1.利用CSS技术,结合链接和列表,设计并实现"山水之间"页面

示例代码

html 复制代码
<!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>版权所有&copy;山水之间</p>
			</center>
		</div>
	</body>
</html>

运行结果如下所示

2.利用CSS技术,结合链接和列表,设计并实现"茶韵"页面

示例代码如下

html 复制代码
<!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">版权所有&copy;茶韵</div>
		</div>
	</body>
</html>

运行结果如图所示

相关推荐
IT_陈寒26 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript