简洁版小米侧边栏

最新推荐文章于 2022-04-19 14:41:49 发布

weixin_38602083

最新推荐文章于 2022-04-19 14:41:49 发布

阅读量2k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_38602083/article/details/103694776

版权

本文介绍了如何在网页中简洁地实现类似小米的侧边栏效果，提供了相关代码示例，并鼓励读者提问交流。

摘要由CSDN通过智能技术生成

如何在网页中实现下图所示的效果？

简洁版的代码看这里-->

<head>
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            font-family: 'Mcrosoft YaHei';
            text-align: left;
            color: #ffffff;
            text-indent: 2em;
            background-color: rgb(131, 126, 126);
            /* CSS没有提供文字居中的语法，使用小技巧实现，让文字的行高等于盒子的高度 */
            line-height: 40px;


        }

        a:hover {
            background-color: rgb(211, 103, 53);
        }
    </style>
</head>

<body>
    <a href=