文/王樂生
最近重新開始接觸CSS，挑戰(zhàn)了一下用CSS代碼拼出這樣的一個效果。
先附上效果圖
HTML代碼塊
<div class="picDiv">
????<div>
????????<div class="bigCircle">
????????????<div class="solidRing"></div>
????????</div>
????????<div class="sectionDiv">
????????????<div class="rod"></div>
????????</div>
????</div>
????<div style="margin-left:100px;position:absolute;margin-top:-12px;">
????????<div class="bigCircle">
????????????<div class="solidRing"></div>
????????</div>
????????<div class="sectionDiv">
????????????<div class="rod"></div>
????????</div>
????</div>
????<div style="margin-left:200px;position:absolute;margin-top:-12px;">
????????<div class="bigCircle">
????????????<div class="solidRing"></div>
????????</div>
????????<div class="sectionDiv">
????????????<div class="rod"></div>
????????</div>
????</div>
????<div style="margin-left:300px;position:absolute;margin-top:-12px;">
????????<div class="bigCircle">
????????????<div class="solidRing"></div>
????????</div>
????</div>
</div>
CSS代碼塊
.bigCircle{
????width: 10px;
?????height: 10px;
?????border: 1px solid #999999;
????border-radius: 50%;
}
.solidRing{
????width: 8px;
????height: 8px;
?????background: #999999;
????border-radius: 50%;
????margin-top:1px;
????margin-left:1px;
}
.rod{
?????width: 60px;
????height: 1px;
????background: #999999;
????margin-left:25px;
????float:right;
????display:inline;
}
.picDiv{
????margin-left:30px;
?????margin-top:30px;
????width:80px;
????height:16px;
????position:relative;
}
.sectionDiv{
????line-height:160px;
????overflow:hidden;
????position:absolute;
????margin-top:-6px;
}
