div css圆环布局,CSS圆环样式

文/王乐生

最近重新开始接触CSS，挑战了一下用CSS代码拼出这样的一个效果。

先附上效果图

css圆环效果图

HTML代码块

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;

}