HTML+CSS浮动布局练习：小米商城手机模块

最新推荐文章于 2022-08-03 15:52:54 发布

睡觉对我来说很重要

最新推荐文章于 2022-08-03 15:52:54 发布

阅读量3.1k

点赞数 8

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_43287888/article/details/107832270

版权

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用浮动布局技巧实现的小米商城手机模块设计，通过一个大盒子分为左右两部分，左边放置图片，右边则由8个小模块组成，详细讲解了如何利用margin调整模块间距。

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

小米商城手机模块

题目：利用所学浮动知识点，实现如下效果。
在这里插入图片描述
思路：整体看成一个大盒子，大盒子分成左右两大块，左边盒子放置一张图片，右边又分成8个小模块，利用margin设计两个模块间的距离。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机模块</title>
    <style>
        .box {
            height: 615px;
            width: 1227px;
            margin: 0 auto;
        }
        .left {
            height: 615px;
            width: 235px;
            background-color: gray;
            float: left;
        }
        .right {
            height: 615px;
            width: 992px;
            background-color: rgba(0,0,0, 0.05);
            float: left;
        }
        .right>div {
            height: 300px;
            width: 235px;
            background-color: #fff;
            float: left;
            margin-left: 13px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"><img src="04-1.png" alt=""></div>
        <div class="right">
            <div><img src="04-2.png" alt=""></div>
            <div><img src="04-3.png" alt=""></div>
            <div><img src="04-4.png" alt=""></div>
            <div><img src="04-5.png" alt=""></div>
            <div><img src="04-6.png" alt=""></div>
            <div><img src="04-7.png" alt=""></div>
            <div><img src="04-8.png" alt=""></div>
            <div><img src="04-9.png" alt=""></div>
        </div>
    </div>
</body>
</html>