Document

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

2024-11-13
dfer
14
css 前端 CSDN

8.1 水平顶部导航栏

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

简单水平导航栏是网页设计中非常常见的元素，它通常位于页面的顶部，并提供主要的网站导航选项。下面我们将详细讲解如何创建一个基本的水平导航栏，包括HTML结构、CSS样式以及鼠标事件处理。

1 导航栏的创建
首先，我们需要使用HTML来定义导航栏的基本结构。通常我们会用<nav>标签包裹整个导航区域，然后在其中放置一个无序列表<ul>，每个列表项<li>包含一个链接<a>指向不同的页面或部分。

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

这里我们使用了语义化的HTML5标签`<nav>`来明确表示这是一个导航区。这样不仅对搜索引擎友好，也便于屏幕阅读器等辅助技术理解页面结构。

2 列表样式的设计

接下来，我们要移除默认的列表样式（如点状符号），并使列表项水平排列。这可以通过CSS完成：

nav ul {
  list-style: none; /* 移除默认的列表标记 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
  background-color: #333; /* 设置背景颜色 */
  overflow: hidden; /* 清除浮动 */
}
 
nav li {
  float: left; /* 让列表项水平排列 */
}

通过设置float: left;属性，我们可以让<li>元素从垂直堆叠变为水平排列。同时，为<ul>添加了背景色，以增加视觉上的区分度。

3 超链接样式的设计
为了让导航链接看起来更像按钮而不是普通的文本链接，我们需要进一步定制它们的样式。这包括去除下划线、设定字体大小和颜色等。

nav a {
  display: block; /* 将链接转换为块级元素，以便应用宽度和高度 */
  color: white; /* 文字颜色 */
  text-align: center; /* 水平居中文本 */
  padding: 14px 16px; /* 内填充，给链接添加一些空间 */
  text-decoration: none; /* 去除下划线 */
}

这里将<a>元素设置为block显示类型，使得它可以拥有宽度和高度，并且用户点击时更容易命中目标。同时，通过设置内填充，可以确保链接之间有一定的间距，提高可用性。

4 鼠标事件
最后，为了增强用户体验，我们还可以添加一些交互效果，比如当用户将鼠标悬停在某个链接上时改变其背景色或文字颜色。这可以通过CSS中的:hover伪类轻松实现：

nav a:hover {
  background-color: #111; /* 鼠标悬停时的背景色 */
  color: #f1f1f1; /* 鼠标悬停时的文字颜色 */
}

此外，如果想要突出当前所在页面的链接，可以为其添加一个特殊的“active”类，并定义相应的样式规则：

nav .active {
  background-color: #4CAF50; /* 当前选中链接的背景色 */
}

然后在HTML中为当前页面对应的链接添加这个类名：

<li><a href="#home" class="active">首页</a></li>

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			width: 600px;
			margin: 0 auto;
			list-style-type: none;
		}
		li {
			float: left;
		}
		a:link,a:visited {
			display: block;
			width: 80px;
			font-weight: 700;
			background-color: greenyellow;
			color: red;
			padding: 10px;
			text-align: center;
			text-decoration: none;
		}
		a:hover,a:active {
			background-color: darkblue;
			color: white;
		}
		
		
		
		</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.2 下拉子菜单导航栏的设计与实现

在水平顶部导航栏的基础上添加下拉子菜单，可以为用户提供更多层次的导航选项，从而改善用户体验。下面将详细介绍如何设计和实现一个带有下拉子菜单的水平顶部导航栏。

1导航栏的创建
首先，我们需要扩展基本的HTML结构来支持下拉菜单。这通常意味着在某些列表项<li>中嵌套额外的无序列表<ul>，以表示子菜单项。

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li class="dropdown">
      <a href="#">服务</a>
      <ul class="submenu">
        <li><a href="#web_design">网页设计</a></li>
        <li><a href="#app_development">应用开发</a></li>
        <li><a href="#seo_optimization">SEO优化</a></li>
      </ul>
    </li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

这里，我们给包含子菜单的<li>元素添加了class="dropdown"，以便通过CSS选择器进行样式定制。同时，子菜单本身被包裹在一个具有class="submenu"的<ul>标签内。

