Question

我想知道如何制定时间表。我想制作一个这样的时间表： -

http://www.charitywater.org/projects/approach/

有谁能告诉我这个网站是如何制作这样一个垂直线和点？我似乎无法弄明白。

http://i.imgur.com/3slWsKj.png

由于

Answer 1

使用以下内容创建黑点：在CSS3伪元素之前：

.timeline-block:before {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    border-radius: 50%;
    bottom: 0;
    content: "";
    display: block;
    height: 10px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 10px;
}

使用橙色线：伪元素之后

.approach-section:after {
    background: url("/projects/images/end-timeline-drop.png") repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
    bottom: -64px;
    content: "";
    display: block;
    height: 66px;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 25px;
    z-index: 1;
}

关于伪元素：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

需要在HTML CSS中创建时间轴的方向

1 个答案: