云电脑畅玩游戏!
云电脑畅玩游戏
广告

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

下载默认同意此说明
提醒 视频教程只是同款教学参考,请不要对标视频里面的内容,以文字为准!
1 下载须知:请使用【好压】解压资源否则可能报错!默认解压密码:www.ruankor.com【本站没有用户技术交流群】
2 下翻看看文章中是否有视频教程,若没有就严格按照文字,从上到下依次操作!
3【注:所有资源只测试能进游戏,并不对完整性BUG负责!若介意一定别下载!】
4 如果进不去,不要怀疑资源有问题,大概率是自己搭建的细节问题,多搭建几遍就好了。
5 所有资源所见即所得,无任何【换皮、修改、换版本,充值到你账上】 之类的服务!
6 ★★★★★软壳网络确保,百分百亲测服务器进游戏,搭建单机也是百分百没问题★★★★★站长唯一Q:1806712451

子比主题文章卡片美化,是在卡片代码内插入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;
}
© 版权声明
THE END
喜欢就记住本站,经常来逛逛吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容