實(shí)現(xiàn)將導(dǎo)航欄固定在頂部需要用到很多CSS中的屬性，比如float浮動(dòng)，position定位， list-style-type屬性等等，如有不清楚的同學(xué)可以參考PHP中文網(wǎng)的相關(guān)文章，或者訪問CSS視頻教程，希望可以幫助到你。

實(shí)例詳解：用html和css將導(dǎo)航欄固定在頂部

HTML部分：

創(chuàng)建一個(gè)ul標(biāo)簽用于制作無序列表，因?yàn)樾枰�頁面跳轉(zhuǎn)的效果，還要在li標(biāo)簽中插入a標(biāo)簽，將導(dǎo)航內(nèi)容寫入a標(biāo)簽中。最后創(chuàng)建一個(gè)div，將div高度設(shè)為1500px，當(dāng)滑動(dòng)滾動(dòng)條時(shí)，方便觀察導(dǎo)航欄的位置，具體代碼如下

<ul>
   <li><a class="active" href="#home">首頁</a></li>
   <li><a href="#news">新聞動(dòng)態(tài)</a></li>
   <li><a href="#contact">聯(lián)系我們</a></li>
   <li><a href="#about">關(guān)于我們</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>

CSS部分：

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

*{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;
   }

效果圖：

由圖可見，當(dāng)滾動(dòng)條往下滑動(dòng)時(shí)，導(dǎo)航欄的位置沒有發(fā)生變化，一直固定在頂部，實(shí)現(xiàn)導(dǎo)航欄固定在頂部的效果，最關(guān)鍵的一步就是使用定位 position并將其屬性值設(shè)為 fixed，舉例頂部的距離top設(shè)為0。

以上給大家介紹了導(dǎo)航欄固定在頂部的實(shí)現(xiàn)方法，比較詳細(xì)，剛剛接觸前端的小伙伴，一定要自己動(dòng)手嘗試，看看自己能不能實(shí)現(xiàn)更加炫酷的效果，希望這篇文章對(duì)你有所幫助！

更多相關(guān)視頻教程請(qǐng)?jiān)L問 CSS3視頻教程

以上就是將導(dǎo)航欄固定在頁面頂部的方法（圖文詳解）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！