tag標簽作為zblog程序網(wǎng)站里經(jīng)常被調(diào)用的熱門標簽，很多的無憂主機php空間站長朋友都會習(xí)慣性的把tag標簽設(shè)置在自己網(wǎng)站的右側(cè)區(qū)域，但是tag標簽的默認樣式太過簡漏和單調(diào)了，一眼看上去沒有什么亮點，無法吸引訪問者的眼球，為了讓tag標簽在網(wǎng)站里顯得更加的時尚富有個性，那么現(xiàn)在無憂主機小編就來教大家一種方法，可以讓tag標簽在網(wǎng)站的前端顯示出炫彩的特效，吸引訪問者的眼球，操作的方法如下。一般對網(wǎng)站效果的設(shè)置可以使用網(wǎng)站源碼加上css樣式進行組合設(shè)置，但是無憂主機小編要給大家實現(xiàn)的炫彩特效光是用網(wǎng)站的源碼和css樣式是設(shè)置不出來的，因為css樣式一般只能設(shè)置靜態(tài)樣式，很難實現(xiàn)動態(tài)樣式，所以在這里還需要用到j(luò)s設(shè)置。 首先來設(shè)置js代碼，然后把它設(shè)置在模板頭部的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)站源碼中添加如下一段調(diào)用代碼進行調(diào)用，最后保存數(shù)據(jù)，刷新一下頁面就可以網(wǎng)站的前端看到效果了，調(diào)用代碼如下：

<dl id="tags"><dt>熱門標簽</dt>
<dd><ul>
zblogphp為“{module:tags}”/zblogasp為“<#CACHE_INCLUDE_TAGS#>”<div class="clear"></div>
</ul></dd>
</dl>

無憂主機相關(guān)文章推薦閱讀： ZBLOG文件重建說明 ZBLOG調(diào)用熱門TAG標簽和隨機TAG標簽的方法 ZBLOG分類頁和內(nèi)容頁分別調(diào)用當(dāng)前欄目內(nèi)容的標簽

本文地址：http://www.gle-technology.com/zblog/21138.html

上一篇: WordPress與HTTP 500錯誤的問題
下一篇: 從代碼內(nèi)部實現(xiàn)zblog內(nèi)容頁描述的方法