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

news2024/11/22 12:29:53

8.1 水平顶部导航栏

水平菜单导航栏是网站设计中应用范围最广的导航设计一般放置在页面的顶部。水平导航适用性强,几乎所有类型的网站都可以使用,设计难度较低。

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

8.1.1.1导航栏的创建

<nav>标签是HTML5新增的文档结构标签,用于标记导航栏,以便后续与网站的其他内容整合,所以常用<nav>标签在页面上创建导航栏菜单区域。

例如,在<nav>的首尾标签之间使用无序列表<ul>标签配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式,链接地址当前设置为空链接,用户可根据实际情况改成具体的URL地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第8章利用CSS制作导航菜单</title>
		<style type="text/css">
			/* 8.1.1.1导航栏的创建 */
			
		</style>
	</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.2 列表样式的设计

此时会带有<ul>元素的默认样式,即每一列表选项前面有实心点标记,可以利用CSS在<head>标签中进行声明,对列表样式进行改变。

使用 list-style-type 属性去掉默认标记,为了预防不同的浏览器会出现预设值,设置 margin 和 padding 属性为0,避免最终布局效果可能产生的误差,为了使列表效果在同一行显示,为<li>列表选项定义浮动效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第8章利用CSS制作导航菜单</title>
		<style type="text/css">
			/* 8.1.1.1导航栏的创建 */
			/* 8.1.1.2 列表样式的设计 */
			li{
				float: left;
			}
			ul{
				list-style-type: none;
			}
		</style>
	</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.3 超链接样式的设计

利用CSS为超链接重新设置样式,例如,对超链接的 a:link 和 a:visited 进行设置表示超链接未被访问和已访问状态然后将其 display 属性设置为 block ,使得超链接成为块级元素,这样才可以为超链接设置像素的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第8章利用CSS制作导航菜单</title>
		<style type="text/css">
			/* 8.1.1.1导航栏的创建 */
			/* 8.1.1.2 列表样式的设计 */
			li{
				float: left;
			}
			ul{
				list-style-type: none;
			}
			/* 8.1.1.3 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				padding: 10px;
				text-align: center;
			}
		</style>
	</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.4 鼠标事件

利用CSS为 a:hover 和 a:active 进行样式设置,表示鼠标悬停和活动链接状态时的样式变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第8章利用CSS制作导航菜单</title>
		<style type="text/css">
			/* 8.1.1.1导航栏的创建 */
			/* 8.1.1.2 列表样式的设计 */
			li{
				float: left;
			}
			ul{
				list-style-type: none;
			}
			/* 8.1.1.3 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				padding: 10px;
				text-align: center;
			}
			/* 8.1.1.4 鼠标事件 */
			a:link,a:visited{
				background-color: #ff0000;
				color: #ffffff;
			}
			a:hover,a:active{
				background-color: #ffffff;
				color: #ff0000;
			}
		</style>
	</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.2 下拉子菜单导航栏的设计与实现

下拉子菜单导航是网站设计中常见的子导航设计,一般适用于多级别,内容庞杂的网站。这种导航模式可以让整个网站设计更加整洁有序,现下大热的汉堡包导航也是采用这种隐藏式的导航设计。

8.1.2.1导航栏的创建

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
		</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.2 列表样式的设计

带有<ul>元素的实心点标记,及<ol>元素的阿拉伯序号,可以利用CSS在<head>标签中进行证明,对列表样式进行改变。同样,使用 list-style-tyle 属性去掉默认属性,设置 margin 和 padding 属性为0,为<li>列表选项定义浮动效果,设置 text-decoration 属性 none

<!--示例程序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;
			}
		</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 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来,需要设置 display 属性为 none为了鼠标悬停一级菜单时可以显示二级菜单,需要设置有序列表的 display 属性为 block。为了二级菜单能在从属的一级菜单正下方显示,需要设置二级菜单的绝对定位及一级菜单的相对定位。

<!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 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
		</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.4 DIV样式的设计

对内容所处的 div 样式进行设置,包括宽度,高度,边框和对齐方式。

<!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 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}
		</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.5 超链接样式的设计

利用CSS为列表超链接重新设置样式,例如对超链接的a:link 和 a:visited进行设置,表示超链接未被访问和已访问状态,然后将其 display 属性设置为 block ,使得超链接成为块级元素,这样才可以为超链接设置像素的宽度。

<!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 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}
			ul li a{
				background-color: #ff0000;
				color: #eeeeee;
			}
			ul li ol li a{
				background-color: #eeeeee;
				color: #ff0000;
			}
		</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.6 鼠标事件

