、必要的信息不能少

在瀏覽網(wǎng)站時，可以發(fā)現(xiàn)，大多數(shù)網(wǎng)站的頁腳包含了企業(yè)簡單業(yè)務(wù)介紹、聯(lián)系信息、版權(quán)保護(hù)以及其它關(guān)聯(lián)網(wǎng)站等等，當(dāng)用戶在網(wǎng)站上沒有發(fā)現(xiàn)明顯的聯(lián)系方式，他們基本上都會把網(wǎng)頁拉到頁腳尋找信息，能讓他們快速找到目標(biāo)內(nèi)容可以減少網(wǎng)站跳出率。

2、讓頁腳變得好看

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

3、充分利用空間

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

4、合理安排鏈接

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

5、勿使用鏈接下劃線

轉(zhuǎn)載于佛山鎬站網(wǎng)http://www.wangluo379.cn/zixun/gongsidongtai/2739.html

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

6、注意內(nèi)容的可讀性

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

7、不要過于復(fù)雜

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

8、避免頭重腳輕

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

加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)容。

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

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

簡單介紹下js設(shè)置頁腳的形式

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

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

2、需要調(diào)用footer.jsp的頁面，如下截圖

其中，重點部分用紅框標(biāo)出，實現(xiàn)步驟

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

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

這樣就可以實現(xiàn)動態(tài)設(shè)置頁腳的位置了

3、實現(xiàn)GIF：

題外話

1、算出滾動條的寬度：

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

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