8. 导航栏、下拉菜单、提示工具
（1）导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直导航栏</title>
<style type="text/css" media="screen">
/* 2、然后从列表中删除边距和填充 */
ul {
/* list-style-type: none; - 移除列表前小标志。一个导航栏并不需要列表标记 */
list-style-type: none;
/* 移除浏览器的默认设置将边距和填充设置为 0。 */
margin: 0;
padding: 0;
/* 设置宽度和添加灰色背景。 */
width: 200px;
background-color: #f1f1f1;
/* 可以添加整个列表边框（外边框） */
border: 1px solid #555;
/* 设置全屏高度的固定导航条 */
width: 15%;
height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果导航栏选项多，允许滚动 */
}
/* 3、其次修饰列表外观 */
li {
/* 列表文字居中 */
text-align: center;
/* 可以添加列项边框（列表内边框） */
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a {
/* display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。 */
display: block;
color: #000;
padding: 8px 16px;
/* 将文字的修饰设为 none，即定义标准的文本。 取消了连接的下划线。*/
text-decoration: none;
}
/* 4、设置鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
/* 5、激活当前导航。我们可以添加类（"active"）来标准哪个选项被选中 */
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<!-- 1、首先建立一个标准的HTML列表导航栏。 -->
<!-- 导航栏基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义 -->
<ul>
<li><a class="active" target="_blank" href="http://www.runoob.com/">菜鸟教程</a></li>
<li><a target="_blank" href="http://www.w3school.com.cn/">W3school</a></li>
<li><a target="_blank" href="https://www.w3cschool.cn/">W3Cschool</a></li>
<li><a target="_blank" href="https://www.quanzhanketang.com/default.html">全栈课堂</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平导航栏</title>
<style type="text/css" media="screen">
/* 2、然后从列表中删除边距和填充 */
ul {
/* list-style-type: none; - 移除列表前小标志。一个导航栏并不需要列表标记 */
list-style-type: none;
/* 移除浏览器的默认设置将边距和填充设置为 0。 */
margin: 0;
padding: 0;
/* 可以添加整个列表边框（外边框） */
border: 1px solid #555;
overflow: hidden;
/* 固定导航栏 */
position: fixed;
/* bottom: 0; /* 固定在底部 */
top: 0; /* 固定在顶部 */
width: 100%;
}
/* 3、其次修饰列表外观 */
li {
/* 内联列表项, display: inline; - 默认情况下，<li>元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，以在一行上显示它们 */
/*display: inline; */
/* 另一种创建水平导航栏的方法是浮动<li>元素，并指定导航链接的布局 */
float: left; /* 使用浮动块元素的幻灯片彼此相邻 */
border-right: 1px solid #bbb; /* 添加分割线 */
}
li:last-child {
border-right: none;
}
li a {
/* display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。 */
display: block;
color: #000;
padding: 8px 16px;
/* 将文字的修饰设为 none，即定义标准的文本。 取消了连接的下划线。*/
text-decoration: none;
text-align: center;
background-color: #f1f1f1;
}
/* 4、设置鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
/* 5、激活当前导航。我们可以添加类（"active"）来标准哪个选项被选中 */
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<!-- 1、首先建立一个标准的HTML列表导航栏。 -->
<!-- 导航栏基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义 -->
<ul>
<li><a class="active" target="_blank" href="http://www.runoob.com/">菜鸟教程</a></li>
<li><a target="_blank" href="http://www.w3school.com.cn/">W3school</a></li>
<li><a target="_blank" href="https://www.w3cschool.cn/">W3Cschool</a></li>
<!-- 右对齐链接 -->
<li style="float: right"><a target="_blank" href="https://www.quanzhanketang.com/default.html">全栈课堂</a></li>
</ul>
</body>
</html>
（2）下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本下拉菜单</title>
<style type="text/css" media="screen">
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>菜鸟教程</p>
<p>www.runoob.com</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css" media="screen">
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
width: 160px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
/*min-width: 160px;*/
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="http://www.runoob.com">菜鸟教程 1</a>
<a href="http://www.runoob.com">菜鸟教程 2</a>
<a href="http://www.runoob.com">菜鸟教程 3</a>
</div>
</div>
</body>
</html>
（3）提示工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tooltip</title>
<style type="text/css" media="screen">
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* 定位 */
position: absolute;
z-index: 1;
/* 上部提示 */
top: 150%;
width: 120px;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
/* 淡入 - 1秒内从 0% 到 100% 显示: */
opacity: 0;
transition: opacity 2s;
}
/* 加箭头 */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%; /* 提示工具顶部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1; /* 透明度 */
}
</style>
</head>
<body style="text-align:center;">
<h2>底部提示框/顶部箭头</h2>
<div class="tooltip">鼠标移动到我这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
/* 定位 */
position: absolute;
z-index: 1;
/* 上部提示 */
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
/* 右侧提示 */
top: -5px;
left: 105%;
/* 下部提示 */
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
/* 左侧提示 */
top: -5px;
right: 105%;
/* 加箭头 */
/* 顶部提示框/底部箭头： */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* 底部提示框/顶部箭头： */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 提示工具头部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
/* 右侧提示框/左侧箭头： */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* 提示工具左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
/* 左侧提示框/右侧箭头： */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 提示工具右侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
