用线连接元素

Question

我想用水平白线连接引脚元素和时间线元素。有谁知道如何使用JavaScript和CSS来做到这一点？请参阅以下参考链接。

在此先感谢。

• 迈克

http://mikedemar.com/devresources/timeline/example.png

http://mikedemar.com/devresources/timeline/index.html

Answer 1

把标志的容器overflow: hidden，并使用伪元素来绘制线条：

HTML：

<ul> 
    <li class="handleicon"></li> 
    <li class="handleicon"></li> 
    <li class="handleicon"></li> 
</ul> 

CSS：

ul { 
    position: relative; 
    overflow: hidden; 
    height: 260px; 
} 

.handleicon { 
    position: absolute; 
    width: 33px; 
    height: 50px; 
    background: url(images/handlered.png); 
} 
.handleicon:before { 
    content: ''; 
    width: 1px; 
    height: 400px; 
    background: #fff; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
} 

这里的小提琴：http://jsfiddle.net/AAPSg/