使用HTML5+CSS进行简单布局。
时间: 2023-12-31 07:04:17 浏览: 33
好的,下面是一个简单的HTML5+CSS布局示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单布局示例</title>
<style>
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background-color: #ccc;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
</body>
</html>
```
这个示例中,我们创建了一个容器 `.container`,并使用 `flex` 布局来实现子元素 `.box` 的对齐和分布。容器具有以下样式:
- `width: 80%;`:使容器的宽度为父元素的80%。
- `margin: 0 auto;`:使容器水平居中。
- `display: flex;`:启用flex布局。
- `flex-wrap: wrap;`:让子元素换行显示。
- `justify-content: space-between;`:让子元素在容器中均匀分布,并在它们之间留出一些空间。
- `align-items: center;`:使子元素在容器中垂直居中。
子元素 `.box` 具有以下样式:
- `width: 200px;` 和 `height: 200px;`:使每个子元素的宽度和高度相等。
- `background-color: #ccc;`:设置背景颜色为灰色。
- `margin-bottom: 20px;`:让每个子元素之间有一些垂直间距。
- `display: flex;`:启用flex布局。
- `align-items: center;` 和 `justify-content: center;`:使子元素的内容在元素内居中显示。
- `font-size: 24px;` 和 `color: #fff;`:设置文本大小和颜色。