这种样式怎么做纯css的

有没有大神会啊 用ul li

圆角 div 就行了

线用border来做就行了。。圆点用border-radius来做，absolute定位

 <style>
    ul.list{border-left:solid 2px #666;padding-left:20px;margin:0px}
    ul.list li{position:relative;border-bottom:solid 1px #666;list-style:none}
    /*注意调整left值，为-(ul的padding-left+ul的border-left/2+原点宽度/2)px*/
    ul.list li div.circle{top:0px;left:-31px; position:absolute;width:20px;height:20px;border-radius:10px;-moz-border-radius:10px;-webikit-border-radius:10px;-o-border-radius:10px;background:#666;}
</style>
<ul class="list">
    <li>节点1<br />节点1<br />节点1<br />节点1<br />节点1<div class="circle"></div></li>
    <li>节点2<br />节点2<div class="circle"></div></li>
    <li>节点3<br />节点3<div class="circle"></div></li>
    <li>节点4<br />节点3<div class="circle"></div></li>
</ul>