HTML+CSS 浮动布局练习：小米商城产品布局

最新推荐文章于 2022-07-26 15:24:58 发布

原创最新推荐文章于 2022-07-26 15:24:58 发布

· 2k 阅读

28 ·

版权

文章标签：

#css #html

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

小米商城产品布局

题目描述：使用CSS浮动布局完成如下效果。
在这里插入图片描述
思路：将整体看成一个大盒子，每个产品图片介绍看成一个小盒子，依次放进大盒子中，产品按照一定的间距隔开。可以使用无序列表来实现，将其设置成浮动布局就拥有行内块的特征了。需要值得注意的是：列表拥有默认的内外边距，需要将内外边距设置成0，li前面默认有项目符号，需去除。还需要注意权重问题。

实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城之商品布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1234px;
            height: 300px;
            background-color: rgba(0,0,0, 0.05);
            margin: 0 auto;
        }
        .box li {
            width: 234px;
            height: 300px;
            background-color: purple;
            float: left;
            margin-right: 16px;
        }
        .box .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li><img src="03-1.jpg" alt=""></li>
        <li><img src="03-2.png" alt=""></li>
        <li><img src="03-3.png" alt=""></li>
        <li><img src="03-4.png" alt=""></li>
        <li class="last"><img src="03-5.png" alt=""></li>
    </ul>
</body>
</html>