css实例之简单好看的导航栏

最新推荐文章于 2023-09-20 08:50:45 发布

a_blue_bird

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量9.1k

点赞数 11

文章标签： CSS HTML

本文链接：https://blog.csdn.net/qq_35246867/article/details/79720246

版权

用css3制作的一个垂直简单的导航栏

效果如下图

HTML代码

    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">加入我们</a></li>
        <li class="move"></li>
    </ul>

CSS代码

<style>
        .nav{
            margin: 0;
            padding: 0;
            list-style: none;
            width: 200px;
        }
        .nav a{
            height: 30px;
            color: white;
            font-size: 24px;
            display: block;
            background-color: #8adde3;
            border-bottom:1px dashed #F3F3F3;
            text-decoration: none;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        ul:first-of-type a{
            border-top: 1px dashed #F3F3F3;
        }
        .nav a:hover{
            background-color: darkcyan;
        }
        .move{
            display: inline-block;
            background-color:#ff8a5e;
            border: 4px solid #ff8a5e;
            height: 45px;
            position: absolute;
            top: 7px;
            transition: top 0.4s ease-in-out;
            -webkit-transition: top 0.4s ease-in-out;
        }
        .nav li:nth-child(1):hover~.move {
            top: 7px;
        }
        .nav li:nth-child(2):hover~.move {
            top: 58px;
        }
        .nav li:nth-child(3):hover~.move {
            top: 108px;
        }
        .nav li:nth-child(4):hover~.move {
            top: 158px;
        }

    </style>

笔记：重要的就是左边的浮动块，首先把它设为内联块元素，采取绝对定位，然后用css的transition的属性，通过移动上下的位置来表现滑动的效果，通过hover属性来实现鼠标在导航栏上移动来影响左侧红色块。