【CSS小练习1】导航条

最新推荐文章于 2024-06-20 20:19:27 发布

Happy_Ranmo

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量146

点赞数

分类专栏：前端小练习文章标签： css html js css3

本文链接：https://blog.csdn.net/m0_51252051/article/details/115180551

版权

前端小练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.5.1导航条小练习

<style>
    *{
        padding:0;
        margin:0;
        
    }
    ul{
        width:1200px;
        height:48px;
        margin:100px auto;
    }
    ul li{
        float: left;
        background-color:lightgray;
        /* 设置垂直居中和行高 */
        line-height:48px;
        display:block;
        /* 此处设置了间隔 */
        padding:0 5%  
    }
    ul li a{
        /* 文字不能被选中 */
        user-select: none;
        display:block;
        text-decoration: none;
        color:gray;
        font-size: 20px;
    }
    ul li:hover{
        background-color:antiquewhite;
    }

</style>
<body>
    <div class="bar">
        <ul>
            <li><a>苹果</a></li>
            <li><a>小米</a></li>
            <li><a>华为</a></li>
            <li><a>微软</a></li>
            <li><a>Oppo</a></li>
            <li><a>宜家</a></li>
            <li><a>关于我们</a></li>
        </ul>
    </div>
</body>

在这里插入图片描述

Happy_Ranmo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS小练习1】导航条

<style> *{ padding:0; margin:0; } ul{ width:1200px; height:48px; margin:100px auto; } ul li{ float: left; background-color:lightgray; /* 设置垂直居中和行高 */
复制链接

扫一扫