新闻中心

zblog设置炫彩tag的方法

作者 / 无忧主机时间 2015-12-12 16:31:49

tag标签作为zblog程序网站里经常被调用的热门标签，很多的无忧主机php空间站长朋友都会习惯性的把tag标签设置在自己网站的右侧区域，但是tag标签的默认样式太过简漏和单调了，一眼看上去没有什么亮点，无法吸引访问者的眼球，为了让tag标签在网站里显得更加的时尚富有个性，那么现在无忧主机小编就来教大家一种方法，可以让tag标签在网站的前端显示出炫彩的特效，吸引访问者的眼球，操作的方法如下。一般对网站效果的设置可以使用网站源码加上css样式进行组合设置，但是无忧主机小编要给大家实现的炫彩特效光是用网站的源码和css样式是设置不出来的，因为css样式一般只能设置静态样式，很难实现动态样式，所以在这里还需要用到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;}

接下来要做的就是在需要显示这个标签的位置的网站源码中添加如下一段调用代码进行调用，最后保存数据，刷新一下页面就可以网站的前端看到效果了，调用代码如下：

<dl id="tags"><dt>热门标签</dt>
<dd><ul>
zblogphp为“{module:tags}”/zblogasp为“<#CACHE_INCLUDE_TAGS#>”<div class="clear"></div>
</ul></dd>
</dl>

本文地址：https://www.51php.com/zblog/21138.html

上一篇: WordPress与HTTP 500错误的问题
下一篇: 从代码内部实现zblog内容页描述的方法

zblog设置炫彩tag的方法

相关推荐