下面是一个适合个人网站使用的简洁美观页脚,支持:
📆 实时显示网站运行时间(精确到秒)
🕓 当前服务器时间
🔗 快速导航链接
📧 联系方式展示
💬 动效提示与移动端适配
你可以直接将其保存为 .md 文件,例如 footer.md,并添加到你的站点中。
.md
footer.md
# 🧩 MY飞屋软件站 - 页脚加强版(支持运行时间与当前时间)
这是一个适用于个人博客 / GitHub Pages / Hexo 等静态网站的加强版页脚,具有以下功能:
- 💡 网站运行时间(精确到秒) - 🕒 当前服务器时间显示 - 🌐 快速导航链接 - 📬 联系邮箱 - 📱 响应式布局,适配移动端 - ✨ 动效展示
---
## ✅ 效果展示(示意)
> ⚠️ 本站为个人非盈利性博客,仅用于软件学习与技术研究。 > 已运行:`123天 4时 52分 18秒` | 当前时间:`2025-04-29 14:36:28` > © 2025 MY飞屋 软件站 | 保留所有权利 > 📧 联系邮箱:support@myfeiwu.com
## 📄 完整代码
### 1. HTML
```html <footer class="site-footer"> <div class="footer-container"> <div class="footer-left"> ⚠️ 本站为个人非盈利性博客,仅用于软件学习与技术研究,资源请于下载 24 小时内删除,禁止商业用途,后果自负。如有侵权,请邮件联系删除。 </div>
<div class="footer-links"> <a href="/about"><span class="footer-icon">📄</span>关于我们</a> <a href="/contact"><span class="footer-icon">📬</span>联系我们</a> <a href="/privacy"><span class="footer-icon">🔒</span>隐私政策</a> <a href="/disclaimer"><span class="footer-icon">📢</span>免责声明</a> </div>
<div class="footer-bottom"> 已运行 <span id="runtime">加载中...</span> | 当前时间 <span id="servertime">加载中...</span><br> © 2025 <a href="/">MY飞屋</a> 软件站 | 保留所有权利 </div>
<div class="footer-meta"> 联系邮箱:support@myfeiwu.com </div> </div> </footer>
将 HTML 添加到你博客页面的底部。
将 CSS 放入你的全局样式表或 <style> 标签中。
<style>
将 JavaScript 放在 <body> 最后或通过 <script src="..."> 引入。
<body>
<script src="...">
☕️ 请一杯咖啡:
微信
支付宝