分享个好看的分类信息美化代码

影子江湖

<style>
.acgc-style-va3 {
font-size: 16px;
font-weight: 700;
color: #FFF;
margin-left: 20px;
width: 60%;
line-height: 50px;
}
.wf_fllist li:hover {
background: linear-gradient(to left,#ff226e 0,#29fffb 100%);
border-radius: .9rem;
}
.content-wrapper-standard {
margin-left: 0px;
margin-right: auto;
max-width: 400px;
}
.pcb {
clear: left;

}


.cl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wf_fllist .left {
float: left;

}
.wf_fllist li {
padding-left: 25px;
font-size: 14px;
display: flex;
/* justify-content: space-between; */
height: 34px;
float: left;
/* margin-top: 10px; */
width: 50%;
overflow: hide;
/* line-height: 34px; */
/* border-bottom: 1px solid #E1E1E1; */
color: #f2f2f2;
background: #2a3441;
height: 60px;
border-radius: .9rem;
margin-top: 10px;
margin-bottom: 10px;
width: 420px;
/* display: flex; */
align-items: center;
/* justify-content: center; */
box-shadow: 8px 8px 8px #999;
/* font-size: 20px; */
font-weight: 700;
color: #FFF;
display: flex;
/* line-height: 50px; */
margin-left: 10px;
}
.wf_fllist li span {
margin-right: 220px;
padding: 1px 4px;
font-weight: bold;
}


body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.dz_mbinfo {
margin-top: 10px;
}
.fl_yswz {
float: left;
margin-left: 10px;
}
.fl_yswz a {
display: block;
width: 110px;
height: 35px;
background: #4F71CB url(图片目录/addon.png) 6px 6px no-repeat;
color: #fff;
font-size: 16px;
text-indent: 35px;
line-height: 35px;
}
.fl_xzdz {
float: left;
margin-left: 10px;
}
.fl_xzdz a {
display: block;
width: 110px;
height: 35px;
background: #0b9040 url(图片目录/addon.png) 6px 6px no-repeat;
color: #fff;
font-size: 16px;
text-indent: 35px;
line-height: 35px;
}
.fl_xzdz a:hover {
background: #e07014 url(图片目录/addon.png) 6px 6px no-repeat;
}
.acgc-newstyle {
background: #2a3441;
position: relative;
right: 40px;
height: 60px;
border-radius: .9rem;
margin-bottom: 10px;
width: 848px;
display: flex;
align-items: center;
box-shadow: 8px 8px 8px #999;
}
.acgc-style-title {
font-size: 20px;
font-weight: 700;
color: #FFF;
display: flex;
line-height: 70px;
margin-left: 10px;
}
@media only screen and (max-width: 768px) {
.category-info {
display: none;
}
}

</style>

<div class="pct"><div class="pcb">


<div class="wf_fllist cl">
<div class="right y cl">
<script type="text/javascript">
var moqu8_ad_from="cmsmb";
</script>
<script type="text/javascript" src="2019/moqu8_ad.js"></script>
</div>
<ul class="left z cl">
<li><img src="图片目录/103055coz8qwi8zvrsh3ev.png" class="mylbtbsz" alt="QRST » 分类信息" data-pagespeed-url-hash="3745196878"> <<b>{xiazai}</b>:span class="moqu8_ck"> [xiazaivalue]</span></li>

<li><img src="图片目录/103712mabbcrbd3kb10a1r.png" class="mylbtbsz" alt="QRST » 分类信息" data-pagespeed-url-hash="3745196878"><b>{laiyuan}</b>:<span class="moqu8_ckx"> [laiyuanvalue]</span></li>
<li><img src="图片目录/103713qrz7owondgdgrqqo.png" class="mylbtbsz" alt="QRST » 分类信息" data-pagespeed-url-hash="3745196878"><b>{ziyuanshuliang}</b>:<span class="moqu8_ck"> [ziyuanshuliangvalue]</span></li>
<li><img src="图片目录/103714s6t23l20jcts323t.png" class="mylbtbsz" alt="QRST » 分类信息" data-pagespeed-url-hash="3745196878"><b>{zydx}</b>:<span class="moqu8_ck"> [zydxvalue]</span></li>
<li><img src="图片目录/103714cuiyiddw3yji5juu.png" class="mylbtbsz" alt="QRST » 分类信息" data-pagespeed-url-hash="3745196878"><b>{jymm}</b>:<span class="moqu8_ck">[jymmvalue]</span></li>
<li><img src="图片目录/103715pr8izbc74raeg3ea.png" class="mylbtbsz" alt="QRST » 分类信息" data-pagespeed-url-hash="3745196878"><b>{jyrj}</b>: <span class="moqu8_ck"> [jyrjvalue]</span></li>
<div class="dz_mbinfo">

<?php if (!$_G['mobile']) { ?>
<!-- 显示分类信息的代码 -->
<?php } ?>

放到你后台-论坛-分类信息-模板里

记得把变量名改成你的      

[xiazaivalue] xiazai是我的分类名称的变量名,你自己改成你的  后面的value不要删
还有<<b>{xiazai}</b>的变量名,一样是改成你的


如果你的分类数量是六个以上或以下就自己删除或添加下即可







下面是图片素材

本帖, 最后, 影子, 江湖, 2024-12-27

海哥

可以，好看

风吹故人香

这个可以出教程么