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

标签：8.1 none 菜单 color 第八章 li ul background CSS

8.1 水平顶部导航栏

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

8.1.1.1导航栏的创建

8.1.1.2 列表样式的设计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
li{
				float: left;
			}
			ul{
				list-style-type: none;
			}
</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航栏</h3>
		</center>
		<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.3 超链接样式的设计

给a标签去掉下划线，并为其设置合适的距离，再将文本居中

        a{
				text-decoration: none;
				display: block; /*运用这个属性将a标签设置为块级元素 */
				width: 100px;
				padding: 10px;
				text-align: center;
			}

8.1.1.4 鼠标事件

给a标签点击前、点击后、鼠标悬停时以及鼠标点击时的那一刹那设置合适的样式，这里给它设置了背景颜色和文字颜色

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

下面是点击前和点击后的效果：

下面是鼠标悬停时和点击时的效果：

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

8.1.2.1导航栏的创建

8.1.2.2 列表样式的设计

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float:none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</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.3 二级菜单的隐藏和显示设计

/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				/* 为ul里的li里的ol设置不显示 */
				display: none;
			}
			ul li:hover ol{
				/* 设置鼠标放在li的时候显示ol */
				display:block;
			}

8.1.2.4 DIV样式的设计

a{
				/* 首先将它的下划线去掉 */
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}

8.1.2.5 超链接样式的设计

ul li a{
				background-color: #ff0000;
				color: #eeeeee;
			}
			ul li ol a{
				background-color: #eeeeee;
				color: #ff0000;
			}

8.1.2.6 鼠标事件

设置鼠标事件使鼠标悬停在一级导航栏时增加一条下划线，再为二级导航栏添加效果，使师表悬停再二级导航栏时，背景颜色和字体颜色进行改变，突出显示

            /* 8.1.2.6 鼠标事件 */
			ul li a:hover,ul li a:active{
				border-bottom: #aaccff solid 5px;
			}
			ul li ol li a:hover, li ol li a:active{
				border-bottom: none;
				background-color: #ff0000;
				color: #eeeeee;
			}

运行效果：

8.2 纵向侧边导航栏

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

8.2.1.1导航栏的创建

下面是侧边导航栏的创建，接下来将在下面代码的基础上进行改进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向导航栏制作</title>
</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.2 DIV样式的设计

首先，我们需要给div设置背景色以及宽度，再为标题设置居中并向下靠一点，这里我们使用了内边距来实现这一效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向导航栏制作</title>
		<style type="text/css">
			/* 8.2.1 简单纵向导航栏的设计与实现 */
			/* 8.2.1.1导航栏的创建 */
			/* 8.2.1.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align:center;
			}
</style>
	</head>

8.2.1.3 列表样式的设计

这里的作用主要是去掉列表样式点的效果，并将点占用的位置去掉

ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

8.2.1.4 超链接样式的设计

在这里我们为超链接a标签进行了简单设置，首先将a标签中的文本设置了居中，再将a标签的下划线去掉，再为a标签设置各种伪类标签

a{
				text-align: center;
				text-decoration: none;
				display: block;
				width: 150px;
				line-height: 30px;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #33cc00;
			}
			a:hover,a:active{
				background-color: #33cc00;
				color: #eeeeee;
			}

未设置伪类标签的运行效果：

设置了味蕾标签之后的效果：

这是将之前设置的点击时和鼠标悬停时的背景和字体颜色效果改为了放置背景图片

a:hover,a:active{
				/*background-color: #33cc00;
				color: #eeeeee;*/
				background-image: url(img/bg.JPG);
			}

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

8.2.2.1 导航栏的创建

这是子菜单的导航栏的设计和添加，下面我们将在这条代码的基础上进行改进

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			
		</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.2 DIV样式的设计

div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}

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

/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display:none;
			}
			ul li:hover ol{
				display:block;
			}

8.2.2.4 列表样式的设计

ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

8.2.2.5 超链接样式的设计

/* 8.2.2.5 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
				background-color: #eeeeee;
				color: #33cc00;
			}

下面这串代码的作用是为子菜单设置鼠标悬停时的效果，这里为一级菜单改变了鼠标悬停时的背景图片（由bg改为了bg2），并为二级标题添加了鼠标悬停时的背景颜色及字体颜色

ul li a:hover{
				background-image: url(img/bg2.JPG);
			}
			ul li ol li a:hover{
				background-color: #33cc00;
				color: #eeeeee;
				background-image: none;
			}

这是一级标题的改进效果：

二级标题的改进效果：

8.3 底部固定导航栏

8.3.1 导航栏的创建

8.3.2 列表样式的设计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏的制作</title>
		<style type="text/css">
			/* 8.3 底部固定导航栏 */
			/* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
		
		</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 菜单固定底部的设计

/* 8.3.3 菜单固定底部的设计 */
			.fix-footer{
				position: fixed;
				bottom: 0%;
			}

8.3.4 超链接样式的设计

/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}

8.3.5 鼠标事件

