第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>

相关推荐
还是大剑师兰特34 分钟前
D3的竞品有哪些，D3的优势，D3和echarts的对比
前端·javascript·echarts
王解34 分钟前
【深度解析】CSS工程化全攻略（1）
前端·css
一只小白菜~41 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览，而是下载文件？
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建（module）
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model（详细图文注释）
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08文件或文件夹名称中有空格如何批量去除09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能