利用CSS为无序列表选项 li:hover 和有序列表的 a:hover 进行样式设置,表示鼠标悬停状态时的样式变化。

<!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 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}
			ul li a{
				background-color: #ff0000;
				color: #eeeeee;
			}
			ul li ol li a{
				background-color: #eeeeee;
				color: #ff0000;
			}
			/* 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;
			}
		</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.2 纵向侧边导航栏

侧边菜单导航栏是网站设计中应用频率仅次于水平导航栏的导航设计,一般放置在首页的左上角,普遍使用文字链接作为导航项,可以容纳很多链接。
如果导航菜单太长会增加用户的浏览难度,因此,侧边导航栏通常会跟出式子导航结合使用,商城网站建设大多应用这种复合的导航设计。

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

8.2.1.1导航栏的创建

普通的纵向导航同样可以使用超链接和列表元素来实现,只需要将文字链接设置成块级元素。区别于水平导航栏,纵向导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围,结合无序列表<ul>标签和列表选项<li>标签创建菜单选项。这里的超链接地址暂时设置为空链接,用户可根据实际情况改成具体的URL地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<nav>
			<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>
		</nav>
	</body>
</html>

8.2.1.2 DIV样式的设计

对导航栏所处的div样式进行设置,包括宽度、边框和背景,同时对大标题文字的CSS进行设置,包括高度、行高、颜色和对齐方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style type="text/css">
            /* 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>
	<body>
		<nav>
			<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>
		</nav>
	</body>
</html>

 

8.2.1.3 列表样式的设计

列表选项还带有<ul>元素的默认实心圆点样式,需要使用list-style-type 属性去掉默认标记,设置margin 和padding的属性值。并同时给列表选项添加背景颜色,使大小标题容易区分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style type="text/css">
			/* 8.2.1.1导航栏的创建 */
			/* 8.2.1.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}
			/* 8.2.1.3 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.1.4 超链接样式的设计 */
			a{
				text-align: center;
				text-decoration: none;
				display: block;
				width: 150px;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<nav>
			<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>
		</nav>
	</body>
</html>

8.2.1.4 超链接样式的设计

利用CSS为超链接重新设置样式,对超链接的a:link 和a:visited进行设置,表示超链接未被访问和已访问状态。同时,利用CSS为a:hover 和a:active进行样式设置,表示鼠标悬停和活动链接状态时的样式变化。并且,将display属性设置为block,使得超链接成为块级元素,以及字体CSS样式的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style type="text/css">
			/* 8.2.1.1导航栏的创建 */
			/* 8.2.1.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}
			/* 8.2.1.3 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.1.4 超链接样式的设计 */
			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;
			}
		</style>
	</head>
	<body>
		<nav>
			<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>
		</nav>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style type="text/css">
			/* 8.2.1.1导航栏的创建 */
			/* 8.2.1.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}
			/* 8.2.1.3 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.1.4 超链接样式的设计 */
			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; */
				background-image: url(img/bg.JPG);
			}
		</style>
	</head>
	<body>
		<nav>
			<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>
		</nav>
	</body>
</html>

 

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

出式子菜单导航跟下拉子菜单导航一样,是网站设计中常见的子导航设计,只是出式子菜单多用于侧边纵向导航栏。这种子菜单适用于多级别、内容庞杂的网站,可以让整个网站设计更加整洁有序。

8.2.2.1 导航栏的创建

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

