html实现五块等分正方形
时间: 2024-09-29 09:09:28 浏览: 27
HTML本身并不是用来直接创建图形元素的,它主要用于标记网页内容结构。但是你可以通过CSS来创建等分的正方形,尤其是结合HTML的`<div>`标签。下面是一个简单的例子,使用CSS的Flexbox布局来实现五个等宽的正方形:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: space-between; /* 等分排列 */
width: 100%; /* 设置容器宽度 */
}
.square {
width: 20%; /* 占据总宽度的20%,共5个小方块 */
height: 100px; /* 自定每个正方形的高度 */
background-color: #ccc; /* 颜色示例 */
border: 1px solid black; /* 边框效果 */
margin-bottom: 10px; /* 间距 */
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
```
在这个例子中,`.container`包含五个`.square`,它们会按照设置的空间分配(`justify-content: space-between`)均匀分布,并各自占据总宽度的20%。
阅读全文