新聞中心
zblog設置炫彩tag的方法
作者 / 無憂主機 時間 2015-12-12 16:31:49
tag標簽作為zblog程序網(wǎng)站里經(jīng)常被調用的熱門標簽，很多的無憂主機php空間站長朋友都會習慣性的把tag標簽設置在自己網(wǎng)站的右側區(qū)域，但是tag標簽的默認樣式太過簡漏和單調了，一眼看上去沒有什么亮點，無法吸引訪問者的眼球，為了讓tag標簽在網(wǎng)站里顯得更加的時尚富有個性，那么現(xiàn)在無憂主機小編就來教大家一種方法，可以讓tag標簽在網(wǎng)站的前端顯示出炫彩的特效，吸引訪問者的眼球，操作的方法如下。一般對網(wǎng)站效果的設置可以使用網(wǎng)站源碼加上css樣式進行組合設置，但是無憂主機小編要給大家實現(xiàn)的炫彩特效光是用網(wǎng)站的源碼和css樣式是設置不出來的，因為css樣式一般只能設置靜態(tài)樣式，很難實現(xiàn)動態(tài)樣式，所以在這里還需要用到js設置。 首先來設置js代碼，然后把它設置在模板頭部的head標簽前面，js代碼如下：
<script type="text/javascript">
$(document).ready(function() {
var tags_a = $("#tags a");
tags_a.each(function(){
var x = 9;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tags"+rand);
});
})
</script>
然后建立css樣式代碼來約束標簽基本的顯示位置和顯示的樣式，css代碼如下：
#tag a{height:20px;line-height:20px;padding-right:9px;font-size: 14px;padding-top: 3px;padding-bottom: 3px;padding-left: 9px;background-color: #66CCFF;color: #FFFFFF;}
#tag .tags0{background-color: #CC3300;}
#tag .tags1{background-color: #CC3300;}
#tag .tags2{background-color: #339900;}
#tag .tags3{background-color: #FF9933;}
#tag .tags4{background-color: #0099CC;}
#tag .tags5{background-color: #00CCCC;}
#tag .tags6{background-color: #99CC66;}
#tag .tags7{background-color: #339999;}
#tag .tags8{background-color: #FF6699;}
#tag a:hover{color:#FFFFFF;text-decoration:none;background-color: #18c1a0;}
接下來要做的就是在需要顯示這個標簽的位置的網(wǎng)站源碼中添加如下一段調用代碼進行調用，最后保存數(shù)據(jù)，刷新一下頁面就可以網(wǎng)站的前端看到效果了，調用代碼如下：
<dl id="tags"><dt>熱門標簽</dt>
<dd><ul>
zblogphp為“{module:tags}”/zblogasp為“<#CACHE_INCLUDE_TAGS#>”<div class="clear"></div>
</ul></dd>
</dl>
無憂主機相關文章推薦閱讀：
ZBLOG文件重建說明
ZBLOG調用熱門TAG標簽和隨機TAG標簽的方法
ZBLOG分類頁和內容頁分別調用當前欄目內容的標簽
本文地址：http://www.love62.cn/zblog/21138.html
