欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML及CSS导航栏代码实现教程

程序员文章站 2022-04-02 07:50:31
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>