利用純CSS實現彩色tag標簽,效果如下圖
代碼如下:
.items a:nth-child(9n){background-color: #4A4A4A;} .items a:nth-child(9n+1){background-color: #428BCA;} .items a:nth-child(9n+2){background-color: #5CB85C;} .items a:nth-child(9n+3){background-color: #D9534F;} .items a:nth-child(9n+4){background-color: #567E95;} .items a:nth-child(9n+5){background-color: #B433FF;} .items a:nth-child(9n+6){background-color: #00ABA9;} .items a:nth-child(9n+7){background-color: #B37333;} .items a:nth-child(9n+8){background-color: #FF6600;} .items a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 30px} .items a:hover{opacity: 1;filter:alpha(opacity=100);} .items h3{font-size: 18px;color: #666;border-bottom: 1px solid #eaeaea;background-color: #fbfbfb;margin: 0;padding: 11px 15px 10px;margin-bottom:15px}