CoreNext 主题美化：底部可爱底线提示“我也是有底线哒”

很多网站在页面滚动到底部无内容时，会显示一句趣味提示，比如“我也是有底线哒”的底部可爱底线提示。这个小小的 CoreNext 主题美化效果，不仅能增加网站的个性与趣味性，还能给访客带来轻松愉快的浏览体验。通过简单 CSS 和 HTML 代码，即可在网页底部添加这一可爱底线提示，图片和文字均可自定义替换。

效果截图

底部可爱底线提示安装教程

底部 HTML 代码

在主题目录 —>footer.php 的“<footer class….> ”上方加入以下代码：

<!--底部可爱底线提示 _ 好软猫[www.haoruanmao.com]-->
<div class="app_normal window" style="padding-top:" data-reactroot="">
    <div class="common_container lastpagenotice_noticewrap">
        <img src="https://img.wiiuii.cn/img/lan.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 样式

/*底部可爱底线提示 CSS_ 好软猫[www.haoruanmao.com]*/
.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
}

更多推荐

CoreNext 主题美化教程合集