多彩圆点布局代码 CSS半透明的圆点徽章布局代码

徽章圆点，多种颜色可改变圆点颜色，纯div css代码布局的圆点徽章。

HTML代码

<p>
<div class="do a1"></div>
<div class="do a2"></div>
<div class="do a3"></div>
<div class="do a4"></div>
<div class="do a5"></div>
<div class="do a3 bantou"></div>
<div class="do a4 bantou"></div>
<div class="do a5 bantou"></div>
<div class="do dos a2"></div>
<div class="do dos a3"></div>
<div class="do dos a4"></div>
</p>
<p>
<div class="do a1"></div>
<div class="do a2"></div>
<div class="do a3"></div>
<div class="do a4"></div>
<div class="do a5"></div>
<div class="do a3 bantou"></div>
<div class="do a4 bantou"></div>
<div class="do a5 bantou"></div>
<div class="do dos a2"></div>
<div class="do dos a3"></div>
<div class="do dos a4"></div>
</p>

CSS代码：

body{ background:#FFF}
.do{display: inline-block;zoom: 1;width: 15px;height: 15px;margin: 5px;overflow: hidden;border-radius: 50%;font-size: 0;}
.a1{background:#F00}
.a2{background:#FF0}
.a3{background:#06F}
.a4{background:#390}
.a5{background:#000}
.bantou{opacity: .35;filter: alpha(opacity=35);-moz-opacity: .35}
.dos{ width:50px; height:50px}

在线演示地址：

运行代码试试

免费下载地址：

可用这些圆点点缀布局漂亮的网页。