目录
结果展示:![](https://i-blog.csdnimg.cn/blog_migrate/5db07e3991ace75a44c62f384a4fa7c8.png)
代码的逻辑和布局结构分析:
主要结构
#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>
实现相同效果