CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

最新推荐文章于 2023-04-08 18:54:17 发布

freedom_zdh

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量1.2w

点赞数 11

0. 导航栏

导航栏实际上包括了列表，超链接，定位，下拉菜单，等内容，统一以导航栏为主体学习他们的样式。

1. 垂直导航栏

垂直导航栏使用到的是垂直列表
设置导航栏的背景色为gray灰色
设置正常字体为黑色，悬停字体为白色
设置导航栏悬停时更改背景色为green绿色
将列表项中的超链接设置为有合适长度和宽度的元素
添加激活列表项始终是背景色为green绿色，字体白色
将超链接中的的文本内容居中
添加超链接的边框
在原来导航栏的基础上可以将导航栏设置为高度百分之百，宽度固定

创建具有灰色背景色的基本垂直导航栏，并在用户将鼠标移到链接上方时更改链接的背景色：

2. 水平深色导航栏

创建水平导航栏，可以使用inline和float两种方式
将列表项设置为内联元素
默认情况下，<li>元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，以将其显示在一行上

创建水平导航栏的另一种方法是浮动<li>元素，并为导航链接<a>指定布局：

创建具有深色背景色的基本水平导航栏，并在用户将鼠标移到链接上方时更改链接的背景色：

Add an “active” class to the current link to let the user know which page he/she is on:
通过将列表项向右浮动来右对齐链接（float：right;）：解决
将border-right属性添加到<li>以创建链接分隔符：

最终的深色水平导航栏效果图：

在这里插入图片描述
html.code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    ul {

        padding: 0px;
        margin: 0px;
        list-style-type: none;

        background-color: #333;
        /*border: 1px solid black;*/
        overflow: hidden;
    }

    li {


        float: left;

        /*border: 1px solid black;*/
    }

    a {
        color: white;
        display: block;
        padding: 14px 16px;
        text-decoration: none;


    }

    a:hover:not(.active) {
        background-color: #111;
    }

    .active {
        background-color: #4CAF50;
    }

    li {
        border-right: 1px solid #bbb;
    }

    li:last-child {
        border-right: none;
    }
</style>
<body>

<ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系方式</a></li>
    <li style="float:right"><a href="#" class="active">关于</a></li>
</ul>

</body>
</html>

3. 固定导航栏

使导航栏保持在页面顶部或底部，即使用户滚动页面也是如此：

注意：固定位置(fixed position)在移动设备上可能无法正常工作。

        /*浏览器顶部固定导航栏*/

        /*position: fixed;*/
        /*top: 0px;*/
        /*width: 100%;*/


        /*    浏览器的底部定位导航栏*/

        position: fixed;
        bottom: 0px;
        width: 100%;

4. 水平灰色导航栏

在这里插入图片描述

5. 粘性导航栏

Add position: sticky; to <ul> to create a sticky navbar.创建粘性导航栏

粘性元素根据滚动位置在相对和固定之间切换。它将相对定位，直到在视口中遇到给定的偏移位置为止-然后将其“粘贴”在适当的位置（例如position：fixed）。

position:sticky;
top:0px;

效果图：
在这里插入图片描述
注意：Internet Explorer不支持粘性定位。 Safari需要-webkit-前缀。您还必须指定顶部，右侧，底部或左侧中的至少一个属性，以使粘性定位起作用。

6. 响应式顶部导航栏

在前面水平导航栏的基础上，导航栏是使用浮动设计的，那么响应式的时候添加如下代码(响应的时候清除浮动)实现响应式

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @media screen and (max-width: 600px) {
        li {
            float: none;
        }

响应前
在这里插入图片描述

当屏幕小于600的响应后：

在这里插入图片描述

7. 响应式侧边导航栏

正常效果：
在这里插入图片描述
当屏幕小于900时响应：

当屏幕小于600时响应：
在这里插入图片描述

html.code

<!DOCTYPE html>
<html lang="en">
<head>
    <!--    响应式网页的头信息-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html {
        margin: 0px;
        padding: 0px;
    }

    body {
        margin: 0px;
        padding: 0px;
    }

    ul {

        padding: 0px;
        margin: 0px;
        list-style-type: none;
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
        /*解决父级元素塌陷问题*/
        overflow: hidden;


        /*顶部粘性定位导航栏*/

        position: sticky;
        top: 0px;
    }

    li {
        float: left;

        /*border: 1px solid black;*/
    }

    a {
        color: #666;
        display: block;
        padding: 14px 16px;
        text-decoration: none;
        text-align: center;


    }

    a:hover:not(.active) {
        /*background-color: #111;*/

        background-color: #ddd;
    }

    .active {
        background-color: #4CAF50;
    }

    li {
        /*border-right: 1px solid #bbb;*/
    }

    li:last-child {
        /*border-right: none;*/
    }

    @media screen and (max-width: 600px) {
        li {
            float: none;
        }
    }
</style>
<body>
<div class="header">
    <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
</div>
<ul>
    <li><a href="#" class="active">主页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系方式</a></li>
    <li><a href="#">关于</a></li>
</ul>


<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
</body>
</html>

8. 下拉菜单导航栏

效果:
在这里插入图片描述

9. 下拉悬停菜单

使用CSS创建一个可悬停的下拉列表。

在这里插入图片描述

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


    .dropDown {

        position: relative;
        display: inline-block;

    }

    .dropDown-content {
        min-width: 160px;
        background-color: #f9f9f9;
        display: none;
        position: absolute;
    }

    .dropDown-content a {
        color: black;
        display: block;
        /*border: 1px solid black;*/
        padding: 12px 16px;
        text-decoration: none;
    }

    .dropbtn {
        padding: 14px 16px;
        font-size: 16px;
        background-color: #4CAF50;
        border: none;
        color: white;
    }

    .dropDown:hover .dropDown-content {
        display: block;
    }

    .dropDown-content a:hover {
        background-color: #f1f1f1
    }
</style>
<body>

<div class="dropDown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropDown-content">
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>

    </div>
</div>


<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
<p>zhandonghong</p>
</body>
</html>

freedom_zdh

关注

11
点赞
踩
59

收藏

觉得还不错? 一键收藏
1
评论
CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

0. 导航栏创建导航栏之前需要掌握列表的样式以及链接的样式，因为：导航栏=链接列表，链接列表使用到列表和超链接1. 垂直导航栏垂直导航栏使用到的是垂直列表设置导航栏的背景色为gray灰色设置正常字体为黑色，悬停字体为白色设置导航栏悬停时更改背景色为green绿色将列表项中的超链接设置为有合适长度和宽度的元素添加激活列表项始终是背景色为green绿色，字体白色将超链接中的的文本内容居中添加超链接的边框在原来导航栏的基础上可以将导航栏设置为高度百分之百，宽度固定创建具有灰色背景色
复制链接

扫一扫