2 列表样式的设计
接下来，我们需要调整CSS样式，使主菜单项保持水平排列，并确保子菜单垂直显示在其父级下方。

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  overflow: hidden;
}
 
nav li {
  float: left;
  position: relative; /* 为了绝对定位子菜单 */
}
 
.dropdown .submenu {
  display: none; /* 默认隐藏子菜单 */
  position: absolute; /* 子菜单相对于其直接父元素定位 */
  top: 100%; /* 子菜单从父菜单底部开始 */
  left: 0; /* 与父菜单左对齐 */
  background-color: #444; /* 子菜单背景色 */
  min-width: 160px; /* 子菜单最小宽度 */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 添加阴影效果 */
}

这里的关键点是设置.submenu的display属性为none，以默认情况下隐藏它；并且使用position: absolute结合top和left属性，让子菜单出现在正确的相对位置上。

3 二级菜单的隐藏和显示设计
为了让子菜单能够响应用户的鼠标悬停事件而显示出来，我们可以利用:hover伪类：

.dropdown:hover .submenu {
  display: block; /* 鼠标悬停时显示子菜单 */
}

这样当用户将鼠标悬停在“服务”这类有下拉菜单的链接上时，子菜单就会自动出现。如果需要更复杂的交互逻辑（如点击展开），则可能需要用到JavaScript。

4 DIV样式的设计
虽然在这个例子中没有特别用到额外的<div>元素来包装子菜单，但在某些复杂场景下，你可能会想要这样做，比如为了添加过渡动画或处理更复杂的布局。在这种情况下，你可以按照以下方式修改HTML结构并相应地更新CSS：

<li class="dropdown">
  <a href="#">服务</a>
  <div class="submenu-wrapper">
    <ul class="submenu">
      <!-- 子菜单项 -->
    </ul>
  </div>
</li>

相应的CSS规则可以用来控制这个新的<div>元素的行为，例如添加过渡效果：

.submenu-wrapper {
  position: absolute;
  transition: opacity 0.2s ease-in-out;
  opacity: 0; /* 初始状态下不透明度为0 */
  pointer-events: none; /* 禁止初始状态下的鼠标事件 */
}
 
.dropdown:hover .submenu-wrapper {
  opacity: 1; /* 显示时完全不透明 */
  pointer-events: auto; /* 允许鼠标事件 */
}

5 超链接样式的设计

对于子菜单中的链接，我们同样需要设定合适的样式，以确保它们在视觉上与其他内容区分开来。

.submenu a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 12px 16px;
}
 
.submenu a:hover {
  background-color: #555; /* 悬停时改变背景色 */
}

这些样式保证了子菜单链接的一致性，同时也提供了清晰的反馈机制，帮助用户识别可点击区域。

6 鼠标事件
除了之前提到的:hover伪类外，还可以考虑其他类型的交互行为，比如通过点击而非悬停来触发子菜单的显示/隐藏。这种情况下，你需要编写一些JavaScript代码来管理DOM的变化。例如，可以监听每个.dropdown元素上的点击事件，然后切换其子菜单的状态。

document.querySelectorAll('.dropdown').forEach(function(dropdown) {
  dropdown.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    this.querySelector('.submenu').classList.toggle('show');
  });
});

此外，别忘了在CSS中定义.show类，用于控制子菜单是否可见。

.show {
  display: block !important; /* 强制显示 */
}

综合案例

 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>下拉子导航栏的制作</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
		}
		ul li {
			float: left;
			position: relative;
		}
		ul li ol li {
			float: none;
		}
		ul li ol {
			background-color: lightcyan;
			position: absolute;
			top: 40px;
			left: 0;
			display: none;
		}
		ul li:hover ol {
			display: block;
		}
		#nav {
			width: 600px;
			height: 40px;
			background-color: lightcyan;
			border: 5px solid blue;
			margin: 0 auto;
		}
		ul li a:link,a:visited {
			display: block;
			width: 80px;
			font-weight: 700;
			color: black;
			padding: 10px;
			text-align: center;
		}
		ul li:hover {
			background-color: pink;
		}
		ul li ol li a:hover {
			background-color: red;
			color: white;
		}
	</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 简单纵向导航栏的设计与实现

