Css查漏补缺03-导航栏小例子 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏小实例</title>
    <style>
        *{
            /*通用选择器设置外边距*/
            margin:0;
        }


        .header{
            background-color:pink;
            height:50px;

        }

        .header ul{
            height:100%;
            /*默认和父元素是一样的高度*/
        }

        .header li{
            height:100%;
            list-style:none;
            /*作用是去掉li标签前的小圆点*/
            display:inline-block;
            /*作用是将在多行的层级元素设置为块级元素，保持在一行*/
        }

        .header li a{
            color:white;
            text-decoration:none;
            /*去掉下划线*/
            display:inline-block;
            padding:15px;
            height:20px;
            line-height:20px;
        }
    </style>
</head>
<body>
    <div>
        <header class="header">
            <nav>
                <ul>
                    <li>
                        <a href="">课程</a>
                    </li>
                    <li>
                        <a href="">刷题</a>
                    </li>
                    <li>
                        <a href="">个人中心</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

 

posted @ 2020-06-22 23:28  Tsui98'  阅读(175)  评论(0)    收藏  举报