css基础案例2-小米商城侧边栏

超、凢脫俗 2022-11-04 12:24 145阅读 0赞

案例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70]  
案例步骤：  
![在这里插入图片描述][20210302155348702.png]  
代码如下：

<!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>小米商城侧边栏</title>
        <style>
            a {
         
                width: 200px;
                height: 40px;
                display: block;
                background-color: #55585a;
                color: white;
                font-size: 14px;
                text-decoration: none;
                text-indent: 2em;
            }
            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>

结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70]: /images/20221023/f471c7ca36f74111ada0ce87d28d5f41.png
[20210302155348702.png]: /images/20221023/ea842bd352ac4d90a53c24f08174a4b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70 1]: /images/20221023/689580e28751476abf86b4ce38bfb518.png