1导航栏的创建
首先，我们需要构建HTML结构来定义基本的纵向导航列表。

<aside class="sidebar">
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</aside>

这里使用了`<aside>`标签来表示侧边栏，并且在其中嵌入了一个无序列表作为导航项。

2 DIV样式的设计

为了使侧边栏看起来更加整洁有序，我们可以为其添加一些基础样式。

.sidebar {
  width: 200px; /* 固定宽度 */
  height: 100%; /* 占据整个视窗高度 */
  position: fixed; /* 固定位置 */
  left: 0; /* 左对齐 */
  top: 0; /* 上对齐 */
  background-color: #f4f4f4; /* 背景色 */
  padding: 20px; /* 内边距 */
}

这个简单的样式设置为侧边栏赋予了固定尺寸和背景色，同时保持它始终出现在浏览器窗口的一侧。

3 列表样式的设计

接着我们给导航列表添加适当的样式，使其适应于侧边栏布局。

.sidebar nav ul {
  list-style: none; /* 去掉默认项目符号 */
  padding: 0;
  margin: 0;
}
 
.sidebar nav li {
  margin-bottom: 10px; /* 每个列表项之间有间距 */
}

这移除了列表项前的标准圆点，并调整了它们之间的间隔。

4 超链接样式的设计

最后，为超链接设定样式，确保它们清晰可读并易于点击。

.sidebar nav a {
  display: block; /* 使链接充满整个列表项区域 */
  text-decoration: none; /* 移除下划线 */
  color: #333; /* 文字颜色 */
  padding: 10px; /* 内填充 */
  border-radius: 5px; /* 圆角效果 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
}
 
.sidebar nav a:hover,
.sidebar nav a:focus {
  background-color: #ddd; /* 鼠标悬停时改变背景色 */
  color: #000; /* 文字颜色加深 */
}

这样就完成了简单纵向导航栏的基本设计。

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

1 导航栏的创建

对于含有弹出式子菜单的纵向导航栏，我们需要稍微修改一下HTML结构以支持多级菜单。

<aside class="sidebar">
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li class="has-children">
        <a href="#services">服务</a>
        <ul class="sub-menu">
          <li><a href="#web_design">网页设计</a></li>
          <li><a href="#app_development">应用开发</a></li>
          <li><a href="#seo_optimization">SEO优化</a></li>
        </ul>
      </li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</aside>

这里新增了一个包含子菜单的`<li>`元素，并通过`class="has-children"`标记出来。

2 DIV样式的设计

我们可能需要额外的CSS规则来处理子菜单的位置和显示状态。

.sub-menu {
  display: none; /* 默认隐藏 */
  position: absolute; /* 绝对定位 */
  left: 100%; /* 子菜单从父菜单右边开始 */
  top: 0; /* 顶部对齐 */
  background-color: #fff; /* 白色背景 */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 添加阴影 */
  min-width: 150px; /* 最小宽度 */
}

这些样式保证了子菜单不会一开始就显示出来，并且能够正确地定位到主菜单旁边。

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

为了让子菜单响应鼠标事件而显示，可以利用`:hover`伪类：

.has-children:hover .sub-menu {
  display: block; /* 显示子菜单 */
}

如果想要通过点击而不是悬停来控制子菜单的显示，则需借助JavaScript。

4 列表样式的设计

对于子菜单的列表项，也需要适当调整样式以匹配整体设计风格。

.sub-menu li {
  white-space: nowrap; /* 防止文本换行 */
}

这有助于保持子菜单项的一致性。

5 超链接样式的设计

子菜单中的链接也应进行样式化，以便与主菜单区分开来。

.sub-menu a {
  padding: 10px 15px; /* 更大的内填充 */
  color: #666; /* 较淡的文字颜色 */
}
 
