漂亮实用的彩色TAG标签代码,博客风格首选TAG标签代码

文章来源:公众号:麻瓜族magua12138 作者:麻瓜君 热度: 2016-07-28 15:20
dedecms,织梦教程,网络营销

 


今天给大家带来的教程应该很是使用的,从截图上来看,大家应该明白,这种彩色标签的表现在博客网站很常见,只是实现起来看不出门道,经过朋友指点总算找到了教程,发给大家:
首先在 /include/common.func.php 中加入如下函数:

1
2
3
4
5
6
function getTagStyle() {  
        $minFontSize=8; //最小字体大小,可根据需要自行更改  
        $maxFontSize=18; //最大字体大小,可根据需要自行更改  
        return 'font-size:'.($minFontSize+lcg_value()*(abs($maxFontSize-$minFontSize))).'px;  
        color:#'
.dechex(rand(0,255)).dechex(rand(0,196)).dechex(rand(0,255));  
}

然后再模板调用页面添加TAG标签代码:

1
2
3
{dede:tag row='45' getall='1' sort='hot'} 
    <a href='[field:link/]' title="[field:tag /]([field:total /])" style="[field:total runphp=yes]@me=getTa gStyle();[/field:total]">[field:tag /]</a> 
{/dede:tag}

最后是CSS的控制代码,我测试过,没有这个CSS代码,不能够实现,虽然对上面的函数代码不清楚,但是CSS必不可少:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.d_tags {
    padding:12px 10px 15px 20px
}
.d_tags a:nth-child(9n) {
    background-color:#4a4a4a
}
.d_tags a:nth-child(9n+1) {
    background-color:#15a287
}
.d_tags a:nth-child(9n+2) {
    background-color:#5cb85c
}
.d_tags a:nth-child(9n+3) {
    background-color:#d9534f
}
.d_tags a:nth-child(9n+4) {
    background-color:#567e95
}
.d_tags a:nth-child(9n+5) {
    background-color:#b433ff
}
.d_tags a:nth-child(9n+6) {
    background-color:#00a67c
}
.d_tags a:nth-child(9n+7) {
    background-color:#b37333
}
.d_tags a:nth-child(9n+8) {
    background-color:#f60
}
.d_tags a {
    width:44%;
    opacity:.7;
    filter:alpha(opacity=80);
    color:#fff;
    background-color:#00a67c;
    display:inline-block;
    margin:0 5px 5px 0;
    padding:2px 6px;
    line-height:21px
}
.d_tags a:hover {
    opacity:1;
    filter:alpha(opacity=100)
}

代码很实用,今天在这里算是给大家谋求个福利,如果你有更好的代码教程,请分享给我们,帮助更多的新手站长。

 

 

若要转载麻瓜君的文章

记得请署名噢...

 

投稿邮箱:

ceo@magua12138.com

 

长按二维码“识别”关注


更多内容请登录:
www.magua12138.com

 

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
回到顶部