作者 主題: 8、ECSHOP響應式網頁製作-footer 頁面底部資訊  (閱讀 492 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
8、ECSHOP響應式網頁製作-footer 頁面底部資訊
« 於: 七月 18, 2019, 10:50:03 上午 »
footer 是每個頁面的底部,由 page_footer.lbi 負責,和 header 一樣共用於每個網頁,因此你只需修改  page_footer.lbi ,整個網站的網頁底部也會跟著改變,footer 包含網站版權文字、其他訊息與客服資訊,你也可以加入自訂的文字或圖片,現在用瀏覽器(建議 FireFox) 開啟本機的網站首頁,用文字編輯器(建議 sublime  Text) 開啟 page_footer.lbi
代碼: [選擇]
<footer class="container">
    footer...
</footer>

為了讓程式碼更容易閱讀,首頁部份只留頁首和頁尾,其他都先刪除:



為了讓 footer 常駐於頁面底部不會隨著頁面捲動,所以加上  navbar-fixed-bottom,版權文字靠左,右邊加上一個回頂部按鈕
代碼: [選擇]
<footer class="container navbar-fixed-bottom">
  <div class="row">
    <div class="col-xs-10 col-sm-11 col-md-11 info">Copyright {$copyright}</div>
    <div class="col-xs-2 col-sm-1 col-md-1"><a href="#" title="回頂部"><i class="fa fa-sort-asc"></i>TOP</a></div>
  </div>
</footer>


另外還有一些客服資訊,為了避免佔太多版面因此先隱藏,待訪客點擊後在展開,為了讓程式碼更容易閱讀,所以將這部份獨立出來,還有像ECSHOP的版權,網站的統計資訊等,當然你也能自行增減顯示的元素
代碼: [選擇]
  <div class="row">
    <div class="col-xs-10 col-sm-11 col-md-11 info">
      {include file='library/service.lbi'}
      {foreach from=$lang.p_y item=pv}{$pv}{/foreach}{$licensed}
      {if $stats_code}<div>{$stats_code}</div>{/if}
    </div>
    <div class="col-xs-2 col-sm-1 col-md-1">
      <a href="{$feed_url}" title="RSS訂閱"><i class="fa fa-rss fa-2x"></i></a>
    </div>
  </div>


至此為止,header 和 footer 的部份已經完成,請使用瀏覽器縮放寬度,或實際使用各種移動設備測試一下響應效果是否符合你的期待,特別注意的是,有些手機的螢幕仍是360像素,如果你很在意,請針對此寬度進行微調...
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php