共計 2051 個字符，預計需要花費 6 分鐘才能閱讀完成。

現在互聯網上的流量早已是移動端的天下，所以不少網站也在不斷增強移動端的體驗。移動端的網頁同 PC 端相比屏幕小，展現的內容也相對較少，所以通常會多加一些按鈕來引導讀者朋友們。橘子君在網絡上看到一種固定導航按鈕的方法很不錯，使用非常簡單，特此記錄分享一下。

實現該功能的代碼

<style type="text/css">.nav{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.85);list-style-image:none;list-style-type:none;margin:0px;padding:0px !important;}.nav ul li{position:relative;float:left;width:20%;text-align:center;margin:0px;padding:0px;list-style-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>

<div class="nav">
  <ul>
    <li> <a ><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5orc0s4pj202s02sq2t.jpg" alt="網站移動端下方固定導航按鈕的方法"></a> </li>
    <li> <a ><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5ormmj33j202s02smx1.jpg" alt="網站移動端下方固定導航按鈕的方法"></a> </li>
    <li> <a ><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5onpl6ohj202s02sglh.jpg" alt="網站移動端下方固定導航按鈕的方法"></a> </li>
    <li> <a ><img style="animation: blink 1.0s linear infinite;" src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5p5z185rj202s02s0sm.jpg" alt="網站移動端下方固定導航按鈕的方法"></a> </li>
    <li> <a ><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fjclu2gnghj202s02s745.jpg" alt="網站移動端下方固定導航按鈕的方法"></a> </li>
  </ul>
</div>

使用方法

把該代碼加入到網站首頁模板中，該固定導航按鈕將只展現在移動端首頁。想要移動端全站展示，可以將以上代碼添加到 footer 文件中。鏈接可自行替換，圖片亦如此，替換修改成自己的即可。