CSS导航栏制作

来源：互联网发布：如果当时知乎编辑：程序博客网时间：2024/06/05 09:17

垂直导航栏

导航栏的制作主要是对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>

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

阅读全文

0 0