CSS导航栏制作

最新推荐文章于 2024-04-14 12:10:13 发布

MirrorN

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量4.5k

点赞数 4

分类专栏： HTML、CSS、JQuery、PHP 文章标签： css html

本文链接：https://blog.csdn.net/sinat_34328764/article/details/78154410

版权

HTML、CSS、JQuery、PHP 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

垂直导航栏

导航栏的制作主要是对HTML中的< ul>< a>元素进行美化，最基本的就i是垂直导航栏，其中要注意的地方现总结如下：
主体部分：

ul{
            list-style-type: none;        /*设置列表项没有前面的那个小圆点*/
            width:190px;                  /*宽度还是有必要的*/
            background-color: #f1f1f1;
            /*以上的设置我觉得是必要的，下面的则是为了美化效果额外添加的*/

            padding:0px;
            margin: 100px;
            font-size: 20px;
            font-weight: bold;
        }
        li a{
            display: block;            /*将每个链接设置为块级元素，这样单击一块区域也会有单击事件了*/
            text-decoration: none;     /*去掉链接默认的下划线*/
            height: 50px;
            line-height: 50px;         /*将行高与每个块的高度设置成一样使文字居中*/
            padding-left: 10px;
            color: black;
        }
        li a:hover{
            background-color: #555;
            color: white;
        }

此时的效果如下：
这里写图片描述

固定的垂直导航栏

在使用的时候，有时候我们会用到固定在网页一侧的导航栏，这个其实很简单，只要使用一个position属性，设置为fixed，并将高度设置为100%就可以了，但是需要注意的是position设置为固定之后，就会脱离正常的文档流，就像浮动元素一样，这样在继续添加内容时候会出现覆盖的情况，如果我们希望覆盖，那么可以使用z-index属性来控制哪一部分显示，如果不希望覆盖，那么可以使用padding属性来控制内容与导航栏的距离，例如，将上面代码中的margin，padding属性去掉并添加height，position：

ul{
            list-style-type: none;        /*设置列表项没有前面的那个小圆点*/
            width:190px;                  /*宽度还是有必要的*/
            background-color: #f1f1f1;
            /*以上的设置我觉得是必要的，下面的则是为了美化效果额外添加的*/
            height: 100%;
            position: fixed;
            font-size: 20px;
            font-weight: bold;
        }

效果如下：
这里写图片描述

这样导航栏就不会因为页面的滑动消失了

水平导航栏

水平导航栏的制作其实跟垂直的导航栏一样，只是改变一下列表项的浮动即可：

ul{
            list-style-type: none;        
            background-color: lightgray;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
        }
        li{
            float: left;                /*要使每一个列表块水平显示，要为列表项添加浮动效果*/
        }
        li a{
            display: block;            
            text-decoration: none;     
            width: 70px;
            line-height: 50px;         
            padding-left: 10px;
            color: black;
        }
        li a:hover{
            background-color: #555;
            color: white;
        }

效果：

这里写图片描述

除此之外，我们还可以对其中的某个列表项进行控制，只需要编写相应的样式即可
例如，让某一个列表项处于选中状态，并让另一个列表项显示在最右边：

<!DOCTYPE html>
<html>
<head>
    <title>CSS-Navigation</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style-type: none;        
            background-color: lightgray;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
        }
        li{
            float: left;                /*要使每一个列表块水平显示，要为列表项添加浮动效果*/
        }
        li a{
            display: block;            
            text-decoration: none;     
            width: 70px;
            line-height: 50px;         
            padding-left: 10px;
            color: black;
        }
        .active{
            background-color: lightgreen;
        }
        li a:hover:not(.active){
            background-color: #555;
            color: white;
        }
        .right{
            float: right;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="" class="active">ONE</a></li>
        <li><a href="">TWO</a></li>
        <li><a href="">THREE</a></li>
        <li><a href="">FOUR</a></li>
        <li class="right"><a href="">FIVE</a></li>  <!-- 注意这个类是放在li下的 -->
    </ul>

</body>
</html>

可以参考菜鸟教程的相关内容

MirrorN

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
CSS导航栏制作

垂直导航栏导航栏的制作主要是对HTML中的< ul>< a>元素进行美化，最基本的就i是垂直导航栏，其中要注意的地方现总结如下：主体部分：ul{ list-style-type: none; /*设置列表项没有前面的那个小圆点*/ width:190px; /*宽度还是有必要的*/
复制链接

扫一扫