html 中頁腳的樣式footer 底部對齊

加style

<style type="text/css">
 html {
 position: relative;
 min-height: 100%;
 }
 body {
 margin-bottom: 60px;
 }
 .footer {
 position: absolute;
 bottom: 0; width: 100%;
 /* Set the fixed height of the footer here */
 height: 60px;
 background-color: #f5f5f5;
 }
</style>
.......
.....
</div>
<footer class="footer">
 <div style="text-align:center;">
 Copyright 2019 by Ben
 </div>
</footer>
</body>

image.png

效果圖，不管窗口放大還是調(diào)小，footer 都會顯示在最底也，也不會覆蓋content 里面的內(nèi)容。

局和腳部是 HTML 頁面中兩個重要的區(qū)域。布局區(qū)域用于組織頁面上的內(nèi)容，而腳部區(qū)域通常包含與頁面內(nèi)容無關(guān)但重要的信息。

布局區(qū)域

布局區(qū)域用于將頁面上的內(nèi)容分組和排列。最常用的布局區(qū)域是：

主內(nèi)容區(qū)：包含頁面上的主要內(nèi)容。
側(cè)欄：包含與頁面內(nèi)容相關(guān)的額外信息，例如導(dǎo)航菜單或側(cè)邊欄。
腳部：包含與頁面內(nèi)容無關(guān)但重要的信息，例如版權(quán)信息或聯(lián)系方法。

腳部區(qū)域

腳部區(qū)域通常包含以下內(nèi)容：

版權(quán)信息：表明頁面的所有權(quán)歸于特定個人或組織。
聯(lián)系方式：提供與發(fā)送電子郵件或訪問其他網(wǎng)站的鏈接。
社交媒體鏈接：提供與頁面或組織的社交媒體帳號。

布局和腳部的組合

布局區(qū)域可以包含腳部區(qū)域。例如，以下代碼展示了如何將腳部區(qū)域包含在布局區(qū)域內(nèi)：

html

<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
</head>
<body>
  <div id="layout">
    <!-- ... -->
    <footer>
      <p>? 20 vicisslet 20 vicisslet</p>
      <p>聯(lián)系：...</p>
      <p>社交媒體：...</p>
    </footer>
  </div>
</body>
</html>

最佳實踐

使用合適的布局區(qū)域來組織頁面內(nèi)容。
在腳部區(qū)域中提供與頁面內(nèi)容無關(guān)但重要的信息。
保持腳部區(qū)域簡短且易于瀏覽。

結(jié)論

布局和腳部是 HTML 頁面中兩個重要的區(qū)域。通過了解布局和腳部區(qū)域的用法，您可以創(chuàng)建擁有清晰結(jié)構(gòu)和良好閱讀體驗的頁面。

的網(wǎng)站由華為云遷移到阿里云了。為啥遷移呢？因為華為云續(xù)費實在太貴了，阿里云又在大促銷，2核8G的ECS 云主機3年1000多塊錢，所以在阿里云上新注冊了一個用戶，買了三年的ECS云主機。

以前找專業(yè)美工設(shè)計過一個網(wǎng)站的首頁，過一段時間后，思路有變化，就像改一版，但自己又不是專業(yè)美工，找人修改又要花錢，所以，就下載了一個Vuepress，用Vuepress搭建自己的官方網(wǎng)站。

國內(nèi)的云主機，做域名指向的時候，都需要進行備案，備案信息，一般會放在Vuepress的footer標簽下，并加上一個指向信息化部備案查詢的網(wǎng)站：http://www.beian.miit.gov.cn/，并加上自己的備案號。非常遺憾的是，Vuepress的footer標簽是不支持任何 <a herf > 之類的鏈接的，所以只能顯示備案號，并不能指向信息化部備案查詢的網(wǎng)站。如下圖所示：

用百度查詢，根本查不到任何有效信息，用Google查了一下，居然真的就查到了有人報了Vuepress的Bug，試圖解決這個問題，如下圖所示：

遺憾的是，Vuepress 作者并不是認為這是一個Bug，也不打算修復(fù)這個問題，回復(fù)如下：

令人非常失望，那么怎么辦呢？國內(nèi)域名空間提供商要求是在備案號下必須指向信息化部備案查詢的網(wǎng)站的，否則備案就不會被通過。邢老師我想了好久，終于找到了一個不是辦法的辦法，即直接修改Vuepress發(fā)布完成的靜態(tài)HTML頁面好了，原來的Vuepress 的footer標簽如下：

footer: Copyright ? 2019 XXX信息技術(shù)有限公司 | Email:ddd@eshop |  京ICP備16059853號

生成的HTML代碼如下：

<div class="footer">Copyright ? 2019 XXX信息技術(shù)有限公司 Email:xbt@eshopinone.com  京ICP備16059853號</div>

即無法指向 http://www.beian.miit.gov.cn

我把footer生成的靜態(tài)HTML頁面直接修改為：

<div class="footer">Copyright ? 2019 XXX信息技術(shù)有限公司 Email:xbt@eshopinone.com  <a href='http://www.beian.miit.gov.cn' target="_blank">京ICP備16059853號</a></div>

就可以在首頁上看到備案號和指向備案信息的鏈接了。機智如我，但是，每次用Vuepress打包發(fā)布，都需要手動修改這個HTML頁面了。

在線咨詢

上一篇：簡單實用node腳本！通過定時任務(wù)和2個fetch請求實現(xiàn)網(wǎng)站自動簽到
下一篇：21.HTML 浮動、定位和顯示屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html 中頁腳的樣式footer 底部對齊

您的項目需求