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

最新推荐文章于 2023-08-04 09:27:10 发布

转载最新推荐文章于 2023-08-04 09:27:10 发布 · 222 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xzh0717/p/10658663.html

本文介绍了如何使用HTML和CSS创建垂直及水平导航栏、下拉菜单及提示工具，包括具体的代码实现方式，有助于理解网页导航的基本构成和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/xzh0717/p/10658663.html