香港独立IP空间
香港php空间
美国php空间
域名注册

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>

无忧主机相关文章推荐阅读:
ZBLOG文件重建说明
ZBLOG调用热门TAG标签和随机TAG标签的方法
ZBLOG分类页和内容页分别调用当前栏目内容的标签

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

喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

阅读本文的人还阅读:


搜索技术文档