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;
}