子比主题美化 – 文章卡片三个点美化+代码区块圆点美化

下载说明 1 下载须知:本次购买仅为资源价格,不包含其他服务!默认解压密码:www.ruankor.com
2 下翻看看文章中是否有视频教程,若没有就严格按照文字,从上到下依次操作!
3 【游戏资源(手游、端游、页游H5)全部亲测,如果资源彻底进不了会下架处理,下载链接失效的请反馈】
4 如果进不去,不要怀疑资源有问题,大概率是自己搭建的细节问题,多搭建几遍就好了。
5 所有资源所见即所得,无任何【换皮、修改、换版本,充值到你账上】 之类的服务!

子比主题文章卡片美化,是在卡片代码内插入html代码配合css实现的,增加这三个点的代码,完全可以使用before来实现这个效果,于是就有了截图的效果。
图片[1]-子比主题美化 – 文章卡片三个点美化+代码区块圆点美化 - 软壳源码网-软壳源码网

css代码:

.posts-item.card::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1000;
    position: absolute;
}
.posts-item.card {
    padding: 26px 10px 10px 10px;
/*注意.posts-item.card没有定位属性 需要把这个注释去掉
    position: relative; /* 添加定位属性 */  

}

代码块:

.enlighter::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}
.enlighter-overflow-scroll.enlighter-v-standard .enlighter {
    padding: 35px 0 12px 0;
}
版权声明 1 本网站名称:软壳源码网
2 本站永久网址: https://www.ruankor.com/
3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
7如有侵权,请联系站长删除相关内容!
© 版权声明
THE END
喜欢就记住本站,经常来逛逛吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容