子比主题 – 单行文章列表美化版

142435
热帖

一款用户定制的仿macgf的单行文章滚动列表小工具，对macgf进行了1:1还原

图片[1]-子比主题 – 单行文章列表美化版-百义网创交流社区
图片[2]-子比主题 – 单行文章列表美化版-百义网创交流社区

PHP代码

老规矩，无脑丢func.php

  此处内容已隐藏，请评论后刷新页面查看.

CSS代码

里面有张图片，需要自己下载下来换成自己的

/* 单行文章列表美化——开始 */
.sec-wrapper {
margin-bottom: 10px;
}
.training-camp__wrapper {
--green-1: #cff0fb;
--green-2: #cbf4e4;
--green-3: #22ab80;
--gray-1: #667280;
--white-1: #fff;
--white-2: #f5f7fa;
background-image: linear-gradient(150deg,var(--green-1) 20%,var(--green-2) 40%);
padding: 0 12px 12px;
border-radius: 16px;
}
button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
background: #ffffff00;
border: 1px solid #fc3c2d00;
border-radius: 0px;
}
.training-camp__wrapper .training-camp__header {
padding: 24px 0 24px 12px;
display: -webkit-flex;
display: flex;
gap: 18px;
background: url(https://www.macgf.com/img/kuangwenlu.png) 100% 0/433px 126px no-repeat;
}
.training-camp__wrapper .header__title-wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
gap: 0px;
}
.training-camp__wrapper .title__img-wrapper {
height: 20px;
}
.training-camp__wrapper .header__btn-wrapper {
margin-left: auto;
display: -webkit-flex;
display: flex;
}
.training-camp__wrapper .header__btn-wrapper button[class*=button---] {
height: 20px;
line-height: 20px;
padding: 0 12px;
}
.training-camp__wrapper .header__btn {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
font-size: 14px;
color: var(--green-3);
}
.medium---OGt5iw {
height: 36px;
padding: 8px 24px;
font-size: 14px;
}
.outlined---BKvHAe, .text---pn4pHz {
background-color: initial;
color: #3e454d;
}
.button---AUM5ZP {
position: relative;
display: inline-block;
height: 36px;
padding: 8px 24px;
border-radius: 22px;
cursor: pointer;
border: unset;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ke-icon---zeGrGg+i {
display: inline-block;
vertical-align: middle;
}
.training-camp__wrapper>div.sec-bd {
background-color: var(--white-1);
gap: 12px;
}
.sec-wrapper .sec-bd {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
gap: 24px;
}
.training-camp__wrapper .sec-bd {
padding: 12px;
border-radius: 16px;
}
img.title-macyingyong {
/* width: 120px; */
height: 50px;
}
/* 单行文章列表美化——结束 */
/* 单行文章列表美化——开始 */

.sec-wrapper {
margin-bottom: 10px;
}

.training-camp__wrapper {
--green-1: #cff0fb;
--green-2: #cbf4e4;
--green-3: #22ab80;
--gray-1: #667280;
--white-1: #fff;
--white-2: #f5f7fa;
background-image: linear-gradient(150deg,var(--green-1) 20%,var(--green-2) 40%);
padding: 0 12px 12px;
border-radius: 16px;
}

button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
background: #ffffff00;
border: 1px solid #fc3c2d00;
border-radius: 0px;
}

.training-camp__wrapper .training-camp__header {
padding: 24px 0 24px 12px;
display: -webkit-flex;
display: flex;
gap: 18px;
background: url(https://www.macgf.com/img/kuangwenlu.png) 100% 0/433px 126px no-repeat;
}

.training-camp__wrapper .header__title-wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
gap: 0px;
}

.training-camp__wrapper .title__img-wrapper {
height: 20px;
}

.training-camp__wrapper .header__btn-wrapper {
margin-left: auto;
display: -webkit-flex;
display: flex;
}


.training-camp__wrapper .header__btn-wrapper button[class*=button---] {
height: 20px;
line-height: 20px;
padding: 0 12px;
}

.training-camp__wrapper .header__btn {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
font-size: 14px;
color: var(--green-3);
}
.medium---OGt5iw {
height: 36px;
padding: 8px 24px;
font-size: 14px;
}
.outlined---BKvHAe, .text---pn4pHz {
background-color: initial;
color: #3e454d;
}
.button---AUM5ZP {
position: relative;
display: inline-block;
height: 36px;
padding: 8px 24px;
border-radius: 22px;
cursor: pointer;
border: unset;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.ke-icon---zeGrGg+i {
display: inline-block;
vertical-align: middle;
}

.training-camp__wrapper>div.sec-bd {
background-color: var(--white-1);
gap: 12px;
}

.sec-wrapper .sec-bd {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
gap: 24px;
}
.training-camp__wrapper .sec-bd {
padding: 12px;
border-radius: 16px;
}


img.title-macyingyong {
/* width: 120px; */
height: 50px;
}

/* 单行文章列表美化——结束 */
/* 单行文章列表美化——开始 */

.sec-wrapper {
margin-bottom: 10px;
}

.training-camp__wrapper {
--green-1: #cff0fb;
--green-2: #cbf4e4;
--green-3: #22ab80;
--gray-1: #667280;
--white-1: #fff;
--white-2: #f5f7fa;
background-image: linear-gradient(150deg,var(--green-1) 20%,var(--green-2) 40%);
padding: 0 12px 12px;
border-radius: 16px;
}

button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
background: #ffffff00;
border: 1px solid #fc3c2d00;
border-radius: 0px;
}

.training-camp__wrapper .training-camp__header {
padding: 24px 0 24px 12px;
display: -webkit-flex;
display: flex;
gap: 18px;
background: url(https://www.macgf.com/img/kuangwenlu.png) 100% 0/433px 126px no-repeat;
}

.training-camp__wrapper .header__title-wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
gap: 0px;
}

.training-camp__wrapper .title__img-wrapper {
height: 20px;
}

.training-camp__wrapper .header__btn-wrapper {
margin-left: auto;
display: -webkit-flex;
display: flex;
}


.training-camp__wrapper .header__btn-wrapper button[class*=button---] {
height: 20px;
line-height: 20px;
padding: 0 12px;
}

.training-camp__wrapper .header__btn {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
font-size: 14px;
color: var(--green-3);
}
.medium---OGt5iw {
height: 36px;
padding: 8px 24px;
font-size: 14px;
}
.outlined---BKvHAe, .text---pn4pHz {
background-color: initial;
color: #3e454d;
}
.button---AUM5ZP {
position: relative;
display: inline-block;
height: 36px;
padding: 8px 24px;
border-radius: 22px;
cursor: pointer;
border: unset;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.ke-icon---zeGrGg+i {
display: inline-block;
vertical-align: middle;
}

.training-camp__wrapper>div.sec-bd {
background-color: var(--white-1);
gap: 12px;
}

.sec-wrapper .sec-bd {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
gap: 24px;
}
.training-camp__wrapper .sec-bd {
padding: 12px;
border-radius: 16px;
}


img.title-macyingyong {
/* width: 120px; */
height: 50px;
}

/* 单行文章列表美化——结束 */
展开阅读全文
© 版权声明
文章版权声明 1 本网站名称：百义网络工作室
2 本站永久网址：https://www.xjbywl.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ3371619613进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
美化日记
喜欢就支持一下吧
点赞5 分享
admin的头像-百义网创交流社区
热门货源推荐
评论 共14条
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
    只看作者
    • qwe123的头像-百义网创交流社区qwe123等级-LV1-百义网创交流社区0
      binhongtea 等级-LV1-百义网创交流社区 0 666谢分享
      12月4日 21:07回复