.sub-menu a:hover,
.sub-menu a:focus {
  background-color: #eee; /* 更浅的背景色 */
  color: #333; /* 加深文字颜色 */
}

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#nav {
			width: 150px;
			border: 1px solid red;
			background-color: lightgreen;
		}
		.tit {
			height: 16px;
			line-height: 16px;
			color: white;
			text-align: center;
		}
		#nav ul li {
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-bottom: 1px solid gray;
			position: relative;
		}
		#nav ul li ol{
			display: none;
			width: 120px;
			border: 1px solid red;
			position: absolute;
			top: -1px;
			left: 150px;
		}
		#nav ul li:hover ol {
			display: block;
		}
		#nav ul,#nav ol{ 
			margin: 0;
			padding: 0;
			list-style: none;
			background-color: white;
		}
		#nav ul li a:link,a:visited {
			display: block;
			font-size: 18px;
			color: brown;
			text-decoration: none;
		}
		#nav ul li:hover {
			background-image: url('../照片/bg (2).JPG');
			font-weight: bold;
		}
		#nav ul li ol li a:link {
			font-size: 15px;
		}
		#nav ul li ol li a:hover {
			background-color: red;
			color: white;
		}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="../照片/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="../照片/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="../照片/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="../照片/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="../照片/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="../照片/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结构来定义基本的底部导航列表。

<footer class="footer-nav">
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#contact">联系我们</a></li>
      <li><a href="#" id="backToTop">返回顶部</a></li>
    </ul>
  </nav>
</footer>

这里使用了`<footer>`标签来表示页面的底部区域，并包含了一个无序列表作为导航项。

8.3.2 列表样式的设计

接下来，我们为导航列表添加适当的CSS样式，以确保其在视觉上清晰有序。

.footer-nav {
  width: 100%; /* 宽度占满整个屏幕 */
  position: fixed; /* 固定位置 */
  bottom: 0; /* 底部对齐 */
  left: 0; /* 左侧对齐 */
  background-color: #333; /* 背景色 */
  color: white; /* 文字颜色 */
  padding: 10px 0; /* 上下内边距 */
  z-index: 1000; /* 确保始终位于内容之上 */
}
 
.footer-nav ul {
  list-style: none; /* 去掉默认项目符号 */
  margin: 0;
  padding: 0;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
}
 
.footer-nav li {
  margin: 0 15px; /* 左右间距 */
}

这些样式移除了列表项前的标准圆点，并通过Flexbox实现了水平居中的效果。

8.3.3 菜单固定底部的设计

上面的`.footer-nav`类已经包含了将菜单固定到底部所需的CSS属性。`position: fixed; bottom: 0;`确保了导航栏始终保持在视口的最下方。如果需要考虑响应式设计，可以添加媒体查询来调整小屏幕设备上的表现。

@media (max-width: 768px) {
  .footer-nav {
    position: static; /* 对于小屏幕取消固定定位 */
    text-align: center; /* 文本居中 */
  }
}

8.3.4 超链接样式的设计

为了使超链接易于点击并且具有良好的视觉效果，我们可以设置以下样式：

.footer-nav a {
  color: white; /* 链接文字颜色 */
  text-decoration: none; /* 移除下划线 */
  font-size: 14px; /* 字体大小 */
  transition: color 0.3s; /* 平滑过渡效果 */
}
 
.footer-nav a:hover,
.footer-nav a:focus {
  color: #ddd; /* 鼠标悬停时改变文字颜色 */
}

8.3.5 鼠标事件

对于“返回顶部”这类特定的功能链接，可能需要一些JavaScript来处理点击事件。

document.getElementById('backToTop').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑滚动到顶部
});

