下载鸥 > 网站下载 > 开发教程 > 帝国CMS

帝国cms彩色tag标签样式分享

413 2021-05-28 20:00:02

收藏
帝国cms标签列表如果做死板的展示可能不大好看,如果能增加一些色彩,无疑会让页面更加灵动。但帝国cms怎样给tag列表增加色彩呢?

帝国cms彩色tag标签样式分享
 

帝国cms标签列表彩色文字模板html部分

<ul class="colorful">
    <li>
        <a href="/tags-<?=$bqr[tagname]?>-0.html"><?=$bqr[tagname]?></a>
    </li>
</ul>
 

帝国cms标签列表彩色文字模板css部分

.colorful {
    margin-left: -10px;
    padding-top: 15px;
    overflow: hidden;
}

.colorful li {
    float: left;
    margin: 0 0 10px 10px;
    height: 25px;
    overflow: hidden;
}

.colorful li a {
    display: block;
    color: #fff;
    line-height: 24px;
    padding: 0 9px;
    color: rgb(242, 160, 161);
    font-size: 14pt;
}

.colorful li:nth-of-type(2n) a {
    color: rgb(132, 185, 203);
    font-size: 13pt;
}

.colorful li:nth-of-type(3n) a {
    color: rgb(205, 140, 92);
    font-size: 12pt;
}

.colorful li:nth-of-type(4n) a {
    color: rgb(248, 184, 98);
    font-size: 11pt;
}

.colorful li:nth-of-type(5n) a {
    color: rgb(165, 154, 202);
    font-size: 10pt;
}

.colorful li:nth-of-type(6n) a {
    color: rgb(165, 143, 134);
    font-size: 14pt;
}

.colorful li:nth-of-type(7n) a {
    color: rgb(136, 203, 127);
    font-size: 13pt;
}

.colorful li a:hover {
    opacity: .8;
    filter: alpha(opacity=80);
}
 

彩色tags操作方式

.colorful是父栏目ul的类名,里面是li + a标签的组合,按照这样组合好标签的循环后,加入上方的css,即可实现帝国cms标签列表tag彩色化。
 

附注

本方案并非针对帝国cms,其他程序同样适用。

本文地址:https://xzo.com.cn/develop/empire/994.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于帝国CMS


帝国cms是一款功能极为强大的cms程序,性能强悍、安全性高,可轻松支持10万数据,高级开发人员可制作出能容纳千万数据量的网站,是国内最出色的开源cms程序之一,推荐企业用户使用

当前最新版本为7.5,8.0版本即将上线,新版本的核心优化点在于多终端的适配。

推荐帝国CMS开发教程
帝国cms静态页面怎样设置ip白名单并禁止非白名单访客访问?
帝国cms静态页面怎样设置ip白名单并禁止非白名单访客访问?

部分功能型站点需要验证访客ip,如非白名单ip需要禁止访问。从动态站点的角度...

17 1068
帝国CMS新手入门用万能标签还是灵动标签比较快?
帝国CMS新手入门用万能标签还是灵动标签比较快?

帝国CMS有两大标签,其中一个叫万能标签,另一个叫灵动标签,两个标签用法截然不...

1 475
帝国CMS文章页的seo标题在哪里?
帝国CMS文章页的seo标题在哪里?

很多朋友用惯了织梦CMS,转到帝国之后就非常困惑,因为织梦CMS的文章是有一个se...

1 406
帝国cms下载判断设备环境安卓苹果并适配下载地址
帝国cms下载判断设备环境安卓苹果并适配下载地址

帝国cms静态站下载判断设备环境是安卓还是苹果,并自动适配下载地址,如果当前...

1 444
帝国cms安装模板里没有install文件夹怎么办?
帝国cms安装模板里没有install文件夹怎么办?

许多客户在使用帝国cms建站后想要再做一个网站,但复制所有的文件到新服务器...

0 433
帝国cms生成自定义列表页怎样压缩?
帝国cms生成自定义列表页怎样压缩?

帝国cms生成的静态页面,大多是在gethtml()函数下实现代码压缩,但自定义页面、...

0 388
帝国cms静态页中如何获取php设置的cookie值?
帝国cms静态页中如何获取php设置的cookie值?

帝国cms的前台页面,是生成的静态文件,如果想要直接获取cookie,或是直接生成页...

3 579
帝国cms多站点跨库调用
帝国cms多站点跨库调用

一台服务器如果存在多个站点,则这些站点的数据可以互相调用。通过互相调用,我...

0 405
推荐插件
帝国cms纳米数据接口(足球比赛中最新数据)
帝国cms纳米数据接口(足球比赛中最新数据)

帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...

0 284
帝国cms批量添加后台用户插件
帝国cms批量添加后台用户插件

使用帝国cms的企业用户、新闻资讯类站点的用户很多,此类站点很多时候需要有...

0 664
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 352
帝国cms百度AI图像无损放大api接口对接插件
帝国cms百度AI图像无损放大api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...

0 390
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 496
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1199
帝国cms在线考试系统模板插件
帝国cms在线考试系统模板插件

一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...

0 1219
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 365
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入