任务1.1 完成指定布局

lymite

已于 2023-12-01 16:42:20 修改

阅读量361

点赞数 7

文章标签： html 前端 css

于 2023-12-01 15:27:49 首次发布

本文链接：https://blog.csdn.net/2301_79724334/article/details/134734763

版权

1.目标布局

在本次任务中，我们需要完成如下布局：

尺寸参考：令浏览器宽度为W，高度为H

绿色部分：宽度100%W，高度12.5%H 紫色部分：宽度20%W

2.相关思路

从上图中，不难看出，该网页主要有上下两个大的部分组成，分别是顶部的导航栏和下方的主体部分，在顶部的大盒子中，还嵌套了五个小盒子；在下方的主体部分中，左边是一个紫色的盒子，里面嵌套着三个小盒子，右边的黄色部分中，还包含了六个蓝色的小盒子，以上就是该布局大致的结构。

3.代码实现

一下是相关的代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 清除所有的内外边距，方便布局 */
        * {
            margin: 0;
            padding: 0;
        }

         /* 必须规定父元素body的高度，否则下面header的高度设置会出错 */
        body,
        html {
            width: 100%;
            height: 100%;
        }

        /* 使用无序列表来实现顶部5个盒子的效果 */
        ul {
            list-style: none;
        }

        /* 按题给要求设定顶部高度及宽度 */
        .header {
            width: 100%;
            height: 12.5%;
            background-color: #58b55a;
        }

         /* 将顶部的列表设置为弹性盒子，方便我们调整其中元素的位置和大小进行调整 */
        .header ul {
            display: flex;
            height: 100%;
        }

        .header ul li {
            height: 65%;
            width: 15%;
            margin: auto;
            background-color: #a52a2c;
        }

         /* 设置紫色部分宽度为浏览器的20% */
        .bd_left {
            float: left;
            width: 20%;
            height: 87.5%;
            background-color: #7370c7;
        }

        .bd_left ul li {
            width: 90%;
            margin: 7% auto;
            /* 通过内边距调整各个<li>之间的距离 */
            padding-top: 20%;  
            background-color: #f27243;
        }

        .bd_right {
            float: right;
            width: 80%;
            height: 87.5%;
            background-color: #fafa64;
        }

        .bd ul {
            width: 100;
        }

        .bd_right ul li {
            float: left;
            width: 25%;
            padding: 10% 0;
            margin: 4%;
            background-color: #608dc8;
        }
    </style>
</head>

<body>
    <div class="header">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="bd_left">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="bd_right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

成果展示

4.总结

在本次任务中，我使用了浮动布局、无序列表等知识点，其中，需要我们重点关注的是顶部的高度按照百分比设置时，如果没有给body和html标签加上height:100%，则会导致无效，宽度的设置则不需要。

lymite

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
任务1.1 完成指定布局

在本次任务中，我使用了浮动布局、无序列表等知识点，其中，需要我们重点关注的是顶部的高度按照百分比设置时，如果没有给body和html标签加上height:100%，则会导致无效，宽度的设置则不需要。
复制链接

扫一扫