指定布局-第一次任务

最新推荐文章于 2024-09-10 18:37:52 发布

YUVAL_

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量240

点赞数 3

文章标签： css javascript 前端 html

本文链接：https://blog.csdn.net/2302_80485795/article/details/134697753

版权

成果展示

效果预览:

源码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定布局-第一次任务</title>
    <style>
        .green-box {
            width: 100%;
            height: 12.5%;
            background-color: #89ec66;
            /* 使用颜色代码上色 */
        }

        .purple-box {
            float: left;
            /* 加入浮动属性 */
            width: 25%;
            height: 87.5%;
            background-color: #b868d0;
        }

        .yellow-box {
            float: left;
            width: 75%;
            height: 87.5%;
            background-color: yellow;
        }

        .red {
            float: left;
            width: 350px;
            height: 80px;
            margin: 20px;
            /* 使用margin属性给盒子之间加上空隙 */
            background-color: red;
        }

        .orange {
            float: left;
            width: 350px;
            height: 80px;
            margin: 30px;
            background-color: orange;
        }

        .sky-blue {
            float: left;
            width: 350px;
            height: 249px;
            margin: 30px;
            background-color: skyblue;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            /* 让布局占满浏览器页面 */
            margin: 0;
            padding: 0;
            /* 清除浏览器页面默认的内外边距 */
        }
    </style>
</head>

<body>
    <div class="green-box">
        <div class="red"></div>
        <div class="red"></div>
        <div class="red"></div>
    </div>
    <div class="purple-box">
        <div class="orange"></div>
        <div class="orange"></div>
        <div class="orange"></div>
    </div>
    <div class="yellow-box">
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
    </div>

</body>

</html>

完成过程

整体框架搭建:

先创建绿色和紫色两个大盒子, 使用标准流处理即可，形成一上一下的布局，然后再给黄色大盒子添加float属性(左浮动右浮动均可)，便可形成大致框架。

值得注意的是这三个大盒子都使用了百分比%来控制高度和宽度。

.green-box {
            width: 100%;
            height: 12.5%;
            background-color: #89ec66;
            /* 使用颜色代码上色 */
        }

        .purple-box {
            float: left;
            /* 加入浮动属性 */
            width: 25%;
            height: 87.5%;
            background-color: #b868d0;
        }

        .yellow-box {
            float: left;
            width: 75%;
            height: 87.5%;
            background-color: yellow;
        }

剩余部分:

依次在父盒子里面放入若干小盒子，然后使用浮动float属性来使他们并列摆放。
对于紫色父盒子，同样也可以将小盒子用float属性摆放，这是因为当父盒子一行的空间不足以放下全部小盒子时，小盒子的摆放会自动换行。
当然, 能使用float属性完成上下摆放这一情况只是运用到了盒子自动换行的性质，标准的写法还是按照标准流会更好一点。
在控制小盒子的大小时, 使用百分比和像素均可。

        .red {
            float: left;
            width: 350px;
            height: 80px;
            margin: 20px;
            /* 使用margin属性给盒子之间加上空隙 */
            background-color: red;
        }

        .orange {
            float: left;
            width: 350px;
            height: 80px;
            margin: 30px;
            background-color: orange;
        }

        .sky-blue {
            float: left;
            width: 350px;
            height: 249px;
            margin: 30px;
            background-color: skyblue;
        }

接下来就可以在html部分使用div来摆放各个类了。

<body>
    <div class="green-box">
        <div class="red"></div>
        <div class="red"></div>
        <div class="red"></div>
    </div>
    <div class="purple-box">
        <div class="orange"></div>
        <div class="orange"></div>
        <div class="orange"></div>
    </div>
    <div class="yellow-box">
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
        <div class="sky-blue"></div>
    </div>

</body>