在相关css文件加入
/* 在模板样式表中添加 */
.artlist_b {
list-style: none;
padding-left: 0;
counter-reset: rank;
}
.artlist_b li {
position: relative;
padding-left: 20px;
counter-increment: rank;
}
.artlist_b li::before {
content: counter(rank);
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
font: 700 18px/1 'Roboto Condensed', Arial, sans-serif;
color: #666; /* 默认数字颜色 */
}
/* 前三位特殊样式 */
.artlist_b li:nth-child(1)::before {
color: #ff4757; /* 冠军红 */
font-size: 22px;
}
.artlist_b li:nth-child(2)::before {
color: #ffa502; /* 亚军橙 */
font-size: 20px;
}
.artlist_b li:nth-child(3)::before {
color: #2ed573; /* 季军绿 */
font-size: 18px;
}
/* 4-10位数字淡化处理 */
.artlist_b li:nth-child(n+4)::before {
color: #a4b0be;
font-weight: 500;
}
接着在需要显示的标题前加入data-number="{#$idx+1#}"以本站为例，<li data-number="{#$idx+1#}">[<em><a href="{#$new.cate_link#}" title="{#$new.cate_name#}">{#$new.cate_name#}</a></em>]<a href="{#$new.web_link#}" title="{#$new.web_name#}">{#$new.web_name#}</a><span>{#$new.web_ctime#}</span></li>
如有不懂的请在本站意见反馈留言，站长将在第一时间回复您
