纯css简单导航栏的制作及问题

最新推荐文章于 2023-04-05 17:37:57 发布

微风轻吟挽歌

最新推荐文章于 2023-04-05 17:37:57 发布

阅读量410

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_63558979/article/details/128882865

版权

导航栏的总体制作

效果演示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            color: aliceblue;
        }

        .demu>ul>li {
            float: left;
        }

        nav {
            position: relative;
            background-color: hsl(240, 67%, 53%);
            width: 100%;
            height: 40px;
            /* text-align: center; */
        }

        nav>ul {
            width: 900px;
            /* display: inline-block; */
            height: 40px;
            margin: auto;

        }


        .demu ul li a {
            width: 160px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            background-color: hsl(240, 67%, 53%);
            transition: all 2s;
        }

        .demu ul li a:hover {
            background-color: rgb(26, 102, 196);
        }

        .demu ul li:hover .suplist {
            display: block;
        }

        .suplist {
            position: absolute;
            width: 160px;
            display: none;
            opacity: .9;
        }

        .box {
            clear: both;
        }
       /* 此box为导航栏下方的div可用作测试，代码效果为清除浮动（float）  */

        .line {
            height: 40px;
            width: 1px;
            opacity: .6;
        }

        .one {
            background-image: linear-gradient(transparent, #031733, transparent);
        }

        .two {
            background-image: linear-gradient(transparent, #afc4e8, transparent);
        }
    </style>
</head>

<body>
    <nav class="demu">
        <ul>
            <li><a href="">首页</a></li>
            <li class="line one"></li>
            <li class="line two"></li>
            <li><a href="">其他部分</a>
                <ul class="suplist">
                    <li><a href="">下拉列表1</a></li>
                    <li><a href="">下拉列表2</a></li>
                    <li><a href="">下拉列表3</a></li>
                </ul>
            </li>
            <li class="line one"></li>
            <li class="line two"></li>
            <li><a href="">公司简介</a>
                <ul class="suplist">
                    <li><a href="">内容自改</a></li>
                    <li><a href="">下拉列表02</a></li>
                    <li><a href="">下拉列表03</a></li>
                </ul>
            </li>
            <li class="line one"></li>
            <li class="line two"></li>
            <li><a href="">摸鱼睡觉</a>
                <ul class="suplist">
                    <li><a href="">下拉列表01</a></li>
                    <li><a href="">下拉列表02</a></li>
                    <li><a href="">下拉列表03</a></li>
                </ul>
            </li>
            <li class="line one"></li>
            <li class="line two"></li>
            <li><a href="">导航栏</a>
                <ul class="suplist">
                    <li><a href="">下拉列表01</a></li>
                    <li><a href="">下拉列表02</a></li>
                    <li><a href="">下拉列表03</a></li>
                </ul>
            </li>

        </ul>
    </nav>
   
</body>

</html>

知识点小结

1. float 需要将li左浮动让所有导航栏在同一排

 .demu>ul>li {
            float: left;
        }

代码出自上方导航栏

效果演示：
未浮动

浮动后
请添加图片描述

2.a标签的css reset

 a {
            text-decoration: none;
            color: aliceblue;
            /* 设置颜色为白色以及去除下划线*/
        }

效果
在这里插入图片描述

3.下拉列表的隐藏以及位置固定

 .demu ul li:hover .suplist {
            display: block;
        }
/* demu为nav的类选择器在小编代码中两者为一个可以直接替换*/
        .suplist {
            position: absolute;
            /* 定位 */
            width: 160px;
            display: none;
            opacity: .9;
        }

4.渐变颜色的产生以及延时动画

        /* 颜色渐变*/
 .one {
            background-image: linear-gradient(transparent, #031733, transparent);
        }

        .two {
            background-image: linear-gradient(transparent, #afc4e8, transparent);
        }
 
      /* 延时动画*/
          div{
            width: 40px;
            height: 40px;
            background-color: aqua;
            transition: all 3s;
        }
        div:hover{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
        }

效果展示
在这里插入图片描述

5.导航栏不随页面的放缩移动，但始终处于屏幕中间位置

 nav>ul {
            width: 900px;
            /* display: inline-block; */
            height: 40px;
            margin: auto;

        }
```/*设置ul为固定宽度但是能装下所有的li */
 nav {
            position: relative;
            background-color: hsl(240, 67%, 53%);
            width: 100%;
            height: 40px;
            /* text-align: center; */
        }
/* 设置nav宽度为百分比*/