子比首页排行榜三列美化兼容手机端兼容黑夜模式(仿自macgf.com)

子比首页排行榜三列美化兼容手机端兼容黑夜模式(仿自macgf.com)-狗大户博客
子比首页排行榜三列美化兼容手机端兼容黑夜模式(仿自macgf.com)
此内容为付费阅读,请付费后查看
星元10
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
付费阅读
温馨提示:本文最后更新于2024-01-22 09:12:22,某些文章具有时效性,若有错误或已失效,请在下方留言。

添加css

/** 首页排行榜列表开始 **/
@media (max-width: 768px) {
    .ranking-item{
        width:100%!important;
    }
}
.syphimg{
    width: 90px;
    height:60px;
    
    margin-right: 5px;
}
.syphimg img{
       border-radius: 8px;
    
}
.list.clearfix {
	display: flex;
	justify-content: space-between;
	  flex-wrap: wrap;
}

.ranking-item {
    margin:0 auto;
	position: relative;
	width: calc(33.333% - 10px );
	/* height: 400px; */
	/* margin-right: 10px; */
	/* margin-left: 10px; */
	background:var(--main-bg-color);
	/* box-shadow: 0 2px 6px 0 rgb(55 55 55 / 7%); */
	/* border-radius: 8px; */
	box-shadow: 0 0 10px var(--main-shadow);
	border-radius: var(--main-radius);
	margin-bottom: 20px;
}

a.top-icon.js-rank-bottom1 {
	display: block;
	width: 129px;
	height: 43px;
	line-height: 32px;
margin: 0 auto;
    margin-top: -7px;
	background: url(/pic/ranking1.png) no-repeat center/100%;
	font-size: 18px;
	color: #fff;
	font-weight: 600;
	text-align: center;
}

a.top-icon.js-rank-bottom2 {
	display: block;
	width: 129px;
	height: 43px;
	line-height: 32px;
margin: 0 auto;
    margin-top: -7px;
	background: url(/pic/ranking2.png) no-repeat center/100%;
	font-size: 18px;
	color: #fff;
	font-weight: 600;
	text-align: center;
}

a.top-icon.js-rank-bottom3 {
	display: block;
	width: 129px;
	height: 43px;
	line-height: 32px;
margin: 0 auto;
    margin-top: -7px;
	background: url(/pic/ranking3.png) no-repeat center/100%;
	font-size: 18px;
	color: #fff;
	font-weight: 600;
	text-align: center;
}

.class-box {
	margin-top: 10px;
}

a.class-item.js-rank {
	display: block;
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.num-icon.num-icon1 {
	width: 19px;
	height: 22px;
	background: url(/pic/top1.png) no-repeat center/100%;
	margin: 0 12px 0 15px;
}

img.class-pic {
	width: 90px;
	border-radius: 8px;
	margin-right: 5px;
}

.class-info {
	width: 190px;
	font-size: 12px;
}

.name {
	color: var(--key-color);
	line-height: 20px;
	font-weight: 400;
	margin-bottom: 2px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.price {
	color: #f01414;
	font-weight: 600;
	margin-bottom: 2px;
}

.study-num {
	color: #9199a1;
	font-weight: 400;
}

.num-icon.num-icon2 {
	background: url(/pic/top2.png) no-repeat center/100%;
	margin: 0 12px 0 15px;
	width: 19px;
	height: 22px;
}

.num-icon.num-icon3 {
	background: url(/pic/top3.png) no-repeat center/100%;
	margin: 0 12px 0 15px;
	width: 19px;
	height: 22px;
}

.num-icon.num-icon4 {
	background: url(/pic/top4.png) no-repeat center/100%;
	margin: 0 12px 0 15px;
	width: 19px;
	height: 22px;
}

.num-icon.num-icon5 {
	background: url(/pic/top5.png) no-repeat center/100%;
	margin: 0 12px 0 15px;
	width: 19px;
	height: 22px;
}

.num-icon.num-icon6 {
	background: url(/pic/top6.png) no-repeat center/100%;
	margin: 0 12px 0 15px;
	width: 19px;
	height: 22px;
}



a.bottom-link.js-rank-bottom {
	width: 120px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font-size: 12px;
	color: #fff;
	line-height: 12px;
	font-weight: 500;
	background-image: linear-gradient(270deg,#ff4f39 0,#fd6400 100%);
	border-radius: 12px;
	margin-bottom: 20px;
}

/** 首页排行榜列表结束 **/

图片[1]-子比首页排行榜三列美化兼容手机端兼容黑夜模式(仿自macgf.com)-狗大户博客

以下是html代码,搜索cat=,后面的数字就是调用的文章分类ID,改成你的就行。

pic文件夹上传至网站根目录下

https://www.goldwho.com/wp-content/uploads/2024/01/e28a7ccb3a20240113102940.zip

© 版权声明
THE END
喜欢就支持一下吧
点赞0投币 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容