分享個(gè)好看的分類信息美化代碼

影子江湖

<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 } ?>

放到你后臺(tái)-論壇-分類信息-模板里

記得把變量名改成你的      

[xiazaivalue] xiazai是我的分類名稱的變量名,你自己改成你的  后面的value不要?jiǎng)h
還有<<b>{xiazai}</b>的變量名,一樣是改成你的


如果你的分類數(shù)量是六個(gè)以上或以下就自己刪除或添加下即可







下面是圖片素材

海哥

可以，好看

風(fēng)吹故人香

這個(gè)可以出教程么