✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 文章卡片列表三点样式
    返回列表 发布新帖
    查看: 76|回复: 0

    [代码技巧] 子比主题 – 文章卡片列表三点样式

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 524 颗
       贡献 : 1849 点
       金币 : 12 枚
    Icon在线时间 : 1298 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2025-12-12

    荣誉勋章

    会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

    风云·优秀版主
    飞流名人堂成员

    1

    实名认证 手机认证 vip vip-year FLLTCN发表于 2025-10-8 17:39:53 | 查看全部 |阅读模式 浙江金华

    资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    这是一款子比主题文章卡片列表给列表加三点的样式，装上这个功能我觉得给子比的卡片打开比较美观，喜欢的自行部署吧！

    tengfei_down (16).webp
    直接将下面的代码放到：子比主题–>>自定义CSS样式即可！
    1. /*文章列表左上角三点美化 */
    2. .posts-item.card:last-child {
    3.     margin-bottom: 8px !important;
    4. }

    6. .training-camp__wrapper .header__title-wrapper {
    7.     font-size: 16px;
    8. }

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

    14. .training-camp__wrapper .header__title-wrapper {
    15.     color: #22ab80;
    16. }

    18. .training-camp__wrapper {
    19.     background-image: linear-gradient(150deg, #cff0fb 20%, #cbf4e4 40%);
    20.     padding: 0 12px 12px;
    21.     border-radius: 16px;
    22. }

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

    30. .training-camp__wrapper .training-camp__header {
    31.     padding: 24px 0 24px 12px;
    32.     display: -webkit-flex;
    33.     display: flex;
    34.     background: url(/pic/kuangwenlu.png) 100% 0/433px 126px no-repeat;
    35. }

    37. .training-camp__wrapper .header__title-wrapper {
    38.     display: -webkit-flex;
    39.     display: flex;
    40.     -webkit-align-items: center;
    41.     align-items: center;
    42. }

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

    48. .training-camp__wrapper .header__btn-wrapper {
    49.     margin-left: auto;
    50.     display: -webkit-flex;
    51.     display: flex;
    52. }

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

    60. .training-camp__wrapper .header__btn {
    61.     display: -webkit-flex;
    62.     display: flex;
    63.     -webkit-align-items: center;
    64.     align-items: center;
    65.     font-size: 14px;
    66.     color: #22ab80;
    67. }

    69. .medium---OGt5iw {
    70.     height: 36px;
    71.     padding: 8px 24px;
    72.     font-size: 14px;
    73. }

    75. .outlined---BKvHAe,
    76. .text---pn4pHz {
    77.     background-color: initial;
    78.     color: #3e454d;
    79. }

    81. .button---AUM5ZP {
    82.     position: relative;
    83.     display: inline-block;
    84.     height: 36px;
    85.     padding: 8px 24px;
    86.     border-radius: 22px;
    87.     cursor: pointer;
    88.     border: unset;
    89.     font-size: 14px;
    90.     -webkit-user-select: none;
    91.     -moz-user-select: none;
    92.     user-select: none;
    93. }

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

    100. .training-camp__wrapper>div.sec-bd {
    101.     background-color: var(--body-bg-color);

    103. }

    105. .sec-wrapper .sec-bd {
    106.     position: relative;
    107.     display: -webkit-flex;
    108.     display: flex;
    109.     -webkit-flex-wrap: wrap;
    110.     flex-wrap: wrap;

    112. }

    114. .training-camp__wrapper .sec-bd {
    115.     padding: 12px;
    116.     border-radius: 16px;
    117. }

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

    124. .posts-item.card {
    125.     padding: 35px 10px 10px 10px !important;
    126. }

    128. .posts-item {
    129.     position: relative !important;
    130. }

    132. .posts-item.card::before {
    133.     content: "";
    134.     display: block;
    135.     background: #fc625d;
    136.     top: 13px;
    137.     left: 15px;
    138.     border-radius: 50%;
    139.     width: 9px;
    140.     height: 9px;
    141.     box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    142.     margin: 0px 2px -7px;
    143.     z-index: 1;
    144.     position: absolute;
    145. }</pre>
    复制代码
    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-12-14 06:05 , Processed in 0.084589 second(s), 61 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表