简单导航栏

最新推荐文章于 2023-10-13 10:43:55 发布

HJX—

最新推荐文章于 2023-10-13 10:43:55 发布

阅读量94

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Eoning/article/details/121644404

版权

欢迎各位复制粘贴

往下看

网页body内容：

<body>
    <div class="one">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">客户端</a>
    </div>
</body>

网页css内容：

    <style>
        .one{
        height: 41px;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        background-color: #fcfcfc;
        line-height: 41px;
        }
        .one a{
            display: inline-block;
            height: 41px;/*鼠标经过时的背景高度*/
            font-size: 20px;
            color: #4c4c4c;
            padding: 0 20px; 
            text-decoration: none;/*去掉下划线*/
        }
        .one a:hover{
            background-color: #eee;
           color: rgb(15, 14, 13);/*鼠标经过时的字体颜色*/
        }
    </style>

最后效果图：