CSS 笔记——导航栏、下拉菜单、提示工具

2019-04-05 14:42:37 阅读：174 来源： 互联网

标签：color 笔记 transparent width background border 下拉菜单 CSS left

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;
}

标签：color,笔记,transparent,width,background,border,下拉菜单,CSS,left
来源： https://www.cnblogs.com/xzh0717/p/10658663.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 笔记——导航栏、下拉菜单、提示工具

8. 导航栏、下拉菜单、提示工具

（1）导航栏

（2）下拉菜单

（3）提示工具