第8章利用CSS制作导航菜单

亚v2024-11-12 19:46

8.1 水平顶部导航栏

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航栏</h3>
		</center>
		<hr />
		<nav>
			<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>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.1 简单水平导航栏的设计与实现

8.1.1.1导航栏的创建

复制代码 
ul{
				list-style-type: none;
			}

8.1.1.2 列表样式的设计

复制代码 
li{
				float: left;
			}

8.1.1.3 超链接样式的设计

复制代码 
a{
				display: block;
				width: 80px;
				text-align: center;
				text-decoration: none;
			}

8.1.1.4 鼠标事件

复制代码 
a:link, a:visited{
				background-color: #ff0000;
				color: #ffffff;
			}
			a:hover, a:active{
				background-color: #ffffff;
				color: #ff0000;
			}

8.1.2 下拉子菜单导航栏的设计与实现

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.1导航栏的创建

8.1.2.2 列表样式的设计

html 复制代码 
ul, ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}

8.1.2.3 二级菜单的隐藏和显示设计

html 复制代码 
ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}

8.1.2.4 DIV样式的设计

html 复制代码 
a{
				display: block;
				width: 80px;
				padding:10px;
				text-align: center;
				text-decoration: none;
			}

8.1.2.5 超链接样式的设计

html 复制代码 
ul li a{
				background-color: #ff0000;
				color: #ffffff;
			}
			ul li ol li a{
				background-color: #ffffff;
				color: #000000;
			}

8.1.2.6 鼠标事件

html 复制代码 
ul li a:hover, ul li a:active{
				border-bottom: #22aaff solid 4px;
			}
			ul li ol li a:hover, ul li ol li a:active{
				border-bottom: none;
				background-color: bisque;
				color: brown;
			}

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

8.2.1.2 DIV样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
					<li><a href="#">运动器材</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.2.1.3 列表样式的设计

