请给我用html5写一个有三个横向的带图片的流程图
时间: 2023-11-27 19:52:36 浏览: 33
好的,以下是一个简单的示例代码,你可以根据自己的需要进行修改和美化:
```html
<!DOCTYPE html>
<html>
<head>
<title>流程图</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-top: 50px;
margin-bottom: 50px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
}
.step img {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.step p {
font-size: 20px;
font-weight: bold;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="step">
<img src="https://via.placeholder.com/100x100" alt="Step 1">
<p>Step 1</p>
</div>
<div class="step">
<img src="https://via.placeholder.com/100x100" alt="Step 2">
<p>Step 2</p>
</div>
<div class="step">
<img src="https://via.placeholder.com/100x100" alt="Step 3">
<p>Step 3</p>
</div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 `display: flex` 来创建一个横向的容器,并使用 `flex-direction: row` 来设置子元素的排列方向为水平。每个子元素都是一个 `div`,都包含一个图片和一个文本标题。我们使用了 `display: flex` 和 `flex-direction: column` 来让它们垂直居中,并使用 `align-items: center` 来让它们水平居中。你可以替换图片链接来展示你自己的图片,也可以根据需要调整样式。