Joe主题添加底部可爱底线提示
侧边栏壁纸
  • 累计撰写 88 篇文章
  • 累计收到 673 条评论
  • 今日更新 0 篇文章

Joe主题添加底部可爱底线提示

七年
2021-06-12 / 2 评论 / 115 阅读 / 正在检测是否收录...

前言

 没有什么可说的,就是一个底部小模块,本教程只写了Joe主题代码放置位置,其他网站的话自己研究,当然,如果你不会的话也可以问我哦~

效果图

Test
Test

教程开始

第一步:在主Joe题目录--->footer.php的“<footer class....>”上方加入以下代码:

<!--底部可爱底线提示-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://www.qin0.cn/usr/uploads/2021/06/1244912396.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text"  style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>

第二步:把以下CSS代码放到Joe主题后台--->全局设置---->自定义CSS里面

/*底部可爱底线提示*/
.lastpagenotice_noticewrap{color:hsla(0, 2.1%, 18.8%, 0.6);}.lastpagenotice_noticewrap img{height:73px; width:88px; margin:0 auto}.lastpagenotice_noticewrap .lastpagenotice_text{display:block; position:absolute; font-size:15px; line-height:20px; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:-webkit-calc(50% + 60px); left:calc(50% + 60px)}.lastpagenotice_noticewrap .lastpagenotice_line{width:100%; height:1px; background-color:hsla(0,0%,100%,.05); position:absolute; bottom:0}.app_normal{text-align:center; position:relative}
2

七年博客 - 你的专属归

https://www.qin0.cn/
更多精彩文章,按Ctrl+D收藏本站!

评论 (2)

取消
  1. 头像
    神话
    Android · Google Chrome

    目录位置joe/public/footer

    回复
    1. 头像
      七年 作者
      Android · Google Chrome
      @ 神话

      宝塔面板直接搜索即可

      回复
在线人数:1人