<!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宽度为150像素,边框为1像素的红色实线,背景颜色为淡绿色,“所有商品分类”大标题为16像素的白色字体,并相对 div居中对齐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.1 导航栏的创建 */
			/* 8.2.2.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}
		</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 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来,需要设置display属性为none
为了鼠标悬停一级菜单时可以显示二级菜单,需要设置有序列表的display 属性为 block
为了二级菜单能在从属的一级菜单正右方显示,需要设置二级菜单的绝对定位及一级菜单的相对定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.1 导航栏的创建 */
			/* 8.2.2.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
				
			}
			/* 8.2.2.4 列表样式的设计 */
			ul, ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
		</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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.1 导航栏的创建 */
			/* 8.2.2.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
				
			}
			/* 8.2.2.4 列表样式的设计 */
			ul, ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li{
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li:hover ol{
				display: block;
			}
		</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.4 列表样式的设计 

列表选项还带有<ul>元素的实心圆点样式,及<ol>元素的阿拉伯序号,需要使用 list-style-type 属性去掉默认标记,设置margin和padding的属性值。并同时给列表选项添加背景颜色,使大小标题容易区分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.1 导航栏的创建 */
			/* 8.2.2.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
				
			}
			/* 8.2.2.4 列表样式的设计 */
			ul, ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
		</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.5 超链接样式的设计

利用CSS 为超链接重新设置样式,对超链接的a:link 和a:visited进行设置,表示超链接未被访问和已访问状态。同时,利用CSS为a:hover 和a:active进行样式设置,表示鼠标悬停和活动链接状态时的样式变化。并且,将display 属性设置为block,使得超链接成为块级元素,以及字体CSS样式的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.1 导航栏的创建 */
			/* 8.2.2.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
				
			}
			/* 8.2.2.4 列表样式的设计 */
			ul, ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.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.5 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 30px;
				text-decoration: none;
				text-align: center;
				background-color: #eeeeee;
				color: #33cc00;
			}
		</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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.1 导航栏的创建 */
			/* 8.2.2.2 DIV样式的设计 */
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
				
			}
			/* 8.2.2.4 列表样式的设计 */
			ul, ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.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.5 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 30px;
				text-decoration: none;
				text-align: center;
				background-color: #eeeeee;
				color: #33cc00;
			}
			ul li a:hover{
				background-image: url(img/bg2.JPG);
			}
			ul li ol li a:hover{
				background-color: #33cc00;
				color: #eeeeee;
				background-image: none;
			}
		</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 底部固定导航栏

底部导航,顾名思义是放在页脚部位,是网站设计中一种辅助导航。底部导航应用性不是很广,比较常出现在一些活动或个性化的网站当中。并且,底部导航被广泛使用的并不是在PC端中,而是在移动端。如果在PC端中采用底部导航的形式,一般都是采用固定的方式。
底部导航可以减少用户的使用成本,但对于结构复杂有二级或三级导航的网站,就不是很合适。而且,用户浏览的习惯都是从上到下、从左往右的,将导航放置底部,这样的设计比较挑战用户的使用习惯。所以,很多网站在设计的时候首页导航会放在底部,其后的导航就会固定到顶部。

8.3.1 导航栏的创建

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏的制作</title>
		<style type="text/css">
			
		</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.2 列表样式

带有<ul>元素的默认实心点标记,可以利用list-style-type 属性去掉,同时设置margin 和 padding 属性。列表选项设置float属性,让列表元素能够在同一行显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏的制作</title>
		<style type="text/css">
			/* 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 菜单固定底部的设计

为了美化文字内容的外观,可以设置div的高度、宽度、背景、边框和文本对齐方式等。为了使导航菜单始终处于页面的最上层,需要设置z-index属性的优先值。为了使导航菜单固定于页面底部,需要设置位置属性position和各个方向的位置值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏的制作</title>
		<style type="text/css">
			/* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			/* 8.3.5 鼠标事件 */
			a:link, a:visited{
				background-color: #0000ff;
				color: #ffff00;
			}
			a:hover, a:active{
				background-color: #ffff00;
				color: #0000ff;
			}
			/* 8.3.3 菜单固定底部的设计 */
			.fix-footer{
				position: fixed;
				bottom: 0%;
			}
		</style>
	</head>
	<body>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<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.4 超链接样式的设计

利用CSS 为超链接重新设置样式,对超链接的a:link 和a:visited进行设置,表示超链接未被访问和已访问状态。然后将其display属性设置为block,使得超链接成为块级元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏的制作</title>
		<style type="text/css">
			/* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
		</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.5 鼠标事件

利用CSS为a:hover 和a:active进行样式设置,表示鼠标悬停和活动链接状态时的样式变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏的制作</title>
		<style type="text/css">
			/* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			/* 8.3.5 鼠标事件 */
			a:link, a:visited{
				background-color: #0000ff;
				color: #ffff00;
			}
			a:hover, a:active{
				background-color: #ffff00;
				color: #0000ff;
			}
			/* 8.3.3 菜单固定底部的设计 */
		</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.4 综合案例——优名养生馆

利用链接,列表,DIV,和CSS设计制作网页。

8.4.1 封面页的设计与实现

(1)封面页页面布局较简单,要求有正文和底部两块区域,用于放图片信息和底部导航信息,而底部导航又根据优先级分上层的圆球菜单和下层的水平菜单。

(2)利用超链接为底部区域先添加圆球导航,并设置相应的CSS样式。

