简洁版小米侧边栏

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

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

<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="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

有不懂的欢迎提问嘻嘻

来源：CSDN

作者：weixin_38602083

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

标签

小米

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!