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

🕗 发布于 2024-11-13 06:09 css 前端

8.1 水平顶部导航栏

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

如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，结合下拉子导航使用

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

1.导航栏的创建

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

<!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="#">数据库</a></li>
<li><a href="#">操作系统</a></li>
<li><a href="#">服务器</a></li>
</ul>
</nav>
</body>
</html>

2.列表样式的设计

此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标记，可以利用CSS在<head>用，射列考样式进行变

<!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="#">数据库</a></li>
<li><a href="#">操作系统</a></li>
<li><a href="#">服务器</a></li>
</ul>
</nav>
</body>
</html>

3.超链接样式的设计

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a{
display: block;
width: 80px;
text-align: center;
text-decoration: 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>

4.鼠标事件

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a{
display: block;
width: 80px;
text-align: center;
text-decoration: none;
}
a:link,a:visited{
background-color: aqua;
color: #ffffff;
}
a:hover,a:active{
background-color: #fff000;
color:#ffffff;
}
</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 下拉子菜单导航栏的设计与实现

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

1.导航栏的创建

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
</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>

2.列表样式的设计

此时会带有ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head> 标签中进行声明，对列表样式进行改变。

同样，使用list-style-type属性去掉默认标记，设置margin和 padding属性为0，为<li> 列表选项定义浮动效果，设置text-decoration属性none。这里使用通配符“*”整体设置。

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
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>

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

为了使有序列表的二级菜单隐藏起来，需要设置display属性为none

为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block.

为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
ul li{
float: left;
position: relative;
}
ul li ol{
background-color: lightcyan;
position: absolute;
top: 40px;
left: 0;
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>

4.DIV样式的设计

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
ul li{
float: left;
position: relative;
}
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;
}
</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>

5.超链接样式的设计

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
ul li{
float: left;
position: relative;
}
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;
}
</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>

6.鼠标事件

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
ul li{
float: left;
position: relative;
}
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.导航栏的创建

普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级元素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。

在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表ul>标签和列表选项<li>标签创建菜单选项。这里的超链接地址暂时设置为空链接，用户可根据实际情况改成具体的URL地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所有商品分类</h3>
<ul>
<li><a href="#">家居用品</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">厨卫工具</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">运动器材</a></li>
</ul>
</div>
</nav>
</body>
</html>

2.DIV样式的设计

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#nav{
width: 150px;
border: 1px solid greenyellow;
background-color: aqua;
}
.tit{
height: 16px;
line-height: 16px;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所有商品分类</h3>
<ul>
<li><a href="#">家居用品</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">厨卫工具</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">运动器材</a></li>
</ul>
</div>
</nav>
</body>
</html>

3.列表样式的设计

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#nav{
width: 150px;
border: 1px solid greenyellow;
background-color: aqua;
}
.tit{
height: 16px;
line-height: 16px;
color: #ffffff;
text-align: center;
}
#nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: white;
}
#nav ul li{
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid green;
}
</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所有商品分类</h3>
<ul>
<li><a href="#">家居用品</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">厨卫工具</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">运动器材</a></li>
</ul>
</div>
</nav>
</body>
</html>

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">
#nav{
width: 150px;
border: 1px solid greenyellow;
background-color: aqua;
}
.tit{
height: 16px;
line-height: 16px;
color: #ffffff;
text-align: center;
}
#nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: white;
}
#nav ul li{
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid green;
}
a:link,a:visited{
display: block;
font-size: 18px;
color:brown;
text-decoration: none;
}
a:hover,a:active{
font-size: 15px;
color: red;
border: 3px solid red;
font-weight: bold;
background-image: url(img/bg.JPG);
}
</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所有商品分类</h3>
<ul>
<li><a href="#">家居用品</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">厨卫工具</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">运动器材</a></li>
</ul>
</div>
</nav>
</body>
</html>

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

1.导航栏的创建

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

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">

</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所有商品分类</h3>
<ul>
<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">收纳箱</a></li>
<li><a href="#">雨伞雨具</a></li>
<li><a href="#">家务清洁</a></li>
<li><a href="#">茶具</a></li>
<li><a href="#">环保袋</a></li>
</ol>
</li>
<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">电脑主机</a></li>
<li><a href="#">鼠标键盘</a></li>
<li><a href="#">无人机</a></li>
<li><a href="#">数码相机</a></li>
</ol>
</li>
<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">吸尘器</a></li>
<li><a href="#">电饭煲</a></li>
<li><a href="#">冰箱</a></li>
</ol>
</li>
<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">消毒柜</a></li>
<li><a href="#">抽油烟机</a></li>
<li><a href="#">碗柜</a></li>
<li><a href="#">花洒笼头</a></li>
<li><a href="#">洗手台</a></li>
</ol>
</li>
<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">打蜡服务</a></li>
<li><a href="#">超级试驾</a></li>
<li><a href="#">导航仪</a></li>
<li><a href="#">机油</a></li>
</ol>
</li>
<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">跑鞋</a></li>
<li><a href="#">帐篷</a></li>
<li><a href="#">山地车</a></li>
</ol>
</li>
</ul>
</div>
</nav>
</body>
</html>

2.DIV样式的设计

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
#nav{
width: 150px;
background-color: #00cc33;
padding: 10px;
}
h3{
text-align: center;
color: #eeeeee;
}
</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>

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

为了使有序列表的二级菜单隐藏起来，需要设置display属性为none.

为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为

block,