/* 8.3.5 鼠标事件 */
			a:link,a:visited{
				background-color: #0000ff;
				color: #ffff00;
			}
			a:hover,a:active{
				background-color: #ffff00;
				color: #0000ff;
			}

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

8.4.1 封面页的设计与实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(img/img/bg.jpg);
			}
			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/img/footer-bg.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/img/footer-top-bg1.jpg);
			}
			.footer-top a:hover{
				background-image: url(img/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/img/marquee1.jpg"/>
				<img src="img/img/marquee2.jpg"/>
				<img src="img/img/marquee3.jpg"/>
			</marquee>
		</div>
		<nav>
			<div class="footer-top">
				<a href="index.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>
		</nav>
	</body>
</html>

8.4.2 主页的设计与实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名堂养生馆</title>
		<style>
			body{
				background-image: url(img/img/bg.jpg);
			}
			.all{
				margin: 0px auto;
				width: 900px;
			}
			.top{
				width: 900px;
				height: 225px;
				background-image: url(img/img/top-bg.jpg);
			}
			.cent{
				width: 320px;
				margin-left: auto;
				margin-right: auto;
				font-size: 58px;
				font-family: "楷体";
				color: lemonchiffon;
				font-style: italic;
			}
			.nav{
				width: 200px;
				float: left;
				margin-top: 30px;
				font-size: 20px;
				font-weight: bold;
				color: saddlebrown;
			}
			.main{
				width: 700px;
				height: 300px;
				float: left;
				margin-top: 10px;
			}
			.footer{
				font-size: 14px;
				font-weight: bold;
				color: brown;
				text-align: center;
				clear: both;
				background-image: url(img/img/footer-bg.jpg);
			}
			p{
				color: brown;
				font-size: 16px;
			}
			img{
				margin: 15px;
			}
			ul{
				list-style: none;
			}
			li{
				height: 22px;
			}
			a:link{
				font-size: 16px;
				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/img/main.jpg" align="left"/>
			<p>&emsp;&emsp;古人云：善养生者，上养神智、中养形态、下养筋骨。</p >
			
			<p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。
			养生是以调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、
			药养、节欲、服气辟谷等多种方法，以期达到保养、调养、颐养生命，实现人类健康、长寿的目的。</p >
			
			<p>&emsp;&emsp;养生，是养护保养生命，以达长寿。养生是指有目的的通过各种
			手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心
			护养活动。既包括生理层面的养生，注重身体机能的维护和康复；也包括心理层面的养
			生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、莽神。</p >
		</div>
		<hr />
		<div class="footer">版本所有&copy;优名养生堂</div>
		</div>
	</body>
</html>

标签：8.1,none,菜单,color,第八章,li,ul,background,CSS
From： https://blog.csdn.net/2303_80888494/article/details/143397572

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

8.1 水平顶部导航栏

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

8.1.1.1导航栏的创建

8.1.1.2 列表样式的设计

8.1.1.3 超链接样式的设计

8.1.1.4 鼠标事件

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

8.1.2.1导航栏的创建

8.1.2.2 列表样式的设计

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

8.1.2.4 DIV样式的设计

8.1.2.5 超链接样式的设计

8.2 纵向侧边导航栏

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

8.2.1.1导航栏的创建

8.2.1.2 DIV样式的设计

8.2.1.3 列表样式的设计

8.2.1.4 超链接样式的设计

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

8.2.2.1 导航栏的创建

8.2.2.2 DIV样式的设计

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

8.2.2.4 列表样式的设计

8.2.2.5 超链接样式的设计

8.3 底部固定导航栏

8.3.1 导航栏的创建

8.3.2 列表样式的设计

8.3.3 菜单固定底部的设计

8.3.4 超链接样式的设计

8.3.5 鼠标事件

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

8.4.1 封面页的设计与实现

8.4.2 主页的设计与实现

相关文章

赞助商

阅读排行

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

8.1 水平顶部导航栏

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

8.1.1.1导航栏的创建

8.1.1.2 列表样式的设计

8.1.1.3 超链接样式的设计

8.1.1.4 鼠标事件

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

8.1.2.1导航栏的创建

8.1.2.2 列表样式的设计

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

8.1.2.4 DIV样式的设计

8.1.2.5 超链接样式的设计

8.2 纵向侧边导航栏

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

8.2.1.1导航栏的创建

8.2.1.2 DIV样式的设计

8.2.1.3 列表样式的设计

8.2.1.4 超链接样式的设计

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

8.2.2.1 导航栏的创建

8.2.2.2 DIV样式的设计

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

8.2.2.4 列表样式的设计

8.2.2.5 超链接样式的设计

8.3 底部固定导航栏

8.3.1 导航栏的创建

8.3.2 列表样式的设计

8.3.3 菜单固定底部的设计

8.3.4 超链接样式的设计

8.3.5 鼠标事件

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

8.4.1 封面页的设计与实现

8.4.2 主页的设计与实现

相关文章

赞助商

阅读排行

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