表格布局，浮动布局，流体布局

最新推荐文章于 2023-04-21 14:26:38 发布

FLY_Keep_going

最新推荐文章于 2023-04-21 14:26:38 发布

阅读量471

点赞数

分类专栏： HTML5 文章标签： HTML5标签布局流体布局表格布局浮动布局

本文链接：https://blog.csdn.net/qq_41979219/article/details/79998849

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表格布局：

<body>

<table border="1">
<tr>
<td colspan="2" class="header">header</td>
</tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr>
<td colspan="2" class="footer">footer</td>
</tr>
</table>

</body>

@charset "utf-8";
body{
margin: 0;
}

table {
width: 100%;//流体布局设置宽度为百分之百就可以了
margin: 0 auto;
border-collapse: collapse;
}

.header {
height: 120px;
background-color: olive;
}
.aside {
width: 200px;
height: 500px;
background-color: purple;
}
.section {
width: 760px;
height: 500px;
background-color: maroon;
}
.footer {
height: 120px;
background-color: gray;

}

浮动布局：

<body>

<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>

</body>

body{
margin: 0px;
width: 1800px;
margin: 0 auto;
}

header{
background-color: red;
width: 1800px;
height: 300px;
}

aside {
width: 600px;
height: 600px;
background-color: #06f;
float: left;
}

section {
width:1200px;
height: 600px;
background-color: green;
float: right;
}
footer {
width: 1800px;
height: 180px;
background-color: #666;
clear: both;//清除浮动，不然footer会埋在section下面

}

把宽度修改成百分比就会是流体布局：

流体布局：

body{
margin: 0px;
width: 100%；
margin: 0 auto;
}

header{
background-color: red;
width: 100%
height: 300px;
}

aside {
width: 30%;
height: 600px;
background-color: #06f;
float: left;
}

section {
width:70%%；
height: 600px;
background-color: green;
float: right;
}
footer {
width: 100%；
height: 180px;
background-color: #666;
clear: both;//清除浮动，不然footer会埋在section下面

}