網站建設的頁腳要怎么設計？

、必要的信息不能少

在瀏覽網站時，可以發現，大多數網站的頁腳包含了企業簡單業務介紹、聯系信息、版權保護以及其它關聯網站等等，當用戶在網站上沒有發現明顯的聯系方式，他們基本上都會把網頁拉到頁腳尋找信息，能讓他們快速找到目標內容可以減少網站跳出率。

2、讓頁腳變得好看

最基本也是最有效的方法是讓頁腳變得好看，就算頁腳沒有任何東西（按鈕、鏈接等），只要視覺效果出眾，它依然可以成為網站整體中有力的那部分。如果你想讓網站盡可能地保持干凈簡潔，那就要防止網站看起來乏味無聊。無論如何，在網站頁腳的視覺細節上花點功夫，才能把用戶的注意力搶過來。

3、充分利用空間

網站頁腳的設計是在有限的空間內展示最精辟的內容，對于這部分的空間要充分利用起來，對要使用的圖標，文字，圖片等內容進行排版設計，但在安排這些元素的同時要懂得留白，避免出現密密麻麻的內容扎堆情況，否則影響網站美觀的同時也產生了用戶閱讀困擾。

4、合理安排鏈接

頁腳內容對排布和分類要求較高，畢竟所占據的<1>板塊區域較小，因此要遵循以簡潔明了的形式展示最直接和全面的內容，無論是網站基本內容的目錄，還是聯系方式，有或者是友情鏈接，最好進行組織分類，通常情況下，這些內容都是以概括的形式展示，更多詳細內容以鏈接跳轉的形式，對此要合理安排好鏈接，保證好用戶體驗，以防出現死鏈或者空鏈。

5、勿使用鏈接下劃線

轉載于佛山鎬站網http://www.wangluo379.cn/zixun/gongsidongtai/2739.html

網站頁腳還是添加鏈接時候，千萬不用再頁腳鏈接使用下劃線的形式，我們就需要給頁腳一個干凈整潔的，包含大量鏈接的頁腳。

6、注意內容的可讀性

頁腳內容不如網站主題部分，頁腳內容只是容納很少一部分信息，并且這種信息不是很重要但是確實網站必須。我們在設計網站頁腳內容就需要讓內容變得具有可讀性。還有就是頁腳內容的文本元素和背景顏色都需要跟網站主題部分進行區分，這樣做的好處就是讓網站頁腳和網站主題部分形成鮮明的對比。

7、不要過于復雜

頁腳和頁頭的設計有所區別，它并不需要跟頁頭的導航欄或者BANNER圖設計那樣過多的注重交互性以及個性化，反而是簡潔有力的頁腳更加有利于用戶體驗。通常采用極少的色彩元素并和網站整體風格一致，盡量避免圖片背景形式，如需讓內容顯得豐富些，就選擇圖標和文字結合的形式來展現，且內容也不宜過多，應簡潔。

8、避免頭重腳輕

有些網站在設計的過程中并沒有明確的頁腳概念，往往把頁頭做得很耀眼，但是整站往下拉，卻沒有頁腳的蹤影，又或者是將頁腳看作最次要的一部分，所使用的字體小，內容粗略，且沒有將文字與背景對比度考慮在內等等，無形中就造成了用戶不愉快的閱讀體驗，按照用戶的瀏覽習慣，從網站頁頭瀏覽下來，體驗效果都還不錯，但一到頁腳就一頭霧水，這種頭重腳輕的現象就造成了用戶不好的印象。

加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

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

近，項目中需要給每個頁面加入頁腳，也就是一個網站由某某某公司開發什么的把，如下圖，實現功能：出現縱滾動條時，頁腳在頁面內容的最下面；不出現縱滾動條時，固定在窗口的最最下面

網上也有許多用CSS布局來實現頁腳的，但是任然不夠靈活，可能頁面稍微變化下大小、比例、屏幕變化下分辨率什么的，這個CSS的布局可能就不起作用了，js才是萬能的~

簡單介紹下js設置頁腳的形式

1、寫一個共同的footer.jsp畫面，可以用其他jsp去include

以下是我寫的代碼，其中紅框位置是需要特別注意的地方：

2、需要調用footer.jsp的頁面，如下截圖

其中，重點部分用紅框標出，實現步驟

（1）、include footer.jsp頁腳，頁腳初始化的時候調用setFooter()一次

（2）、在window大小變化，或者是滾動條滑動時，都會相應setFooter()方法

這樣就可以實現動態設置頁腳的位置了

3、實現GIF：

題外話

1、算出滾動條的寬度：

$("body").outerWidth() + ";" + $(window).width()

2、得到畫面組件的各種寬、高：

在線咨詢

上一篇：簡單小程序：登錄頁面（html）
下一篇：HTML之CSS表格<一>

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網站建設的頁腳要怎么設計？

簡單介紹下js設置頁腳的形式

題外話

您的項目需求

網站建設的頁腳要怎么設計？