这段脚本会在用户点击“返回顶部”链接时平滑地滚动页面回到最上方。

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部固定导航栏</title>
		<style>
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			li {
				width: 25%;
				float: left;
				line-height: 50px;
			}
			.fix-footer {
				height: 50px;
				width: 100%;
				background-color: lightgreen;
				border-top: 2px solid blue;
				text-align: center;
				z-index: 6;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			a:link,a:visited {
				display: block;
				font-size: 20px;
				color: black;
				text-decoration: none;
				font-weight: bold;
			}
			a:hover,a:active {
				background-color: darkgray;
				border-left: 2px solid white;
				border-right: 2px solid white;
				font-size: 16px;
				color: red;
				font-weight: bold;
			}
		</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>

案例------优名养生馆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
		body{
			background-image: url(img/bg3.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-bg1.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-sine: 20px;
			color: brown;
			text-decoration: none;
			foni-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>

案例

主页设计与实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style>
			body{
				background-image: url(img/bg3.jpg);
				margin: 0px auto;
				width: 900px;
			}
			.top{
				width: 900px;
				height: 225px;
				background-image: url(img/top-bg1.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-bg1.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/main1.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>

上一篇：基于PHP的高校学费

下一篇：第八章利用CSS制作

Document

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

8.1 水平顶部导航栏

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

这里我们使用了语义化的HTML5标签<nav>来明确表示这是一个导航区。这样不仅对搜索引擎友好，也便于屏幕阅读器等辅助技术理解页面结构。

2 列表样式的设计

接下来，我们要移除默认的列表样式（如点状符号），并使列表项水平排列。这可以通过CSS完成：

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

5 超链接样式的设计

对于子菜单中的链接，我们同样需要设定合适的样式，以确保它们在视觉上与其他内容区分开来。

8.2 纵向侧边导航栏

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

这里使用了<aside>标签来表示侧边栏，并且在其中嵌入了一个无序列表作为导航项。

2 DIV样式的设计

为了使侧边栏看起来更加整洁有序，我们可以为其添加一些基础样式。

这个简单的样式设置为侧边栏赋予了固定尺寸和背景色，同时保持它始终出现在浏览器窗口的一侧。

3 列表样式的设计

接着我们给导航列表添加适当的样式，使其适应于侧边栏布局。

这移除了列表项前的标准圆点，并调整了它们之间的间隔。

4 超链接样式的设计

最后，为超链接设定样式，确保它们清晰可读并易于点击。

这样就完成了简单纵向导航栏的基本设计。

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

1 导航栏的创建

对于含有弹出式子菜单的纵向导航栏，我们需要稍微修改一下HTML结构以支持多级菜单。

这里新增了一个包含子菜单的<li>元素，并通过class="has-children"标记出来。

2 DIV样式的设计

我们可能需要额外的CSS规则来处理子菜单的位置和显示状态。

这些样式保证了子菜单不会一开始就显示出来，并且能够正确地定位到主菜单旁边。

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

为了让子菜单响应鼠标事件而显示，可以利用:hover伪类：

如果想要通过点击而不是悬停来控制子菜单的显示，则需借助JavaScript。

4 列表样式的设计

对于子菜单的列表项，也需要适当调整样式以匹配整体设计风格。

这有助于保持子菜单项的一致性。

5 超链接样式的设计

子菜单中的链接也应进行样式化，以便与主菜单区分开来。

8.3 底部固定导航栏

8.3.1 导航栏的创建

这里使用了<footer>标签来表示页面的底部区域，并包含了一个无序列表作为导航项。

8.3.2 列表样式的设计

接下来，我们为导航列表添加适当的CSS样式，以确保其在视觉上清晰有序。

8.3.3 菜单固定底部的设计

上面的.footer-nav类已经包含了将菜单固定到底部所需的CSS属性。position: fixed; bottom: 0;确保了导航栏始终保持在视口的最下方。如果需要考虑响应式设计，可以添加媒体查询来调整小屏幕设备上的表现。

8.3.4 超链接样式的设计

为了使超链接易于点击并且具有良好的视觉效果，我们可以设置以下样式：

8.3.5 鼠标事件

这段脚本会在用户点击“返回顶部”链接时平滑地滚动页面回到最上方。

综合案例

案例

主页设计与实现

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

这里我们使用了语义化的HTML5标签`<nav>`来明确表示这是一个导航区。这样不仅对搜索引擎友好，也便于屏幕阅读器等辅助技术理解页面结构。

这里使用了`<aside>`标签来表示侧边栏，并且在其中嵌入了一个无序列表作为导航项。

这里新增了一个包含子菜单的`<li>`元素，并通过`class="has-children"`标记出来。

为了让子菜单响应鼠标事件而显示，可以利用`:hover`伪类：

这里使用了`<footer>`标签来表示页面的底部区域，并包含了一个无序列表作为导航项。

上面的`.footer-nav`类已经包含了将菜单固定到底部所需的CSS属性。`position: fixed; bottom: 0;`确保了导航栏始终保持在视口的最下方。如果需要考虑响应式设计，可以添加媒体查询来调整小屏幕设备上的表现。