css 物流轨迹 |禁止页面滑动css

CSS作为前端技术之一，也能为物流轨迹的开发提供较好的支持。下面大家来看看使用CSS实现简单物流轨迹的过程。

/* CSS代码 */
.logistics {
position: relative;
padding: 1em;
}
.logistics:before,
.logistics:after {
content: '';
display: table;
clear: both;
}
.logistics .marker {
position: absolute;
top: 1em;
left: 0;
bottom: 1em;
width: 0.25em;
background-color: #bbb;
}
.logistics .marker:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0.75em;
height: 0.75em;
margin: -0.375em 0 0 0;
border-radius: 50%;
background-color: #bbb;
box-shadow: 0 0 0 2px #fff;
}
.logistics .step {
position: relative;
padding-left: 1.5em;
}
.logistics .step:before {
content: '';
position: absolute;
top: 1em;
left: 0;
width: 1em;
height: 0.25em;
background-color: #bbb;
z-index: -1;
}
.logistics .step:first-child:before {
top: 1.5em;
}
.logistics .step:last-child:before {
height: 1em
}
.logistics .status {
font-size: 1.25em;
font-weight: bold;
}
.logistics .date {
margin-top: 0.5em;
font-size: 0.875em;
color: #888;
}

大家先创建一个.logistics的容器，然后通过绝对定位创建一个.marker标记。这个标记中的:before伪元素又创建了一个小圆球，表示当前物流的最新位置。

接着，大家创建一个.step容器，用来放置物流每个阶段的详情信息。这个容器中通过:before伪元素创建了一条竖线表示物流的路径，然后通过padding-left属性让详情信息错开一点，增加可读性。

最后，大家可以在每个.step中放置物流状态名称和物流日期。这部分内容的样式可以根据需求进行调整。

以上就是CSS实现简单物流轨迹的基本思路，实现方法由于根据需求的不同而有所差别，可以根据实际情况进行调整。