html和css如何將導(dǎo)航欄固定在頁面頂部

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

創(chuàng)新互聯(lián)是專業(yè)的伊吾網(wǎng)站建設(shè)公司，伊吾接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行伊吾網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

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

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

HTML部分：

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

<ul>
   <li><a class="active" href="#home">首頁</a></li>
   <li><a href="#news">新聞動態(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將無序列表左邊浮動，排列在一行，用Padding調(diào)整導(dǎo)航之間的間距，用hover偽類選擇器設(shè)置鼠標(biāo)懸停效果，當(dāng)鼠標(biāo)經(jīng)過導(dǎo)航時呈現(xiàn)紅色，當(dāng)導(dǎo)航被激活時，呈現(xiàn)黃色。最重要的一步就是將導(dǎo)航欄固定在頁面頂部，我們用position: fixed這個屬性，然后將它距離頂部的舉例設(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;
   }

效果圖：

html和css如何將導(dǎo)航欄固定在頁面頂部

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

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

新聞標(biāo)題：html和css如何將導(dǎo)航欄固定在頁面頂部
文章來源：http://bm7419.com/article28/gossjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站收錄、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站