作為一個專注閱讀的網站，它的導航也一定是全局的，固定的，也是簡潔的。事實上幾家閱讀網站豆瓣閱讀，多看，簡書都是這樣做的，剛好實現起來也不算復雜，以下是我想到的實現方法。
首先是html的結構：
1 <body> 2 <nav> 3 <div> 4 <a href="#">點</a> 5 <a href="#">滴</a> 6 <a href="#">一</a> 7 <a href="#">生</a> 8 </div> 9 </nav> 10 <body>
然后是css的樣式:
1 <style> 2 body { 3 margin: 0; /*一定的初始化是必要的*/ 4 } 5 nav { 6 position: fixed; /*因為是一個全頁面的豎排導航，所以必須設置為固定定位*/ 7 /*同時因為固定定位是把標簽從文檔中直接拿出來，所以布局其他元素時要用margin留出外邊距， 8 必要時可以設置導航欄為固定寬度保證不會出現白邊*/ 9 background-color: #2f2f2f; 10 height: 100%; /*讓導航欄與頁面同高*/ 11 top: 0; left: 0; /*設置了固定定位后這兩個屬性才起作用*/ 12 } 13 nav a { /*設置每個a標記的display屬性為block，這樣方便控制每個a標記的樣式*/ 14 font-weight: bold; 15 font-size: 18px; 16 color: #ffffff; 17 display: block; 18 padding: 15px; 19 text-decoration: none; 20 } 21 nav div a:first-child { /*通過偽類來控制活動頁面的a標記的樣式，作為靜態頁面每個頁面都要寫不同的css控制樣式， 22 所以使用不方便的話可以使用class來控制樣式*/ 23 box-shadow: -1px 0.5px 4px 1px #777 inset; 24 background-color: #e58c7c; 25 } 26 nav div a:hover { 27 background-color: #e58c7c; 28 } 29 nav div a:active { 30 box-shadow: -1px 0.5px 4px 1px #777 inset; 31 background-color: #e58c7c; 32 } 33 </style>
實現后是這個效果：
