css div布局效果图
时间: 2024-01-04 20:19:50 浏览: 26
CSS的div布局是一种常用的网页布局方式,通过使用div元素和CSS样式来实现页面的布局效果。由于div本身没有过多的自带属性或样式,所以具有很高的可塑性,可以根据需要进行自定义样式和布局。
以下是一个简单的CSS div布局效果图的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```
上述代码中,我们使用了一个包含三个子元素的容器div,通过设置容器的display属性为flex,实现了子元素的水平布局。justify-content属性设置为space-between,使得子元素之间有间距。align-items属性设置为center,使得子元素在垂直方向上居中对齐。每个子元素都是一个宽高为100px的盒子,背景颜色为红色。
通过以上代码,可以实现一个简单的CSS div布局效果图。