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>
上一篇: 今日头条前端面试的笔试题分享
下一篇: 关于58同城和赶集网被曝光后的反思