DreamLife/DreamLife_HomePage
DreamLife/DreamLife_HomePage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页脚

Browse Source
This commit is contained in:
张梦南 2025-10-16 21:33:47 +08:00
parent 0c42224e2a
commit cff6266d00
2 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/footer.css
View File

@ -1,16 +1,47 @@
/* 页脚样式 - 默认 (电脑设备) */ /* 页脚样式 */
footer { footer {
background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */ background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */
color: white; color: white;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0px; flex-wrap: wrap; /* 允许多行时自动换行 */
padding: 6px 0; /* 增加一定内边距，使高度随内容变化 */
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
font-size: 14px; font-size: 14px;
max-height: 30px; min-height: 20px; /* 保证最低高度 */
max-height: 32px; /* 移除高度上限，允许内容扩展 */
z-index: 2000; z-index: 2000;
text-align: center;
line-height: 1.4; /* 行高适配多行文字 */
}
.footer-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap; /* 默认不换行（PC端） */
gap: 8px;
}
/* 移动端自动换行 */
@media (max-width: 768px) {
.footer-content {
flex-direction: column; /* 移动端改为竖向排列 */
}
.line-1 {
margin-bottom: -12px;
}
}
.footer-line {
display: flex;
justify-content: center;
align-items: center;
gap: 8px; /* ✅ 每个元素之间留 4px 间距 */
} }

15
index.html
View File

@ -64,11 +64,16 @@
</div> </div>
<footer> <footer>
<a href="https://gitea.dreamlife.top/DreamLife" target="_blank" style="color: #fff; text-decoration: none;">&copy; 2025 DreamLife 版权所有</a> <div class="footer-content">
<p>&nbsp;&nbsp;</p> <div class="footer-line line-1">
<a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">津ICP备2025038798号</a> <a href="https://gitea.dreamlife.top/DreamLife" target="_blank" style="color: #fff; text-decoration: none;">&copy; 2025 DreamLife 版权所有</a>
<p>&nbsp;&nbsp;</p> <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">津ICP备2025038798号</a>
<p><img src="icon/beian.png" width="12" style="margin-right: 4px;"><a href="https://beian.mps.gov.cn/#/query/webSearch?code=12011402001636" rel="noreferrer" target="_blank" style="color: #fff; text-decoration: none;">津公网安备12011402001636号</a></p> </div>
<div class="footer-line line-2">
<img src="icon/beian.png" width="12" style="margin-right: -4px;">
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=12011402001636" rel="noreferrer" target="_blank" style="color: #fff; text-decoration: none;">津公网安备12011402001636号</a>
</div>
</div>
</footer> </footer>
<script src="javascape/time.js"></script> <script src="javascape/time.js"></script>