导航跟随的显示

Original 2019-04-09 16:25:15 221
abstract:<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>     

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{

                margin:0;

                padding:0;

            }

            ul,li,ol{

                list-style:none;

            }

            .nav-list{

                width:600px;

                margin:0 auto;

            }

            .nav-list > li{

                display:inline-block;

                margin:5px -3px;

                padding:3px 15px;

                position:relative;

            }

            .nav-list > li:before{

                content:'';

                position:absolute;

                bottom:0px;

                width:0;

                left:50%;

                border-bottom:2px solid red;

                transition:0.2s all linear;

            }

            .nav-list > li:hover::before{

                left:0;

                width:100%;

            }

            .nav-list > li:hover + li::before{

                left:0;

            }

        </style>

    </head>

    <body>

        <ul class="nav-list">

            <li>导航导航1</li>

            <li>导航导航2</li>

            <li>导航导航3</li>

            <li>导航导航4</li>

        </ul>

    </body>

</html>



Correcting teacher:天蓬老师Correction time:2019-04-10 10:24:14
Teacher's summary:你的学生用户名, 怎么没有显示呢? 看一下你的用户设置, 设置一个名字

Release Notes

Popular Entries