小米侧边栏（盒子+浮动）

戴丫丫

于 2022-09-18 22:40:40 发布

阅读量339

点赞数

分类专栏： css html 文章标签： html css3 css html5

本文链接：https://blog.csdn.net/DAIYA_JIE/article/details/126924589

版权

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

html

12 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS3技术，详细解析了代码实现小米风格的侧边栏，包括盒子模型和浮动效果，帮助读者理解并创建类似布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <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>Document</title>
    <style type="">
        div{
            height: 420px;
            width:230px ;
    border: 0;
    color: #fff;
    background: rgba(105,101,101,.6);
    background-image: url();

}
        
        a{
            display:block ;
            background-color: #a5a3a3;
            text-indent: 2em;
            width: 230px;
            height: 40px;
            /* 文字垂直居中：行高等于的盒子的高度 */
            line-height: 40px;
            text-decoration: none;
            color: rgb(253, 252, 252);  
           
             
        }
    
        a:hover{
            background-color: #ff6700;
        }
       a:after{
            content:'\276F'; 
            float: right;
            padding-right: 30px;
        } 
    </style>
</head>

<body>
    <div style=" width: 230px;
    height: 20px;"></div>
    <div>
        <a href="#">手机 </a>
        <a href="#">电视</a>
        <a href="#">笔记本 平板</a>
        <a href="#">家电</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">电源 配件</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音箱</a>
        <a href="#">生活 箱包</a>
    </div>
</body>

</html>