html和css如何將導航欄固定在頁面頂部

這篇文章將為大家詳細講解有關html和css如何將導航欄固定在頁面頂部，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

                                                           大家在瀏覽網站時有沒有發現，幾乎每個網站都有導航欄，而且有些導航可以固定在頂部不動，不管滾動條移動到哪里，都會固定在一個位置，你知道頂部固定導航欄怎么寫嗎？這篇文章就給大家講講如何使導航欄固定在頂部，以及導航欄固定在頂部的代碼，有一定的參考價值，感興趣的朋友可以看看。

實現將導航欄固定在頂部需要用到很多CSS中的屬性，比如float浮動，position定位， list-style-type屬性等等，如有不清楚的同學可以參考億速云的相關文章，或者訪問CSS視頻教程，希望可以幫助到你。

實例詳解：用html和css將導航欄固定在頂部

HTML部分：

創建一個ul標簽用于制作無序列表，因為需要頁面跳轉的效果，還要在li標簽中插入a標簽，將導航內容寫入a標簽中。最后創建一個div，將div高度設為1500px，當滑動滾動條時，方便觀察導航欄的位置，具體代碼如下

<ul>
   <li><a class="active" href="#home">首頁</a></li>
   <li><a href="#news">新聞動態</a></li>
   <li><a href="#contact">聯系我們</a></li>
   <li><a href="#about">關于我們</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>

CSS部分：

基本框架已經搭建出來了，現在用CSS美化頁面，用 float: left將無序列表左邊浮動，排列在一行，用Padding調整導航之間的間距，用hover偽類選擇器設置鼠標懸停效果，當鼠標經過導航時呈現紅色，當導航被激活時，呈現黃色。最重要的一步就是將導航欄固定在頁面頂部，我們用position: fixed這個屬性，然后將它距離頂部的舉例設為0（即top: 0），這樣固定在頂部的導航就做好了，詳細代碼如下：

*{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       background-color: #333;
       position: fixed;
       top: 0;
       width: 100%;
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover:not(.active) {
       background-color: red;
   }   
   .active {
       background-color: yellow;
   }

效果圖：

由圖可見，當滾動條往下滑動時，導航欄的位置沒有發生變化，一直固定在頂部，實現導航欄固定在頂部的效果，最關鍵的一步就是使用定位 position并將其屬性值設為 fixed，舉例頂部的距離top設為0。

關于html和css如何將導航欄固定在頁面頂部就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。