简约侧边栏

Posted on 2022-01-27 23:45  AcTourist  阅读(46)  评论(0)    收藏  举报

一、实物图

 

 

二、重点难点分析

　　1.元素之间转换

 

　　display: inline-block; 是转换到块元素

　　display: inline-block; 是转换到行内元素

　　2.垂直居中效果

　　　　css里面没有垂直居中，可以设置为文字行内高度等于盒子的高度就可以实现垂直居中效果

三、代码展示

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁小米侧栏</title>
    <!-- 第一步：把a 行内元素转换成 块元素 -->
    <style>
        a{
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            text-decoration: none;
            font-size: 14px;
            color: #fff;
            text-indent: 2em;
            /* css里面没有垂直居中，只有文字行内高度等于盒子的高度就可以垂直居中 */
            line-height: 40px;
        }
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音箱</a>
</body>
</html>