footer.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{{ title }}</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- <meta http-equiv="refresh" content="300" /> 每 content 秒網頁自動更新-->
  8. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  9. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  10. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  11. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  12. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  13. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  14. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  15. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  16. <!--可用來建立使用者小圖示-->
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  18. <!-- 參考資料 -->
  19. <!-- https://ithelp.ithome.com.tw/articles/10244121 -->
  20. <style>
  21. .footer{
  22. height: 40px;
  23. box-sizing: border-box;
  24. /* 設定footer絕對位置在底部 */
  25. position: absolute;
  26. bottom: 0px;
  27. width: 100%;
  28. background-color: #eee;
  29. text-align: center;
  30. }
  31. html, body {
  32. height: 100%;
  33. /* margin: 0; */
  34. position: relative;
  35. }
  36. #wrapper {
  37. /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
  38. min-height: 100%;
  39. /* 位置設為relative, 作為footer區塊位置的參考 */
  40. position: relative;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <!-- <div style="text-align: center;">
  46. 狀態更新時間(秒):
  47. <input type="text" class="input-text" name="webupdate_time" value="5" style="width:100px;">
  48. <input type="button" class="input-button" value="設定更新時間" onclick="changeUpdate()">
  49. </div> -->
  50. <br>
  51. <br>
  52. <footer class="footer" id="footer" style="margin: auto;">
  53. <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">
  54. <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;|&nbsp;
  55. <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;|&nbsp;
  56. <a style="padding: 0px 6px;" href="/sitemap">網站地圖</a>&nbsp;|&nbsp;
  57. Copyright © 2022 GOLD IN TECHNOLOGY INC. 保留一切權利。
  58. </div>
  59. </footer>
  60. </body>
  61. </html>