分成多个块的完整代码
时间: 2023-07-03 08:24:13 浏览: 37
以下是一个使用`<div>`元素将页面分成多个块的完整示例代码,包括CSS样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>分块示例</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.block {
flex-basis: calc(33.33% - 20px);
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<h2>块1</h2>
<p>这是块1的内容。</p>
</div>
<div class="block">
<h2>块2</h2>
<p>这是块2的内容。</p>
</div>
<div class="block">
<h2>块3</h2>
<p>这是块3的内容。</p>
</div>
<div class="block">
<h2>块4</h2>
<p>这是块4的内容。</p>
</div>
<div class="block">
<h2>块5</h2>
<p>这是块5的内容。</p>
</div>
<div class="block">
<h2>块6</h2>
<p>这是块6的内容。</p>
</div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了`display: flex;`和`flex-wrap: wrap;`来将`<div class="container">`元素的子元素排列成多行。每个块使用了`<div class="block">`元素,并使用了`flex-basis`属性来指定每个块的基础大小,以及`margin`和`padding`属性来添加间距和内边距。最后,我们使用了`border`属性来添加边框。