首页文章上方添加一个 NEW 最新发布样式搬砖的小易4个月前更新关注私信05215 前言: 这个功能是从 ripro 的主题里面衍生过来,觉得挺好看,就拿过来优化适配了一下,具体效果可以参考本站,安装起来也很简单,不需要再 PHP 中修改,直接在外观小工具里面实现。 安装方法 1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏添加下方代码 如果觉得代码太长,可以将下面的 css 样式中的首页最新发布标题里面 css 样式代码,复制下来,放到一个 css 文件当中再引用即可, 引用代码可参考我提供的,将/css/news.css 更改成你的文件路径就可以了 <link rel='stylesheet' id='ripro_chlid_style-css' href='/css/news.css' type='text/css' media='all' /> <!--NEW 最新发布样式开始--> <style type="text/css"> /*首页最新发布标题*/ .zhankr-zx { position: relative; margin-bottom: 18px; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; line-height: 1; } .zhankr-zx:before { margin-right: 10px; } .zhankr-zx:after { margin-left: 10px } .zhankr-zx:before, .zhankr-zx:after { content: ""; display: inline-block; width: 8px; height: 8px; background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%); border-radius: 50%; } .zhankr-zx span { font-family: Futura; background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%); -webkit-background-clip: text; color: transparent; font-size: 49px; letter-spacing: 5px; display: inline-block; font-weight: 700; } .zhankr-zx .zhankr-zx-n { font-size: 20px; } .zhankr-zx .zhankr-zx-n strong { display: block; font-size: 20px; background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%); -webkit-background-clip: text; color: transparent; } .HhcatboxDes { position: absolute; opacity: 0; z-index: 1; align-items: center; display: flex; font-size: 16px; height: 180px; justify-content: center; width: 100%; color: #fff; font-weight: 600; background: #f95491; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: translateY(100%); -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .HhCooltitle { margin-top: 10px } /*首页最新发布标题*/ </style> <div class="zhankr-zx"> <span>NEWS</span> <div class="zhankr-zx-n"> <strong>最新</strong> <strong>发布</strong> </div> </div> <script>document.querySelectorAll(".zhankr-zx")[0].parentNode.parentNode.style.cssText="background:#fff0;box-shadow:0 0 0";</script> <!--www.yihuanyun.cc NEW 最新发布样式结束--> 展示效果 供学习和研究使用,禁止商业用途 购买前可以联系作者确认资源信息,防止交易矛盾 © 版权声明 版权声明 1 本网站名称:易幻云资源网 2 本站永久网址:https://www.yihuanyun.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ2956667505进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END美化教程 喜欢就支持一下吧点赞15收藏