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

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>
  • 11
    点赞
  • 59
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值