HTML简易自适应布局

article/2025/10/24 18:54:31

效果图：

第一步：在body下先建三个块级，代码如下：

<div class="one">第1个元素中的内容</div>
<div class="two">第2个元素中的内容</div>
<div class="three">第3个元素中的内容</div>

第二步：设置全局边框，代码如下：

* {margin: 0;/*被设置的对象相对四周的边距是0*/padding: 0;/*内边距为0*/}

第三步：设置块级的高度以及水平方向布局，代码如下：

div {      /*<div> 定义文档中的分区或节*/height: 100px;float: left;/*float(浮动):用于元素水平方向的布局*/}

第四步：设置每个块级的宽度以及背景颜色，代码如下：

.one {width: 30%;background-color: #b6a2dc;}.two {width: 40%;background-color: #9ee2ac;}.three {width: 30%;background-color: #f69654;}

每个块级的宽度，所占比例、背景颜色可自己去调。

全文代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自适应布局</title><style>* {margin: 0;/*被设置的对象相对四周的边距是0*/padding: 0;/*内边距为0*/}div {      /*<div> 定义文档中的分区或节*/height: 100px;float: left;/*float(浮动):用于元素水平方向的布局*/}.one {width: 30%;background-color: #b6a2dc;}.two {width: 40%;background-color: #9ee2ac;}.three {width: 30%;background-color: #f69654;}</style>
</head>
<body><div class="one">第1个元素中的内容</div><div class="two">第2个元素中的内容</div><div class="three">第3个元素中的内容</div></body>
</html>