当前位置 博文首页 > 奶盖不加糖的博客:练习:新浪导航栏

    奶盖不加糖的博客:练习:新浪导航栏

    作者:[db:作者] 时间:2021-08-29 13:21

    新浪导航栏的核心就是因为里面的数字不一样多,所以不方便给宽度,还是给padding,撑开盒子

    <head>
        <title>新浪导航栏</title>
        <style>
            .nav {
                height: 41px;
                background-color: #fcfcfc;
                /*上边框 3像素 实线*/
                border-top: 3px solid #ff8500;
                /* 下边框 1像素 实线*/
                border-bottom:1px solid #edeef0;
            }
    
            .nav a{
                /*转换为行内块*/
                display: inline-block;
                /*高度*/
                height: 41px;
                /*行高  行高等于高,文字垂直居中*/
                line-height: 41px;
                color:#4c4c4c;
                /*代表上下是0 左右是20 内边距*/
                padding:0 20px;
                /*取消下划线*/
                text-decoration:none;
                /*设置字体*/
                font-size: 12px;
            }
            .nav a:hover {
                /*鼠标经过时的背景颜色*/
                background-color: #eeeeee;
            }
    
        </style>
    </head>
    <body>
        <div class="nav">
           <a href="#">设为首页</a>
           <a href="#">手机新浪网</a>
           <a href="#">移动客户端</a>
           <a href="#">博客</a>
           <a href="#">微博</a>
           <a href="#">关注我</a>
        </div>    
    </body>
    </html>
    

    展示图:在这里插入图片描述

    cs