這篇文章主要講解了“css怎么固定導(dǎo)航欄”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css怎么固定導(dǎo)航欄”吧！

我們提供的服務(wù)有：做網(wǎng)站、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、資興ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的資興網(wǎng)站制作公司

在css中，可以使用position屬性固定導(dǎo)航欄；只需要給導(dǎo)航欄元素添加“position: fixed;”樣式進(jìn)行固定定位即可。固定定位會使元素固定在窗口的某個位置，即使窗口滾動也不會移動，不會對窗口其他元素造成影響。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css固定導(dǎo)航欄的方法：

1、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>

2、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這個屬性，生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位。然后將它距離頂部的舉例設(shè)為0（即top: 0），這樣固定在頂部的導(dǎo)航就做好了，詳細(xì)代碼如下：

<style type="text/css">
    *{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;
   }
</style>

下面我們看一下實(shí)際效果：

當(dāng)滑動鼠標(biāo)后：

導(dǎo)航欄被固定住，最關(guān)鍵的一步就是使用定位 position并將其屬性值設(shè)為 fixed，舉例頂部的距離top設(shè)為0。

感謝各位的閱讀，以上就是“css怎么固定導(dǎo)航欄”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css怎么固定導(dǎo)航欄這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁標(biāo)題：css怎么固定導(dǎo)航欄
本文路徑：http://www.chinadenli.net/article12/gghogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站制作、網(wǎng)站收錄、電子商務(wù)

廣告

聲明：本網(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)