您的位置:首页 > css拷用 > 小徽章 > 正文

多彩圆点布局代码 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}

在线演示地址:

运行代码试试

免费下载地址:

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

相关标签: 圆点 徽章
文章来源网址:www.thinkcss.com/kaoyong/1502.shtml

日期:2018-04-24 16:35 www.thinkcss.com thinkcss原创