先看图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>彩色标签tag样式</title>
<style type="text/css">
a {
text-decoration: none;
}
ul, ol {
list-style: none;
}
.links li {
float:left;
padding:5px
}
.links li a {
display:block;
height:28px;
line-height:28px;
padding:0 8px;
text-align:center;
font-size:14px;
white-space:nowrap;
background-color:#fff;
border:1px solid #d7d7d7;
border-radius:3px;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all .3s ease
}
.links li a:hover {
color:#0078dc;
border-color:#0078dc;
text-decoration:none
}
.tags {
padding:0 10px 10px
}
.tags li a {
color:#fff
}
.tags li a.c1 {
background-color:#f08282;
border-color:#f08282
}
.tags li a.c1:hover {
border-color:#f08282
}
.tags li a.c2 {
background-color:#f09664;
border-color:#f09664
}
.tags li a.c2:hover {
border-color:#f09664
}
.tags li a.c3 {
background-color:#f0be3c;
border-color:#f0be3c
}
.tags li a.c3:hover {
border-color:#f0be3c
}
.tags li a.c4 {
background-color:#aac864;
border-color:#aac864
}
.tags li a.c4:hover {
border-color:#aac864
}
.tags li a.c5 {
background-color:#64c864;
border-color:#64c864
}
.tags li a.c5:hover {
border-color:#64c864
}
.tags li a.c6 {
background-color:#64c8a0;
border-color:#64c8a0
}
.tags li a.c6:hover {
border-color:#64c8a0
}
.tags li a.c7 {
background-color:#82d2d2;
border-color:#82d2d2
}
.tags li a.c7:hover {
border-color:#82d2d2
}
.tags li a.c8 {
background-color:#8296e6;
border-color:#8296e6
}
.tags li a.c8:hover {
border-color:#8296e6
}
.tags li a.c9 {
background-color:#6eaadc;
border-color:#6eaadc
}
.tags li a.c9:hover {
border-color:#6eaadc
}
.tags li a.c10 {
background-color:#b98cdc;
border-color:#b98cdc
}
.tags li a.c10:hover {
border-color:#b98cdc
}
.tags li a.c11 {
background-color:#e68cdc;
border-color:#e68cdc
}
.tags li a.c11:hover {
border-color:#e68cdc
}
.tags li a.c12 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c12:hover {
border-color:#e678b4
}
.tags li a.c13 {
background-color:#f08282;
border-color:#f08282
}
.tags li a.c13:hover {
border-color:#f08282
}
.tags li a.c14 {
background-color:#f09664;
border-color:#f09664
}
.tags li a.c14:hover {
border-color:#f09664
}
.tags li a.c15 {
background-color:#f0be3c;
border-color:#f0be3c
}
.tags li a.c15:hover {
border-color:#f0be3c
}
.tags li a.c16 {
background-color:#aac864;
border-color:#aac864
}
.tags li a.c16:hover {
border-color:#aac864
}
.tags li a.c17 {
background-color:#64c864;
border-color:#64c864
}
.tags li a.c17:hover {
border-color:#64c864
}
.tags li a.c18 {
background-color:#64c8a0;
border-color:#64c8a0
}
.tags li a.c19 {
background-color:#64c8a0;
border-color:#64c8a0
}
.tags li a.c20 {
background-color:#82d2d2;
border-color:#82d2d2
}
.tags li a.c20:hover {
border-color:#82d2d2
}
.tags li a.c21 {
background-color:#8296e6;
border-color:#8296e6
}
.tags li a.c21:hover {
border-color:#8296e6
}
.tags li a.c22 {
background-color:#6eaadc;
border-color:#6eaadc
}
.tags li a.c22:hover {
border-color:#6eaadc
}
.tags li a.c23 {
background-color:#b98cdc;
border-color:#b98cdc
}
.tags li a.c23:hover {
border-color:#b98cdc
}
.tags li a.c24 {
background-color:#e68cdc;
border-color:#e68cdc
}
.tags li a.c24:hover {
border-color:#e68cdc
}
.tags li a.c25 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c26:hover {
border-color:#e678b4
}
.tags li a.c26 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c27 {
background-color:#f08282;
border-color:#f08282
}
.tags li a.c27:hover {
border-color:#f08282
}
.tags li a.c28 {
background-color:#f09664;
border-color:#f09664
}
.tags li a.c28:hover {
border-color:#f09664
}
.tags li a.c29 {
background-color:#f0be3c;
border-color:#f0be3c
}
.tags li a.c29:hover {
border-color:#f0be3c
}
.tags li a.c30 {
background-color:#aac864;
border-color:#aac864
}
.tags li a.c30:hover {
border-color:#aac864
}
.tags li a.c31 {
background-color:#64c864;
border-color:#64c864
}
.tags li a.c31:hover {
border-color:#64c864
}
.tags li a.c32 {
background-color:#64c8a0;
border-color:#64c8a0
}
.tags li a.c32:hover {
border-color:#64c8a0
}
.tags li a.c33 {
background-color:#82d2d2;
border-color:#82d2d2
}
.tags li a.c33:hover {
border-color:#82d2d2
}
.tags li a.c34 {
background-color:#8296e6;
border-color:#8296e6
}
.tags li a.c34:hover {
border-color:#8296e6
}
.tags li a.c35 {
background-color:#6eaadc;
border-color:#6eaadc
}
.tags li a.c35:hover {
border-color:#6eaadc
}
.tags li a.c36 {
background-color:#b98cdc;
border-color:#b98cdc
}
.tags li a.c36:hover {
border-color:#b98cdc
}
.tags li a.c37 {
background-color:#e68cdc;
border-color:#e68cdc
}
.tags li a.c37:hover {
border-color:#e68cdc
}
.tags li a.c38 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c38:hover {
border-color:#e678b4
}
.tags li a.c39 {
background-color:#f08282;
border-color:#f08282
}
.tags li a.c39:hover {
border-color:#f08282
}
.tags li a.c40 {
background-color:#82d2d2;
border-color:#82d2d2
}
.tags li a.c40:hover {
border-color:#82d2d2
}
.tags li a.c41 {
background-color:#8296e6;
border-color:#8296e6
}
.tags li a.c41:hover {
border-color:#8296e6
}
.tags li a.c42 {
background-color:#f09664;
border-color:#f09664
}
.tags li a.c42:hover {
border-color:#f09664
}
.tags li a.c43 {
background-color:#f0be3c;
border-color:#f0be3c
}
.tags li a.c43:hover {
border-color:#f0be3c
}
.tags li a.c44 {
background-color:#aac864;
border-color:#aac864
}
.tags li a.c44:hover {
border-color:#aac864
}
.tags li a.c45 {
background-color:#64c864;
border-color:#64c864
}
.tags li a.c45:hover {
border-color:#64c864
}
.tags li a.c46 {
background-color:#64c8a0;
border-color:#64c8a0
}
.tags li a.c46:hover {
border-color:#64c8a0
}
.tags li a.c47 {
background-color:#82d2d2;
border-color:#82d2d2
}
.tags li a.c47:hover {
border-color:#82d2d2
}
.tags li a.c48 {
background-color:#8296e6;
border-color:#8296e6
}
.tags li a.c48:hover {
border-color:#8296e6
}
.tags li a.c49 {
background-color:#6eaadc;
border-color:#6eaadc
}
.tags li a.c49:hover {
border-color:#6eaadc
}
.tags li a.c50 {
background-color:#b98cdc;
border-color:#b98cdc
}
.tags li a.c50:hover {
border-color:#b98cdc
}
.tags li a.c51 {
background-color:#e68cdc;
border-color:#e68cdc
}
.tags li a.c51:hover {
border-color:#e68cdc
}
.tags li a.c52 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c52:hover {
border-color:#e678b4
}
.tags li a.c53 {
background-color:#aac864;
border-color:#aac864
}
.tags li a.c53:hover {
border-color:#aac864
}
.tags li a.c54 {
background-color:#e68cdc;
border-color:#e68cdc
}
.tags li a.c54:hover {
border-color:#e68cdc
}
.tags li a.c55 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c56:hover {
border-color:#e678b4
}
.tags li a.c56 {
background-color:#e678b4;
border-color:#e678b4
}
.tags li a.c57 {
background-color:#f08282;
border-color:#f08282
}
.tags li a.c57:hover {
border-color:#f08282
}
.tags li a.c58 {
background-color:#f09664;
border-color:#f09664
}
.tags li a.c58:hover {
border-color:#f09664
}
.tags li a.c59 {
background-color:#f0be3c;
border-color:#f0be3c
}
.tags li a.c59:hover {
border-color:#f0be3c
}
.tags li a.c60 {
background-color:#aac864;
border-color:#aac864
}
.tags li a.c60:hover {
border-color:#aac864
}
.tags li a:hover {
color:#fff;
border-color:inherit;
opacity:0.8;
filter:alpha(opacity=80)
}
</style>
</head><body>
<h2>热门标签</h2>
<ul class=" links tags">
<li><a href="#" class="c1">蜂鸟</a></li>
<li><a href="#" class="c2">创意</a></li>
<li><a href="#" class="c3">自然</a></li>
<li><a href="#" class="c4">灯塔</a></li>
<li><a href="#" class="c5">美式足球</a></li>
<li><a href="#" class="c6">足球</a></li>
<li><a href="#" class="c7">体育</a></li>
<li><a href="#" class="c8">大猩猩</a></li>
<li><a href="#" class="c9">动物</a></li>
<li><a href="#" class="c10">白马</a></li>
<li><a href="#" class="c11">汽车</a></li>
<li><a href="#" class="c12">老爷车</a></li>
<li><a href="#" class="c13">怀旧</a></li>
<li><a href="#" class="c14">热气球</a></li>
<li><a href="#" class="c15">风景</a></li>
<li><a href="#" class="c16">草坪</a></li>
<li><a href="#" class="c17">大自然</a></li>
<li><a href="#" class="c18">建筑</a></li>
<li><a href="#" class="c19">城堡</a></li>
<li><a href="#" class="c20">夕阳</a></li>
<li><a href="#" class="c21">日落</a></li>
<li><a href="#" class="c22">沙滩</a></li>
<li><a href="#" class="c23">爱心</a></li>
<li><a href="#" class="c24">植被</a></li>
<li><a href="#" class="c25">奔驰</a></li>
<li><a href="#" class="c26">摩天大楼</a></li>
<li><a href="#" class="c27">灰色</a></li>
<li><a href="#" class="c28">双子塔</a></li>
<li><a href="#" class="c29">高楼大厦</a></li>
<li><a href="#" class="c30">丘陵</a></li>
<li><a href="#" class="c31">森林</a></li>
<li><a href="#" class="c32">大象</a></li>
<li><a href="#" class="c33">狮子</a></li>
<li><a href="#" class="c34">奥迪</a></li>
<li><a href="#" class="c35">跑车</a></li>
<li><a href="#" class="c36">漫画</a></li>
<li><a href="#" class="c37">卡通</a></li>
<li><a href="#" class="c38">飞机</a></li>
<li><a href="#" class="c39">空军</a></li>
<li><a href="#" class="c40">黄昏</a></li>
<li><a href="#" class="c41">战斗机</a></li>
<li><a href="#" class="c42">足球场</a></li>
<li><a href="#" class="c43">黑客</a></li>
<li><a href="#" class="c44">代码</a></li>
<li><a href="#" class="c45">机器人</a></li>
<li><a href="#" class="c46">未来</a></li>
<li><a href="#" class="c47">飞碟</a></li>
<li><a href="#" class="c48">火箭</a></li>
<li><a href="#" class="c49">猫</a></li>
</ul>
</body>
</html>
