底部可爱底线提示

文章摘要

本文介绍了为网页底部添加个性化装饰元素的实现教程。通过修改主题目录下的footer.php文件,在指定位置插入HTML代码,可创建包含图片、文字提示及装饰线的“可爱底线”组件。其中,HTML部分嵌入了图标素材(尺寸88x73px)、蓝色加粗文字“我也是有底线哒~”以及1px半透明分隔线;CSS样式表定义了该组件的布局规则,包括垂直居中定位、响应式布局(calc计算偏移)、文字颜色(#6699FF)、透明背景线等视觉设计,并采用绝对定位确保元素固定于底部。教程强调代码需放置于<footer>标签上方,通过类选择器控制样式层级,最终实现兼具功能性与趣味性的页面美化效果。该方案适用于WordPress等建站平台,帮助开发者快速优化网页视觉交互体验。(字数:156)

美化教程

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

<!--底部可爱底线提示-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://www.cunshao.com/666666/meihua/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代码:

/*底部可爱底线提示*/
.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}

效果看博客底部

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

文章版权声明 1 本网站名称:顾熙博客
2 本站永久网址:https://blog.s686.cn
3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ407177932进行删除处理。
4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
© 版权声明
THE END
喜欢就支持一下吧!
点赞12赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容