科技资讯

Document

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

8.1 水平顶部导航栏

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

8.1.1.1导航栏的创建

1.创建标题栏

2使用<nav>标签创建导航菜单栏区域

3.使用无序列表<ul>和列表选项<li>创建菜单选项

4.将其内容设置为超链接的形式

代码展示

<body>
		<center>
			<h3>简单水平菜单导航栏</h3>
		</center>
		<hr />
		<!-- <nav>用于标记导航栏 -->
		<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>

图片展示

8.1.1.2 列表样式的设计

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>
		<hr />
		<!-- <nav>用于标记导航栏 -->
		<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 超链接样式的设计

1.设置为块级元素（重要）

2.设置各种样式

代码展示：

            /* 对链接样式的设定 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				padding: 10px;
				text-align: center;
			}

图片展示

8.1.1.4 鼠标事件

1.使用伪类标签

2.对鼠标点击的效果进行设置

代码展示

            /* 鼠标事件 */
			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导航栏的创建

1.创建标题栏

2使用<nav>标签创建导航菜单栏区域

3.使用无序列表<ul>和列表选项<li>创建菜单选项

4.将其内容设置为超链接的形式

代码展示

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

图片展示

8.1.2.2 列表样式的设计

1.给标签添加浮动

2.对溢出的效果设置none（没有效果）

3.对无序列表设置样式

代码展示

            /* 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 二级菜单的隐藏和显示设计

1.对子列表设置为隐藏元素

2.对列表设置伪类选择器对其子列表的效果

代码展示

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

图片展示

8.1.2.4 DIV样式的设计

1.设置无序列表中各个a标签的样式

代码展示

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

图片展示

8.1.2.5 超链接样式的设计

1.设置超链接的样式

代码展示

			a{
				text-decoration: none;
				display: block;
				width: 100px;
				padding: 10px;
				text-align: center;
			}

图片展示

8.1.2.6 鼠标事件

1.设置鼠标点击的事件设置各种的样式

代码展示

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

图片展示

8.2 纵向侧边导航栏

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

8.2.1.1导航栏的创建

1.创建标题栏

2.使用无序列表<ul>和列表选项<li>创建菜单选项

3.将其内容设置为超链接的形式

代码展示

	<body>
		<div id="nav">
			<h3>所有商品分类</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>
	</body>

图片展示

8.2.1.2 DIV样式的设计

1.对div样式进行设计

2.对标题文字设置样式

代码展示

		<style>
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}
		</style>

图片展示

8.2.1.3 列表样式的设计

1.对无序列表设置样式

2.设置a标签样式

代码展示

			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-align: center;
				display: block;
				text-decoration: none;
				width: 150px;
				line-height: 30px;
			}

图片展示

8.2.1.4 超链接样式的设计

1.设置超链接的各种访问样式

代码展示

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

图片展示

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

8.2.2.1 导航栏的创建

1.在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<0l>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

代码展示

<!--示例程序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样式的设计

1.设定div样式

2.设置标题样式

代码展示

			div{
				background-color: #33cc00;
				width: 150px;
				margin: 0;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}

图片展示

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

1.设定父元素为相对定位

2.设定子元素为父元素的绝对定位，并设置元素为隐藏，再设置各种样式

3.设置父类元素伪类选择器时展示出来

代码展示

			ul li{
				/* 相对定位 */
				position: relative;
			}
			ul li ol{
				display: none;
				/* 绝对定位 */
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li:hover ol{
				display: block;
			}

图片展示

8.2.2.4 列表样式的设计

1.设置列表样式

代码展示

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

代码展示

8.2.2.5 超链接样式的设计

1.设置超链接样式

代码展示

			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 列表样式的设计

8.3.3 菜单固定底部的设计

8.3.4 超链接样式的设计

8.3.5 鼠标事件

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

8.4.1 封面页的设计与实现

8.4.2 主页的设计与实现