第8章利用CSS制作导航菜单
8.1 水平顶部导航栏
8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
通常使用 HTML 的无序列表（<ul>）和列表项（<li>）来创建导航栏的基本结构。通过 CSS 对列表进行样式设置，去除默认的列表样式，如项目符号等，使其呈现为水平排列的导航栏
<!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="#">java</a></li>
<li><a href="#">网络</a></li>
<li><a href="#">毛概</a></li>
</ul>
</nav>
</body>
</html>
8.1.1.2 列表样式的设计
设置列表的宽度、高度、背景颜色等属性，使其适应页面布局。可以使用 CSS 的display: inline-block属性将列表项设置为水平排列，同时调整间距和对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
</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="#">java</a></li>
<li><a href="#">网络</a></li>
<li><a href="#">毛概</a></li>
</ul>
</nav>
</body>
</html>
8.1.1.3 超链接样式的设计
对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a{
text-decoration: none;
display: block;
width: 100px;
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="#">java</a></li>
<li><a href="#">网络</a></li>
<li><a href="#">毛概</a></li>
</ul>
</nav>
</body>
</html>
8.1.1.4 鼠标事件
可以通过 JavaScript 或 CSS 的:active伪类来实现鼠标点击时的效果，如改变颜色、添加阴影等。同时，可以设置鼠标移入和移出时的过渡效果，使交互更加平滑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a{
text-decoration: none;
display: block;
width: 100px;
text-align: center;
}
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="#">java</a></li>
<li><a href="#">网络</a></li>
<li><a href="#">毛概</a></li>
</ul>
</nav>
</body>
</html>
8.1.2 下拉子菜单导航栏的设计与实现
8.1.2.1导航栏的创建
与简单水平导航栏类似，使用无序列表和列表项创建基本结构。但需要在其中添加子菜单的容器，通常使用另一个无序列表来表示子菜单
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
/* 8.1.2.1导航栏的创建 */
/* 8.1.2.2 列表样式的设计 */
/* 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.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;
padding: 0;
margin: 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>s
<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 二级菜单的隐藏和显示设计
通过 CSS 的display:none属性将子菜单初始设置为隐藏状态。当鼠标悬停在主菜单上时，使用:hover伪类将子菜单显示出来。可以使用 JavaScript 来实现更加复杂的交互效果，如延迟显示、动画效果等
<!--示例程序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;
padding: 0;
margin: 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 超链接样式的设计 */
/* 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>s
<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>标签来包裹导航栏，设置其宽度、高度、背景颜色等属性，使其适应页面布局。同时，可以使用 CSS 的定位属性来调整导航栏的位置
<!--示例程序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;
padding: 0;
margin: 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{
display: block;
text-decoration: none;
width: 100px;
padding: 10px;
text-align: center;
}
ul li a {
background-color: #ff0000;
color: #ffffff;
}
ul li ol li a{
background-color: #ffffff;
color: #ff0000;
}
/* 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>s
<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 超链接样式的设计
与简单水平导航栏类似，对主菜单和子菜单中的超链接进行样式设置，增加交互效果
<!--示例程序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;
padding: 0;
margin: 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{
display: block;
text-decoration: none;
width: 100px;
padding: 10px;
text-align: center;
}
ul li a {
background-color: #ff0000;
color: #ffffff;
}
ul li ol li a{
background-color: #ffffff;
color: #ff0000;
}
/* 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>s
<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 鼠标事件
除了主菜单的鼠标事件外，还需要对子菜单的鼠标事件进行处理。当鼠标移入子菜单时，保持子菜单的显示状态；当鼠标移出子菜单时，延迟隐藏子菜单，以提高用户体验
<!--示例程序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;
padding: 0;
margin: 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{
display: block;
text-decoration: none;
width: 100px;
padding: 10px;
text-align: center;
}
ul li a {
background-color: #ff0000;
color: #ffffff;
}
ul li ol li a{
background-color: #ffffff;
color: #ff0000;
}
/* 8.1.2.6 鼠标事件 */
ul li a:hover{
border-bottom: #aaddff solid 5px;
}
ul li ol li a:hover{
border-bottom: none;
background-color: #ff0000;
color: #ffffff;
}
</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导航栏的创建
使用无序列表和列表项创建导航栏的基本结构。将列表设置为垂直排列，通过 CSS 的display:block属性实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<nav>
<div>
<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">
div{
background-color: lemonchiffon;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: pink;
}
</style>
</head>
<body>
<nav>
<div>
<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 列表样式的设计
设置列表项的宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
background-color: lemonchiffon;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: pink;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
line-height: 30px;
display: block;
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<nav>
<div>
<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 超链接样式的设计
对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
background-color: lemonchiffon;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: pink;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
line-height: 30px;
display: block;
width: 150px;
text-align: center;
}
a:link,a:visited{
background-color: pink;
color: lemonchiffon;
}
a:hover,a:active{
background-color: lemonchiffon;
color: pink;
}
</style>
</head>
<body>
<nav>
<div>
<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">
div{
background-color: lemonchiffon;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: pink;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
line-height: 30px;
display: block;
width: 150px;
text-align: center;
}
a:link,a:visited{
background-color: pink;
color: lemonchiffon;
}
a:hover,a:active{
background-image: url(img/bg.JPG);
}
</style>
</head>
<body>
<nav>
<div>
<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 导航栏的创建
与简单纵向导航栏类似，使用无序列表和列表项创建基本结构。在其中添加子菜单的容器，通常使用另一个无序列表来表示子菜单
<!--示例程序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>标签的宽度、高度、背景颜色等属性，使其适应页面布局。可以使用 CSS 的定位属性将导航栏固定在页面的侧边
<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
div{
background-color: lemonchiffon;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: pink;
}
</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 二级菜单的隐藏和显示设计
通过 CSS 的display:none属性将子菜单初始设置为隐藏状态。当鼠标悬停在主菜单上时，使用:hover伪类将子菜单显示出来。可以使用 JavaScript 来实现更加复杂的交互效果，如延迟显示、动画效果等
<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
div{
background-color: #33cc00;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: #ffffff;
}
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
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>家居用品< img src="img/more.JPG" align="right" />
<ol>
<li>收纳箱</li>
<li>雨伞雨具</li>
<li>家务清洁</li>
<li>茶具</li>
<li>环保袋</li>
</ol>
</li>
<li>手机数码< img src="img/more.JPG" align="right" />
<ol>
<li>电脑主机</li>
<li>鼠标键盘</li>
<li>无人机</li>
<li>数码相机</li>
</ol>
</li>
<li>家用电器< img src="img/more.JPG" align="right" />
<ol>
<li>吸尘器</li>
<li>电饭煲</li>
<li>冰箱</li>
</ol>
</li>
<li>厨卫工具< img src="img/more.JPG" align="right" />
<ol>
<li>消毒柜</li>
<li>抽油烟机</li>
<li>碗柜</li>
<li>花洒笼头</li>
<li>洗手台</li>
</ol>
</li>
<li>汽车用品< img src="img/more.JPG" align="right" />
<ol>
<li>打蜡服务</li>
<li>超级试驾</li>
<li>导航仪</li>
<li>机油</li>
</ol>
</li>
<li>运动器材< img src="img/more.JPG" align="right" />
<ol>
8.2.2.4 列表样式的设计
设置主菜单和子菜单的列表样式，包括宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果
<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
div{
background-color: lemonchiffon;
width: 150px;
padding: 10px;
}
h3{
text-align: center;
color: pink;
}
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
position: relative;
}
ul li ol{
display:none;
position: absolute;
left: 150px;
top: -1px;
}
ul li:hover ol{
display: block;
width: 150px;
line-height: 30px;
text-decoration: none;
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.5 超链接样式的设计
对主菜单和子菜单中的超链接进行样式设置，增加交互效果
8.3 底部固定导航栏
8.3.1 导航栏的创建
使用无序列表和列表项创建导航栏的基本结构。将其定位在页面的底部，可以使用 CSS 的position:fixed属性实现
<!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 列表样式的设计
设置列表项的宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果
<!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;
}
</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 菜单固定底部的设计
通过 CSS 的bottom:0属性将导航栏固定在页面的底部。可以设置导航栏的宽度、高度等属性，使其适应页面布局
<!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;
padding: 20px;
width: 317px;
text-decoration: none;
text-align: center;
}
a:link,a:visited{
background-color: aliceblue;
color: black;
}
a:hover,a:active{
background-color: black;
color: aliceblue;
}
.fix-footer{
position: fixed;
bottom: 0;
}
</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.4 超链接样式的设计
对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果
<!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;
padding: 20px;
width: 100px;
text-decoration: none;
text-align: center;
}
</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 鼠标事件
可以通过 JavaScript 或 CSS 的:active伪类来实现鼠标点击时的效果，如改变颜色、添加阴影等。同时，可以设置鼠标移入和移出时的过渡效果，使交互更加平滑
<!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;
padding: 20px;
width: 100px;
text-decoration: none;
text-align: center;
}
a:link,a:visited{
background-color: aliceblue;
color: black;
}
a:hover,a:active{
background-color: black;
color: aliceblue;
}
</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 综合案例——优名养生馆
8.4.1 封面页的设计与实现
<!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 主页的设计与实现
<!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>  古人云：善养生者，上养神智、中养形态、下养筋骨。</p>
<p>  养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法，以期达到保养、调养、颐养生命，实现人类健康、长寿的目的。</p>
<p>  养生，是养护保养生命，已达长寿。养生是指有目的的通过各种手段护养人体生命的行为，即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生，注重身体机能的维护和康复；也包括心理层面的养生，腔调内在精神的平衡和祥和。按照层次划分，生理层面的养生也包括养颜、养体、养老；心理层面的养生包括养心、养性、养神。</p>
</div>
<hr/>
<div class="footer">版权所有©优名养生馆</div>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/2401_86933352/article/details/143265544
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！