为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
#nav{
width: 150px;
background-color: #00cc33;
padding: 10px;
}
h3{
text-align: center;
color: #eeeeee;
}
#nav ul li{
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid gold;
position: relative;
}
#nav ul li ol{
display: none;
width: 120px;
border: 1px solid greenyellow;
position: absolute;
top: -1px;
left: 150px;
}
#nav 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>

4.列表样式的设计

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

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
#nav{
width: 150px;
background-color: #00cc33;
padding: 10px;
}
h3{
text-align: center;
color: #ffffff;
}
#nav ul li{
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid gold;
position: relative;
}
#nav ul li ol{
display: none;
width: 120px;
border: 1px solid greenyellow;
position: absolute;
top: -1px;
left: 150px;
}
#nav ul li:hover ol{
display: block;
}
#nav ul,#nav ol{
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: white;
}
</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>

5. 超链接样式的设计

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

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>出式子导航栏的制作</title>
<style type="text/css">
#nav{
width: 150px;
background-color: #00cc33;
padding: 10px;
}
h3{
text-align: center;
color: #ffffff;
}
#nav ul li{
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid gold;
position: relative;
}
#nav ul li ol{
display: none;
width: 120px;
border: 1px solid greenyellow;
position: absolute;
top: -1px;
left: 150px;
}
#nav ul li:hover ol{
display: block;
}
#nav ul,#nav ol{
margin: 0px;
padding: 0px;
list-style-type: 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(img/bg2.JPG);
font-weight: bold;
}
#nav ul 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="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 底部固定导航栏

1.导航栏的创建

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</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>

2.列表样式的设计

利用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">
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
li{
width: 25%;
float: left;
line-height: 50px;
}
</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>

3.菜单固定底部的设计

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style-type: 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: 9999;
position: fixed;
border: 0;
left: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>

4.超链接样式的设计

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style-type: 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: 9999;
position: fixed;
border: 0;
left:0;
}
a:link,a:visited{
display: block;
font-size: 20px;
color: black;
text-decoration: none;
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>

5.鼠标事件

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style-type: 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: 9999;
position: fixed;
border: 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>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优名养生馆</title>
<style type="text/css">
body{
background-image: url(img/img-bg.png);

 }
 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;
 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:valid{
 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: wheat;
 }
 .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="rifht" 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 type="text/css">
body{
background-image:url(img/bg (2).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 (2).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>

原文地址：https://blog.csdn.net/2402_83184791/article/details/143358434

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：数据结构《链表》
下一篇：Oracle 高水位线和低-高水位线（High Water Mark & Low High Water Mark）

谷歌推出设备内置人工智能，实时向手机用户发出诈骗电话警报
Google 宣布推出适用于 Android 的新安全功能，可实时防御诈骗和有害应用。
阅读更多2024-11-16
动手学深度学习70 BERT微调
13 bert一般可以用工具转成c++ 开销大。考虑怎么提升bert性能。14 设备性能不高，可以用蒸馏bert。模型中有大量冗余的东西。9 10, 一般不固定，固定参数可以使训练速度加快，可以尝试
阅读更多2024-11-16
怎么改变网络IP地址：实用指南与注意事项
在数字化时代，IP地址作为设备连接互联网的“身份证”，扮演着至关重要的角色。无论是出于隐私保护、访问限制绕过，还是网络安全考虑，有时我们需要更改设备的IP地址。然而，对于许多非技术用户而言，这一过程可
阅读更多2024-11-16
huggingface 下载方法测试ok
huggingface 下载方法：
阅读更多2024-11-16
计算机网络（10）网络性能
在计算机网络中，网络性能是指网络传输数据的效率、速度和稳定性。
阅读更多2024-11-16
Springboot校园失物招领平台
Springboot校园失物招领平台
阅读更多2024-11-16
HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）
HarmonyOS 提供了一个强大的 API 集，方便开发者获取设备的硬件和软件信息。通过模块的deviceInfo接口，开发者可以访问设备的型号、品牌、系统版本等详细信息。本文将详细介绍如何使用这些
阅读更多2024-11-16
Vue3集成搜索引擎智能提示API
问题：因为API返回的是JSONP数据，JSONP是跨域访问的一种方式，网上很多都是用的原生的 js 代码去发送请求，嵌入到vue中不太方便，因此我想着vue能不能直接发送jsonp 请求，后面发现v
阅读更多2024-11-16
【Linux】Linux 权限的理解
本文简单介绍了Linux的基础知识--权限。
阅读更多2024-11-16
Python 中.title()函数和.lower()函数
将字符串中的每一大写字母都变成的小写字母。将字符串中的每一单词的首字母大写。1.lower()函数的功能。1.title()函数的功能。一.title()函数。二.lower()函数。
阅读更多2024-11-16

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

8.1 水平顶部导航栏

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

1.导航栏的创建

2.列表样式的设计

3.超链接样式的设计

4.鼠标事件

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

1.导航栏的创建

2.列表样式的设计

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

4.DIV样式的设计

5.超链接样式的设计

6.鼠标事件

8.2 纵向侧边导航栏

8.2.1 简单总想导航栏的设计与实现

1.导航栏的创建

2.DIV样式的设计

3.列表样式的设计

4.超链接样式的设计

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

1.导航栏的创建

2.DIV样式的设计

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

4.列表样式的设计

5. 超链接样式的设计

8.3 底部固定导航栏

1.导航栏的创建

2.列表样式的设计

3.菜单固定底部的设计

4.超链接样式的设计

5.鼠标事件

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

相关文章

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