制作简洁版小米侧边栏

制作一个如图所示的小米侧边栏：

（1）首先使用HTML设置文本：

<a href="#">手机 电话卡</a>

    <a href="#">电视 盒子</a>

    <a href="#">笔记本 平板</a>

    <a href="#">出行 穿戴</a>

    <a href="#">智能 路由器</a>

    <a href="#">健康 儿童</a>

    <a href="#">耳机 音响</a>

 

 

（2）由于a标签是行内标签，我们需要通过CSS把a标签改为块标签，使其独占一行。

a {

            display: block;

        }

 

（3）通过CSS设置把a标签的下划线去掉并且设置高度、宽度、字体颜色 、字体大小、背景颜色以及鼠标经过时的背景颜色。（当设置行高与高度相同像素时，可以使文字垂直居中）

a {

            display: block;

            text-decoration: none;

            width: 230px;

            height: 40px;

            background-color: #55585a;

            font-size: 14px;

            color: #fff;    

            line-height: 40px;

            text-indent: 2em; 

        }

        a:hover {

            background-color: #ff6700;

        }

最终实现：