HTML及CSS导航栏代码实现教程
程序员文章站
2022-07-08 12:11:10
HTML及CSS导航栏代码实现教程
HTML及CSS导航栏代码实现教程
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏,提示文本及下拉菜单详解，author：hly,time:18,3,11</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: visible;/*显示越界的容器,使得提示框可以显示*/
background-color: #333;
}
li {
float: left;/*在那个方向浮动*/
}
/*下拉按钮样式*/
li a, .dropbtn {
display: inline-block;/*行内块元素*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;/*有无下划线*/
}
/* ，鼠标点到下拉菜单，当下拉内容显示后修改下拉按钮的背景颜色 */
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
/* 容器 <p> - 需要定位下拉内容 */
.dropdown {
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);
}
/* 下拉菜单内容的链接 */
.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;
}
/*提示容器*/
.tooltip {
color: white;
position: relative;
display: inline-block;
border-bottom: 1px solid white;/*下边框(下划线)的样式*/
}
/*提示文本*/
.tooltip .tooltiptext {/*第二个点之间有个空格*/
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;/*定义圆角形状*/
position: absolute;/*定位，z-index代表级别，1最低,简单来说就是覆盖*/
z-index: 9;
/*top:-5px;
left:105%;/*定位在左边还是右边*/
top: 150%;
left: 50%;/*显示在指定元素的右侧*/
margin-left: -60px;/*60px。 这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。*/
}
/*鼠标移动上去后显示提示框*/
.tooltip:hover .tooltiptext {
visibility: visible;
}
.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;
}
</style>
</head>
<body>
<ul>
<li><a class="" href="#home">主页</a></li>
<li><a href="#">动态</a></li>
<p class="dropdown"> <a href="#" class="dropbtn">下拉菜单</a>
<p class="dropdown-content"> <a href="#">连接1</a> <a href="#">连接2</a> <a href="#">连接3</a> </p>
</p>
<p class="tooltip">提示效果 <span class="tooltiptext">提示效果</span> </p>
</ul>
</body>
</html>