html 复制代码 
ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			ul li{
				border: #000000 solid 2px;
				text-align: center;
				line-height: 30px;

8.2.1.4 超链接样式的设计

html 复制代码 
a{
				display: block;
				border: #000000 solid 2px;
				text-align: center;
				line-height: 30px;
				background-color: #ddccdd;
				color: aliceblue;
				text-decoration: none;
			}
			a:hover, a:active{
				background-color: blueviolet;
				color: aliceblue;
			}
html 复制代码 
a{
				display: block;
				/* border: #000000 solid 2px; */
				box-sizing: border-box;
				text-align: center;
				line-height: 30px;
				background-color: #ddaaee;
				color: aliceblue;
				text-decoration: none;
			}
			a:hover, a:active{
				background-image: url("img/bg.JPG");
			}

8.2.2 出式子菜单导航栏的设计与实现

8.2.2.1 导航栏的创建

8.2.2.2 DIV样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #00cc33;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #dddddd;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.2.2.3 二级菜单的隐藏和显示设计

html 复制代码 
ul li{
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				left: 120px;
			}
			ul li ol a{
				display: block;
				width: 120px;
				background-color: #eeeeee;
				color: #00cc33;
			}
			ul li:hover ol{
				display: block;
			}

8.2.2.4 列表样式的设计

8.2.2.5 超链接样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #00cc33;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #dddddd;
			}
			ul li{
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
				/* list-style-type: none; */
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li a{
				/* text-decoration: none; */
				display: block;
				width: 150px;
				background-color: yellow;
				color: black;
			}
			ul li a:hover, ul li a:active{
				background-image: url("img/bg2.JPG");
			}
			ul li ol{
				display: none;
				position: absolute;
				top: -1px;
				left: 150px;
			}
			ul li:hover ol{
				display: block;
			}
			ul li ol a{
				display: block;
				width: 110px;
				background-color: #eeeeee;
				color: #00cc33;
				text-decoration: none;
			}
			ul li ol a:hover, ul li ol a:active{
				background-color: #eeeeff;
				color: #0000cc;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3 底部固定导航栏

8.3.1 导航栏的创建

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3.2 列表样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			a:link, a:visited{
				background-color: #000000;
				color: #ffffff;
			}
			a:hover, a:active{
				background-color: #ffffff;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3.3 菜单固定底部的设计

html 复制代码 
.fix-footer{
				position: fixed;
				bottom: 0%;
				left: 37%;
			}

8.3.4 超链接样式的设计

html 复制代码 
a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}

8.3.5 鼠标事件

html 复制代码 
a:link, a:visited{
				background-color: #000000;
				color: #ffffff;
			}
			a:hover, a:active{
				background-color: #ffffff;
				color: #000000;
			}

结果：

8.4 综合案例------优名养生馆

8.4.1 封面页的设计与实现

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url("img/bg.jpg");
				background-repeat: no-repeat;
				background-size: 100%;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				width: 25%;
				float: left;
				line-height: 50px;
			}
			img{
				margin-top: 70px;
				margin-right: 40px;
			}
			.footer{
				height: 50px;
				width: 100%;
				background-image: url("img/footer-bg0.jpg");
				border-top: 3px solid gray;
				text-align: center;
				z-index: 9998;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.footer-top{
				height: 90px;
				width: 90px;
				text-align: center;
				line-height: 90px;
				z-index: 9999;
				position: fixed;
				bottom: 0;
				left: 45%;
			}
			.footer-top a{
				border-radius: 90px;
			}
			.footer-top a:link, a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
				border-top: 3px solid gray;
				background-image: url("img/footer-top-bg1.jpg");
			}
			.footer-top a:hover{
				background-image: url("img/footer-top-bg2.jpg");
				color: white;
			}
			.footer a:link, a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
			}
			.footer a:hover{
				background-color: darkgray;
				border-left: 2px solid white;
				border-right: 2px solid white;
				font-size: 16px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<marquee direction="right" scrollamount="20">
				<img src="img/marquee1.jpg"/>
				<img src="img/marquee2.jpg"/>
				<img src="img/marquee3.jpg"/>
			</marquee>
		</div>
		<div class="footer-top">
			<a href="综合案例01.html">进入官网</a>
		</div>
		<div class="footer">
			<ul>
				<li><a href="#">奇幻世界</a></li>
				<li><a href="#">主题风采</a></li>
				<li><a href="#">加盟相关</a></li>
				<li><a href="#">友情推荐</a></li>
			</ul>
		</div>
	</body>
</html>

8.4.2 主页的设计与实现

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style>
			body{
				background-image: url("img/bg.jpg");
				background-repeat: no-repeat;
				background-size: 100%;
			}
			.all{
				margin: 0px auto;
				width: 1300px;
				/* height: 1000px; */
			}
			.top{
				width: 1300px;
				height: 300px;
				background-image: url("img/top-bg01.jpg");
				background-repeat: no-repeat;
				background-size: 100%;
			}
			.cent{
				width: 300px;
				margin-left: auto;
				margin-right: auto;
				font-size: 58px;
				font-family: "楷体";
				color: lemonchiffon;
				font-style: italic;
			}
			.nav{
				width: 400px;
				float: left;
				margin-top: 30px;
				font-size: 40px;
				font-weight: bold;
				color: saddlebrown;
			}
			.main{
				width: 800px;
				height: 300px;
				float: left;
				margin-top: 10px;
				/* font-size: 50px; */
			}
			.footer{
				font-size: 16px;
				font-weight: bold;
				color: brown;
				text-align: center;
				clear: both;
				background-image: url("img/footer-bg0.jpg");
			}
			p{
				color: brown;
				font-size: 20px;
			}
			img{
				margin: 15px;
			}
			ul{
				list-style-type: none;
			}
			li{
				height: 40px;
				font-size: 20px;
			}
			a:link{
				font-size: 30px;
				text-decoration: none;
				color: brown;
			}
			a:hover{
				background-color: burlywood;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="top">
			<br />
			<div class="cent">优名养生馆</div>
		</div>
		<nav>
			<div class="nav">
				<table>
					<tr>养生之道</tr>
					<tr>
						<ul>
							<li><a href="#">运动养生</a></li>
							<li><a href="#">四季养生</a></li>
							<li><a href="#">健康检测</a></li>
						</ul>
					</tr>
					<tr>中医养生</tr>
					<tr>
						<ul>
							<li><a href="#">经络养生</a></li>
							<li><a href="#">体质养生</a></li>
							<li><a href="#">特色疗法</a></li>
						</ul>
					</tr>
				</table>
			</div>
		</nav>
		<div class="main">
			<img src="img/main01.jpg" align="left" width="350px"/>
			<p>&emsp;&emsp;古人云:善养生者,上养神智、中养形态、下养筋骨。</p>
			<p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以
			调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期
			达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p>
			<p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人
			体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养
			生,注重身体机能的维护和康复:也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理
			层面的养生包括养颜、养体、养老:心理层面的养生包括养心、养性、养神。</p>
		</div>
		<hr />
		<div class="footer">版权所有&copy;优名养生馆</div>
		</div>
	</body>
</html>

相关推荐
Nan_Shu_61412 分钟前
学习： Threejs （2）
前端·javascript·学习
G_G#20 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签，处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
@大迁世界35 分钟前
TypeScript 的本质并非类型，而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路44 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug1 小时前
后端开发者视角的前端开发面试题清单（50道）
前端
Amumu121381 小时前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中1 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 小时前
GDAL 实现矢量合并
前端
hxjhnct1 小时前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子2 小时前
从入门到实践：前端 Monorepo 工程化实战（4）
前端
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定072025-04-03 Latex学习1——本地配置Latex + VScode环境08自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)09【踩坑笔记】50系显卡适配的 PyTorch 安装10Opencode CLI 安装成功,但是启动失败