css基础实例5-小米商城实例

╰+哭是因爲堅強的太久メ 2022-11-05 00:53 183阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70]  
要做成上图所示的样子，那么我们就得按照步骤慢慢来。  
步骤：  
1.了解整体的构成（拆分）  
2.从一个大的盒子拆分成不同的小的盒子  
比如手机图片就是一个盒子，文字是一个盒子，价格是一个盒子，分开来做  
3.再依次填充内容就行了  
**步骤第一步：整体框架布局**  
代码如下：

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70 1]  
我们可以看到有了一个大的盒子，用来装其他的小盒子  
**步骤2：添加其他小盒子**  
代码如下：

<!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>
            * {
         
                padding: 0;
                margin: 0;
            }
            body{
         
                background-color: #f5f5f5;
                text-align: center;
            }
            .box {
         
                width: 290px;
                height: 380px;
                background-color: #fff;
                margin: 100px auto;
            }
            .box img{
         
                width: 100%;
            }
            .mc{
         
                height: 30px;
                font-size: 18px;
                font-weight: 600;
                /*因为这个位置没有width属性，所以使用padiing时不会撑开盒子*/
                padding: 0 60px;
                margin-top: 5px;
                color: black;
            }
            .clq{
         
                font-size: 10px;
                color: gray;
                margin-top: 2px;
                padding: 0 60px;
            }
            .price{
         
                font-size: 18px;
                color: red;
                padding: 0 60px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="小米商城产品.png" alt="redmi k40">
            <p class="mc">redmi k40 pro 系列</p>
            <p class="clq">骁龙888 / E4 旗舰直屏</p>
            <p class="price">2799元起</p>
        </div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70]: /images/20221023/ccf34f5e7abc4d9a8e3d88bc885bb5aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70 1]: /images/20221023/29fdb4f29c0e42609a721cf4a76582b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70 2]: /images/20221023/8aa4547459a14ce293f217fa09e36aad.png