数据可视化之div大屏分区

xiaoyue666_

已于 2024-03-22 09:14:08 修改

阅读量670

点赞数 12

文章标签：笔记数据可视化 css

于 2024-03-17 11:06:05 首次发布

本文链接：https://blog.csdn.net/xiaoyue666_/article/details/135185608

版权

结果展示：

代码的逻辑和布局结构分析：

主要结构

#father：这是最外层的容器，背景色为 rgb(144, 201, 70)，占据了整个视图的宽度（1600px）和高度（900px）。

子容器

#head：代表头部区域，背景色为蓝色，占据 #father 的宽度的98%（通过边距实现），高度为20%。这部分位于页面的最上方。
#middle：代表中间主体区域，背景色为绿色，紧随 #head 区域之后，占据剩余的宽度和高度（减去 #head 的部分后，高度大约为78%）。它是容纳其他子容器的主要区域。

`#middle` 中的子容器

#child1、#child2 和 #child3：这些容器代表页面中部的三个主要列，背景色为 rgb(60, 133, 167)。它们分别通过左浮动和右浮动排列，各自含有孙容器（#childXsonY），模拟了一个多列布局。
- #child1 和 #child2：这两个容器位于 #middle 的左侧和中间，#child1 的宽度为29%，#child2 的宽度为28%，都有三个孙容器。
- #child3：位于 #middle 的右侧，宽度为37%，有两个孙容器。

孙容器

#child1son1、#child1son2、#child1son3、#child2son1、#child2son2、#child2son3、#child3son1、#child3son2：这些容器代表各自父容器中的内容块，背景色为 rgb(114, 37, 97)，宽度几乎填满其父容器（99%），高度根据它们的比例分配（大约32%或67%），以模拟不同的内容区块。

样式和布局特点

使用 margin 和 width 的百分比值进行布局，实现响应式设计。
通过 float 属性实现并排布局。
使用不同的背景色来区分不同的区域和层级。
孙容器的高度和边距设置模拟了多种内容排列方式。

这段代码的目的是通过纯 HTML 和 CSS 创建一个具有明确区域划分的静态网页布局，通过颜色区分不同的区域，适用于展示具有层级结构的信息。

代码：

<!DOCTYPE html>
<html lang="en">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background-color: white;
            width: 1600px;
            height: 900px; 
        }
        #father {
            background-color: rgb(144, 201, 70);
            width: 1600px;
            height: 900px;
        }
        #father #head {
            background-color: blue;
            margin-top: 1%;
            margin-left: 1%;
            margin-right: 1%;
            width: 98%;
            height: 20%;
        }
        #father #middle {
            clear: both;
            background-color: green;
            margin-top: 1%;
            margin-bottom: 1%;
            margin-left: 1%;
            margin-right: 1%;
            width: 98%;
            height: 78%;
        }
        #father #middle #child1 {
            float: left;
            background-color: rgb(60, 133, 167);
            width: 29%;
            height: 99%;
            margin-left: 1%;
            margin-right: 1%;
        }
        #father #middle #child1 #child1son1{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;
        }
        #father #middle #child1 #child1son2{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;
        }
        #father #middle #child1 #child1son3{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;
        }
        #father #middle #child3{
            float: right;
            background-color: rgb(60, 133, 167);
            margin-left: 1%;
            margin-right: 1%;
            width: 37%;
            height: 99%;
        }
        #father #middle #child3 {
            float: right;
            background-color: rgb(60, 133, 167);
            margin-left: 1%;
            margin-right: 1%;
            width: 37%;
            height: 99%;
        }
        #father #middle #child3 #child3son1{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;}

            #father #middle #child3 #child3son2{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 67%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;}

        #father #middle #child2{
            float: right;
            background-color: rgb(60, 133, 167);
            margin-left: 1%;
            margin-right: 1%;
            width: 28%;
            height: 99%;
        }
        #father #middle #child2 #child2son1{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;
        }
        #father #middle #child2 #child2son2{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;
        }
        #father #middle #child2 #child2son3{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 2%;
        }
    </style>
</head>
    <meta charset="UTF-8">
 
<body>
    <div id="father">
        <div id="head"></div>
        <div id="middle">
            <div id="child1">
                <div id="child1son1"></div>
                <div id="child1son2"></div>
                <div id="child1son3"></div>
            </div>
            <div id="child2">
                <div id="child2son1"></div>
                <div id="child2son2"></div>
                <div id="child2son3"></div>
            </div>
            <div id="child3">
                <div id="child3son1"></div>
                <div id="child3son2"></div>
            </div>
        </div>
        
    </div>
</body>
</html>

二编：

使用margin：上右下左；

<!DOCTYPE html>
<html lang="en">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background-color: white;
            width: 1600px;
            height: 900px; 
        }
        #father {
            background-color: rgb(144, 201, 70);
            width: 1600px;
            height: 900px;
        }
        #father #head {
            background-color: blue;
            margin:1%,1%,0,1%;
            width: 98%;
            height: 20%;
        }
        #father #middle {
            clear: both;
            background-color: green;
            margin: 1% 1% 1% 1%;
            width: 98%;
            height: 78%;
        }
        #father #middle #child1 {
            float: left;
            background-color: rgb(60, 133, 167);
            width: 29%;
            height: 99%;
            margin: 0 1% 0 1%;
        }
        #father #middle #child1 #child1son1{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
        #father #middle #child1 #child1son2{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
        #father #middle #child1 #child1son3{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
        #father #middle #child3{
            float: right;
            background-color: rgb(60, 133, 167);
            margin: 0 1% 0 1%;
            width: 37%;
            height: 99%;
        }
        #father #middle #child3 {
            float: right;
            background-color: rgb(60, 133, 167);
            margin: 0 1% 0 1%;
            width: 37%;
            height: 99%;
        }
        #father #middle #child3 #child3son1{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
 
            #father #middle #child3 #child3son2{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 67%;
            margin: 0 1% 2% 1%;
        }
 
        #father #middle #child2{
            float: right;
            background-color: rgb(60, 133, 167);
            margin: 0 1% 0 1%;
            width: 28%;
            height: 99%;
        }
        #father #middle #child2 #child2son1{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
        #father #middle #child2 #child2son2{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
        #father #middle #child2 #child2son3{
            float: left;
            background-color: rgb(114, 37, 97);
            width: 99%;
            height: 32%;
            margin: 0 1% 2% 1%;
        }
    </style>
</head>
    <meta charset="UTF-8">
 
<body>
    <div id="father">
        <div id="head"></div>
        <div id="middle">
            <div id="child1">
                <div id="child1son1"></div>
                <div id="child1son2"></div>
                <div id="child1son3"></div>
            </div>
            <div id="child2">
                <div id="child2son1"></div>
                <div id="child2son2"></div>
                <div id="child2son3"></div>
            </div>
            <div id="child3">
                <div id="child3son1"></div>
                <div id="child3son2"></div>
            </div>
        </div>
        
    </div>
</body>
</html>

实现相同效果

xiaoyue666_

关注

12
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
数据可视化之div大屏分区

这段代码的目的是通过纯 HTML 和 CSS 创建一个具有明确区域划分的静态网页布局，通过颜色区分不同的区域，适用于展示具有层级结构的信息。的宽度的98%（通过边距实现），高度为20%。这部分位于页面的最上方。的部分后，高度大约为78%）。它是容纳其他子容器的主要区域。：代表中间主体区域，背景色为绿色，紧随。区域之后，占据剩余的宽度和高度（减去。：代表头部区域，背景色为蓝色，占据。
复制链接

扫一扫