(3)利用列表为底部区域后添加水平导航,并设置相应的CSS样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(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/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/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>
		<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 主页的设计与实现

主页页面布局要求有页头、正文和页脚三块区域。页头完成背景图片的添加和店名的输人;正文分左右两部分,分别完成侧边纵向导航和图文信息的添加;页脚完成版权信息。页头、正文和页脚三块区域均包含在div-all区域内。
(1)为页头区域添加背景图片,并加人嵌套的div,添加店名信息,最后设置相应的 CSS 样式。

(2)为正文区域左边添加纵向导航信息,并设置相应的CSS样式。

(3)为正文区域右边添加·图文信息,并设置相应的CSS样式。

(4)为页脚区域添加版权信息,并设置相应的CSS样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style>
			body{
				background-image: url(img/bg.JPG);
			}
			.all{
				margin: 0px auto;
				width: 900px;
			}
			.top{
				width: 900px;
				height: 225px;
				background-image: url(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/footer-bg.jpg);
			}
			p{
				color: brown;
				font-size: 16px;
			}
			img{
				margin: 15px;
			}
			ul{
				list-style-type: 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/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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2239571.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

labview拆解日期字符串

今天在写测试时&#xff0c;发现有些时候需要把日期和时间拆分开来&#xff0c;由于项目采集到的日期是一个数字字符串&#xff0c;需要把他们转换成带日期格式的字符串分别显示&#xff0c;这里还是用到了数组到电子表格字符串转换的函数。 下面示例如下&#xff0c;首先我们…

Kafka - 启用安全通信和认证机制_SSL + SASL

文章目录 官方资料概述制作kakfa证书1.1 openssl 生成CA1.2 生成server端秘钥对以及证书仓库1.3 CA 签名证书1.4 服务端秘钥库导入签名证书以及CA根证书1.5 生成服务端信任库并导入CA根数据1.6 生成客户端信任库并导入CA根证书 2 配置zookeeper SASL认证2.1 编写zk_server_jass…

Ubuntu22.04安装DataEase

看到DataEase的驾驶舱&#xff0c;感觉比PowerBI要好用一点&#xff0c;于是搭建起来玩玩。Dataease推荐的操作系统是Ubuntu22.04/Centos 7。 下载了Ubuntu22.04和DataEase 最新版本的离线安装包 一.安装ubuntu22.04 在安装的时候&#xff0c;没有顺手设置IP地址信息&#xff…

使用iviewui组件库的坑

背景 使用view-design组件库的Input组件的时候&#xff0c;按照产品的要求&#xff0c;输入框中只能键入正整数。 使用效果 如果直接使用组件的type属性&#xff0c;设置类型为number时&#xff0c;乍一看没啥问题&#xff0c;但是当我们键入 小数点(.) 或者 e/E 后面没有跟任…

AI绘图最强软件stable diffusion,一文带你迅速了解!

有需要stable diffusion整合包可以扫描下方&#xff0c;免费获取 01 — 什么是 SD ​ Stable Difusion(简称 SD) 其三种概念。 1.用来指代稳定扩散(Stable Diffusion) 技术,如 Midjourney是基于Stable Difusion技术实现的就是指它运用了 Stable Diffusion 的技术原理。 …

Unity3D实现视频和模型融合效果

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示如下👉二、VideoPlayer播放视频(一)👉2-1、Hieraechy面板右键创建videoPlayer👉2-2、Assets面板右键创建RenderTexture👉2-3、把设置好的RenderTexture拖到videoPlayer里面还有本地视频视频�…

stm32 ADC实例解析(3)-多通道采集互相干扰的问题

文章目录 一、问题现象&#xff1a;二、原因分析&#xff1a;1、测量值不准问题分析&#xff1a;2、采样干扰问题分析 三、解决办法&#xff1a;1、硬件&#xff1a;&#xff08;1&#xff09;、电源供电&#xff08;2&#xff09;、引脚电容&#xff08;3&#xff09;、减少采…

springboot 医院住院管理系统,计算机毕业设计项目源码035,计算机毕设程序(LW+开题报告、中期报告、任务书等全套方案)

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;医院当然也不例外。医院住院管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;采用J…

Redis集群模式之Redis Sentinel vs. Redis Cluster

在分布式系统环境中&#xff0c;Redis以其高性能、低延迟和丰富的数据结构而广受青睐。随着数据量的增长和访问需求的增加&#xff0c;单一Redis实例往往难以满足高可用性和扩展性的要求。为此&#xff0c;Redis提供了两种主要的集群模式&#xff1a;Redis Sentinel和Redis Clu…

谷歌浏览器的自动翻译功能如何开启

在当今全球化的网络环境中&#xff0c;能够流畅地浏览不同语言的网页是至关重要的。谷歌浏览器&#xff08;Google Chrome&#xff09;提供了一项强大的自动翻译功能&#xff0c;可以帮助用户轻松跨越语言障碍。本文将详细介绍如何开启和使用谷歌浏览器的自动翻译功能&#xff…

中文书籍对《人月神话》的引用(161-210本):微软的秘密

中文书籍对《人月神话》的引用&#xff08;第001到160本&#xff09;>> 《人月神话》于1975年出版&#xff0c;1995年出二十周年版。自出版以来&#xff0c;该书被大量的书籍和文章引用&#xff0c;直到现在热潮不退。 2023年&#xff0c;清华大学出版社推出《人月神话》…

Docker了解

Docker是一种容器化技术&#xff0c;它可以将应用程序和其依赖项打包到一个独立的、可移植的容器中&#xff0c;以便在不同的环境中运行。Docker基于Linux操作系统的容器化技术&#xff0c;可以提供更轻量、更快速、更灵活、更一致的应用部署和管理方式。 Docker的基本概念包括…

【LLM Agents体验 3】利用Open-WebUI+Ollama本地部署Qwen2.5:7B大模型的安装指南

Open WebUI是一种基于 Web 的用户界面&#xff0c;用于管理和操作各种本地和云端的人工智能模型。它提供了一个直观的图形化界面&#xff0c;使用户可以方便地加载、配置、运行和监控各种 AI 模型&#xff0c;而无需编写代码或使用命令行界面。 Open-WebUI 是一款功能强大且易于…

新Activity启动时Task的位置(分屏场景)

目录 场景 场景 当类似上面的Task状态&#xff0c;我们自定义的三个按钮&#xff0c;启动新的Activity的时候&#xff0c;并没有去设置需要launche的task。 Intent intent new Intent();intent.setComponent(new ComponentName("com.android.dialer","com.and…

GitLab基于Drone搭建持续集成(CI/CD)

本文介绍了如何为 Gitee 安装 Drone 服务器。服务器打包为在 DockerHub 上分发的最小 Docker 映像。 1. 准备工作 创建OAuth应用 创建 GitLab OAuth 应用。Consumer Key 和 Consumer Secret 用于授权访问极狐GitLab 资源。 ps:授权回调 URL 必须与以下格式和路径匹配&…

检测敏感词功能

今天策划给我一个任务 —— 检测昵称中是否含有敏感词功能&#xff0c;然后丢给我两个压缩包&#xff0c;我解压一看&#xff1a; 有的txt文件是一行一个词&#xff1a; 有的txt文件是按逗号分隔开&#xff1a; 不管是什么格式的总之量非常多&#xff0c;把我这辈子脏话都囊括…

【OpenGL】OpenGL简介

文章目录 OpenGL概述OpenGL的本质OpenGL相关库核心库窗口管理glutfreeglutglfw 函数加载glewGLAD OpenGL概述 OpenGL(Open Graphics Library) 严格来说&#xff0c;本身并不是一个API&#xff0c;它是一个由Khronos组织制定并维护的规范(Specification)。OpenGL规范严格规定了…

python-24-一篇文章彻底掌握Python HTTP库Requests

python-24-一篇文章彻底掌握Python HTTP库Requests 一.简介 在 Python 中&#xff0c;Requests 是一个非常流行且易于使用的 Python HTTP 库&#xff0c;专门用于发送 HTTP/HTTPS 请求&#xff0c;获取请求响应&#xff1b; 可能觉得HTTP请求不是应该前端去做么&#xff1f;…

SpringMVC案例学习(一)--计算器设计登录页面设计

文章目录 1.计算器1.1.html代码1.2接口设计1.3前端测试1.4接口测试 2.登录页面设计2.1接口实现2.2查看前端页面效果2.3未进行前后端交互时候的代码2.4前后端交互设计2.5个人实践遇到的问题 3.lombok介绍3.1插件安装3.2导入依赖 1.计算器 1.1.html代码 下面的这个就是我们的前…

【Linux 麒麟系统 qt 程序通过root启动 桌面程序】

通过.desktop pkexec 启动程序 关键字方案一方案二第一步 修改.desktop第二步 xxx.sh实现 注意 关键字 pkexec .desktop qt 原始需求&#xff1a; 用户在麒麟系统上通过快捷方式(.desktop)启动程序后绑定系统的26端口&#xff0c;但是因为系统权限问题&#xff0c;26端口普通…