html公交竖直路线图
时间: 2023-07-05 16:32:19 浏览: 92
您可以使用 HTML 和 CSS 来创建公交竖直路线图。以下是一个简单的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>公交竖直路线图</title>
<style>
.container {
display: flex;
}
.line {
width: 50px;
height: 300px;
border: 1px solid black;
position: relative;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.station {
width: 20px;
height: 100px;
background-color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.station.top {
top: 0;
}
.station.bottom {
bottom: 0;
}
.station-label {
font-size: 12px;
margin-top: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="line">
<div class="station top"></div>
<div class="station-label">站点1</div>
<div class="station"></div>
<div class="station-label">站点2</div>
<div class="station"></div>
<div class="station bottom"></div>
<div class="station-label">站点3</div>
</div>
<div class="line">
<div class="station top"></div>
<div class="station-label">站点1</div>
<div class="station"></div>
<div class="station-label">站点2</div>
<div class="station"></div>
<div class="station bottom"></div>
<div class="station-label">站点3</div>
</div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 Flexbox 布局来将两个公交路线放在同一行。每个公交路线都是一个 div 元素,宽度为 50 像素,高度为 300 像素。我们使用绝对定位和 transform 属性来将站点垂直居中。我们还添加了一个类名为 top 或 bottom 的元素,以区分站点是在公交路线的顶部还是底部。最后,我们添加了一个类名为 station-label 的元素来显示站点名称。您可以根据需要修改这些样式和内容。
阅读全文