整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          《小白H5成長之路23》網(wǎng)頁漂浮層與浮動導(dǎo)航是怎么實現(xiàn)的

          小白,你最近看CSS的時候碰到position屬性了么?"

          “碰到了,通過position可以改變?nèi)萜鞯亩ㄎ唬矣浀霉俜矫枋鍪沁@樣的:這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。”

          “恩,不錯,今天咱說一下position里面的fixed類型吧,這個屬性值是讓容器基于瀏覽器窗口的絕對定位,在我們平時的制作中經(jīng)常會碰到。”

          老朱接著說:“給一個容器設(shè)定position為fixed以后,可以通過left、right、bottom、top進(jìn)行四個方向的距離定位。現(xiàn)在我們在頁面中寫一個fixed容器,看一下代碼片段。”

          “你看,這里我在body里面加了一個標(biāo)識為foot的div,然后他的css里面把position設(shè)置成了fixed,并且bottom(距離底部)為0,這里的bottom是基于瀏覽器窗口的距離進(jìn)行計算的,foot的寬和高也進(jìn)行了設(shè)定。現(xiàn)在我們看一下效果!”

          “你可以看到,拖動滾動條往下滾動網(wǎng)頁的時候,foot的位置并不會隨著滾動條的滾動發(fā)生改變,它就像是漂浮在那里一樣。這里的foot是一個div容器,所以它的內(nèi)部我們還可以放任何你希望布局的內(nèi)容,比如放一個圖片,或者其他的容器。”

          “這里插入的圖片要想跟foot容器寬度一致,根據(jù)我們之前說過的對圖片css的操作,把圖片的寬度(width)設(shè)定為100%,圖片就會自動與父容器寬度一致了。”

          小白突然想到了很多手機HTML5頁面下方都有導(dǎo)航條,問道:“很多手機的HTML5頁面里面下方的導(dǎo)航條不會隨著頁面的滾動而滾動,這種導(dǎo)航條是不是也通過fixed來設(shè)定的。”

          “是的,跟這里的foot一樣,我們只需要把導(dǎo)航條的父容器設(shè)定為fixed就可以了。有個需要注意的地方是導(dǎo)航條會根據(jù)手機屏幕的分辨率自動占用屏幕寬度,所以我們在給foot設(shè)定css樣式的時候就不能設(shè)定寬度了。”

          小白問道:“那應(yīng)該怎么設(shè)定呢?”

          老朱說:“你忘了我們剛說了fiex可以通過top、right、bottom、left設(shè)定四個方向的距離么?如果要讓一個fixed容器左右靠邊,我們只需要left為0,right為0,它就會自動匹配窗口的寬度。現(xiàn)在我們把之前的foot容器改一下。”

          “通過設(shè)定bottom、left、right可以讓foot靠近底部并且保持與窗口寬度一致。然后我們在foot里面放了一個ul-li容器,讓li容器向左浮動并且寬度為父容器的25%,布局就會變成這樣。”

          “網(wǎng)頁上的底部導(dǎo)航通常都會放入透明的png圖片,現(xiàn)在我們插入png圖,再進(jìn)行一下css的調(diào)整。”

          “網(wǎng)頁底部導(dǎo)航條,上面還會牽扯到鼠標(biāo)事件,焦點樣式變化,這些知識我們隨后也會一一展開討論,今天先這樣吧!你先練習(xí)練習(xí)今天說的這些內(nèi)容,然后試著做一個居中漂浮的層,看看能不能做出來!”


          想學(xué)H5的朋友可以關(guān)注老爐,您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力!

          篇文章,小海老師帶領(lǐng)大家一同做一個利用CSS技術(shù)實現(xiàn)的導(dǎo)航欄。通過這個導(dǎo)航欄的制作,希望大家能夠?qū)η皫灼恼轮袑W(xué)習(xí)到的CSS屬性能有一個整體的認(rèn)識,并能夠達(dá)到靈活運用的程度。

          承接文章:靈活控制塊級元素在一行內(nèi)顯示,CSS浮動屬性,知道原理就很簡單

          技術(shù)等級:初級 | 適合前端開發(fā)的初學(xué)者閱讀學(xué)習(xí)。

          希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號,因為這些文章都是連載的,并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀,你一定會學(xué)到對你有用的知識。

          如果你是初學(xué)前端開發(fā),強烈建議跟著文章中講的步驟自己做一做。步驟不多,思路簡單,占用不了大家太多的時間,自己做一遍,一定會收獲不少。

          一、導(dǎo)航欄效果圖展示:

          今天我們要做的導(dǎo)航欄效果如下圖所示。

          導(dǎo)航欄效果圖展示

          這個效果主要使用的是<ul></ul>標(biāo)記對和<a></a>標(biāo)記對共同實現(xiàn)的。

          整個實例涉及到的CSS屬性如下所示:

          • width

          • height

          • background-color

          • list-style-type

          • display

          • float

          • margin

          • line-height

          二、實現(xiàn)頁面效果:

          首先為導(dǎo)航欄設(shè)置一個<div>容器,并設(shè)置其id屬性的取值設(shè)置為nav。該容器用來控制導(dǎo)航欄的通欄位置。通欄的容器寬度應(yīng)該設(shè)置為100%,這里高度設(shè)置為40px,顏色為#a72f2e。實現(xiàn)代碼如下所示:

          <div id=”nav”></div>

          #nav{

          width:100%; height:40px;

          background-color:#a72f2e;

          }

          由于要在通欄的容器中顯示固定寬度為1000px的導(dǎo)航欄主體,因此在該容器內(nèi)部再制作一個<div>容器,用來盛放真正的導(dǎo)航欄代碼。我們將它的class屬性取值為navContent。這個容器的寬度設(shè)置為1000px,高度與#nav的高度等高,并且在#nav容器內(nèi)部水平居中。實現(xiàn)代碼如下所示:

          <div class=”navContent”></div>

          #nav .navContent{

          width:1000px; height:40px;

          margin:0 auto;

          }

          接下來在.navContent容器內(nèi)部書寫導(dǎo)航欄的各個條目。導(dǎo)航欄是使用<ul></ul>標(biāo)記對實現(xiàn)的,而它的導(dǎo)航欄條目是利用<li></li>標(biāo)記對書寫的。因為導(dǎo)航欄需要單擊后跳轉(zhuǎn)頁面,所以在<li></li>內(nèi)部使用了<a></a>標(biāo)記對。

          這里要說明一點,因為<li></li>標(biāo)記對是塊級元素,<a></a>標(biāo)記對是內(nèi)聯(lián)元素,因此要讓<li></li>標(biāo)記對包裹<a></a>標(biāo)記對,不要用<a></a>標(biāo)記對包裹<li></li>標(biāo)記對。

          這里以導(dǎo)航欄條目“首頁”和“網(wǎng)站介紹”為例,下列HTML代碼展示了導(dǎo)航欄的條目內(nèi)容。

          <ul>

          <li><a href="index.html">首頁</a></li>

          <li><a href="#">網(wǎng)站簡介</a></li>

          </ul>

          需要更多的導(dǎo)航欄條目,可以在<ul>標(biāo)記對內(nèi)部重復(fù)書寫<li></li>和<a></a>的代碼格式。

          三、編寫整個導(dǎo)航欄的CSS樣式:

          整個導(dǎo)航欄是使用<ul></ul>標(biāo)記對實現(xiàn)的,所以需要對<ul></ul>標(biāo)記對編寫CSS樣式。

          由于無序列表的列表項左側(cè)帶有小圓點的項目符號,因此需要將該項目符號去掉。所以<ul></ul>標(biāo)記對的CSS代碼如下所示:

          #nav .navContent ul{

          list-style-type:none;

          }

          四、編寫導(dǎo)航欄條目的CSS樣式:

          導(dǎo)航欄條目是使用<li></li>標(biāo)記對實現(xiàn)的,所以需要對<li></li>標(biāo)記對編寫CSS樣式。

          由于<li></li>標(biāo)記對是塊級元素,因此即使去掉了左側(cè)的項目符號,所有的條目依然都各自獨占一行顯示,所以需要讓它們在一行內(nèi)顯示,這就需要讓所有的<li></li>標(biāo)記對左浮動。CSS代碼如下所示:

          #nav .navContent ul li{

          float:left;

          }

          五、編寫導(dǎo)航欄條目中鏈接的CSS樣式:

          導(dǎo)航欄條目中的鏈接是使用<a></a>標(biāo)記對實現(xiàn)的,所以需要對<a></a>標(biāo)記對編寫CSS樣式。

          由于<a></a>標(biāo)記對是內(nèi)聯(lián)元素,因此無法設(shè)置寬度和高度,也就無法為每一個導(dǎo)航欄條目設(shè)置尺寸。因此需要將<a></a>標(biāo)記對轉(zhuǎn)換為塊級元素(display屬性),然后設(shè)置寬度和高度(width屬性和height屬性)。

          有了寬度和高度,就需要讓鏈接的文本在容器中水平居中(text-align屬性)和垂直居中(line-height屬性)了。

          最后去掉鏈接的下劃線(text-decoration屬性),并設(shè)置鏈接的文本顏色(color屬性)。

          導(dǎo)航欄條目中鏈接的CSS代碼如下所示:

          #nav .navContent ul li a{

          display:block;

          width:100px; height:40px;

          text-align:center;

          line-height:40px;

          text-decoration:none;

          color:#dddddd;

          }

          六、編寫鼠標(biāo)經(jīng)過導(dǎo)航欄條目時的CSS樣式:

          鼠標(biāo)經(jīng)過導(dǎo)航欄目時,即使沒有觸碰到鏈接的文本部分,也應(yīng)該能夠進(jìn)行跳轉(zhuǎn)。因此需要對<a></a>標(biāo)記對編寫鼠標(biāo)經(jīng)過時的CSS樣式。

          鼠標(biāo)經(jīng)過時,希望背景顏色(background-color屬性)和文本顏色(color屬性)發(fā)生變化。

          鼠標(biāo)經(jīng)過鏈接時的CSS代碼如下所示:

          #nav .navContent ul li a:hover{

          background-color:#ff5857;

          color:#ffffff;

          }

          七、整體代碼:

          至此,這個簡單的導(dǎo)航欄效果就完全實現(xiàn)了,CSS整體使用了約30行代碼。實現(xiàn)這個導(dǎo)航欄效果的HTML代碼如下圖所示。

          HTML整體代碼

          實現(xiàn)這個導(dǎo)航欄效果的CSS代碼如下圖所示。

          CSS整體代碼

          小海教材

          如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容,可以私信我,我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你,幫助你在前端開發(fā)的道路上闊步前行。

          小海聲明

          在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章,逐步學(xué)到一定的知識,甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗,每寫一篇時我都盡量把握好措辭,用簡單易懂的語言描述,同時精心設(shè)計版面,讓版面更加豐富,激發(fā)閱讀興趣。所以,每一篇文章可能篇幅不長,但是都要耗費小海老師很久的時間。

          希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號,因為這些文章都是連載的,并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀,你一定會學(xué)到對你有用的知識。

          關(guān)注“小海前端”,我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章,也希望更多的初學(xué)者跟著學(xué)下去,我們共同將前端開發(fā)的路努力堅持的走下去。

          文章預(yù)告

          下一次,小海老師開始為大家講解CSS的盒屬性。盒屬性是div布局的基礎(chǔ),在實際的布局過程中有許多應(yīng)用技巧。下一篇文章我會為大家將盒屬性一個一個進(jìn)行詳細(xì)的分析。

          果你正在尋找能夠吸引人眼球的高素質(zhì)頂部懸浮菜單設(shè)計,那么這12個導(dǎo)航設(shè)計案例值得你一看~

          導(dǎo)航是網(wǎng)站和 APP 當(dāng)中必不可少的組成部分,它們引導(dǎo)用戶抵達(dá)目標(biāo),發(fā)現(xiàn)內(nèi)容。為了讓用戶能夠更加方便地使用導(dǎo)航,許多網(wǎng)站和 APP 選擇使用了頂部懸浮導(dǎo)航,無論瀏覽到哪里,都能輕松使用它跳轉(zhuǎn)到其他地方。雖然有的用戶并不喜歡這個一直占據(jù)屏幕空間的小控件,但是它確實提供了無與倫比的便捷性。

          如果你正在尋找能夠吸引人眼球的高素質(zhì)頂部懸浮菜單設(shè)計,那么今天的文章一定不要錯過,這12個導(dǎo)航設(shè)計絕對不會讓你失望。

          1. Ascensión Latorre(http://www.ascensionlatorre.com/home)

          雖然我并不懂法文,這個網(wǎng)站并不難使用和理解。

          在頁面的頂部你會看到包含文本的 LOGO 和導(dǎo)航鏈接,當(dāng)你向下滑動的時候,LOGO 中的文本消失,而導(dǎo)航上移。這樣的設(shè)計占據(jù)空間并不大,對于承擔(dān)繁重工作量的菜單而言,這是相對理想的選擇。

          不過,如果你覺得這樣還占空間的話,可以加入過渡動效,然后讓鏈接的文本變化為小圖標(biāo),這樣的技術(shù)也很成熟。

          2. Search Engine Journal(https://www.searchenginejournal.com/)

          SEJ 是一個很棒的博客,而它的導(dǎo)航設(shè)計也算得上是獨樹一幟,因為在別的地方幾乎看不到相同的設(shè)計。

          當(dāng)你訪問網(wǎng)站首頁的時候,你會看到導(dǎo)航下的輪播圖中嵌入了網(wǎng)站的 LOGO,導(dǎo)航欄左側(cè)有 LOGO 和注冊按鈕構(gòu)成的動態(tài)圖片。當(dāng)你向下滾動的時候,整個導(dǎo)航向右移動,在左側(cè)出現(xiàn)網(wǎng)站 LOGO,整個設(shè)計非常動感,也非常的炫酷。

          這樣的設(shè)計無疑是經(jīng)過仔細(xì)斟酌,并且確實有用的,兼顧到了品牌的設(shè)計和導(dǎo)航的功能性。

          3. AWD Agency(http://www.awdagency.com/en)

          在整個列表當(dāng)中,AWD Agency 的側(cè)邊欄式導(dǎo)航是為數(shù)不多的幾個案例之一。

          只需要點擊左上角的箭頭就能將側(cè)邊欄隱藏起來,縱向上空間更大,側(cè)邊欄導(dǎo)航所能承載的內(nèi)容并不會比頂部導(dǎo)航更少,而且在兼容移動端上一點都不含糊。

          這個設(shè)計的優(yōu)點在于可控性上非常不錯,處理得干凈利落,也很直接。

          4. Graz Secrets(http://grazsecrets.at/)

          我從來沒有用過 Graz Secrets 的 iOS APP,但是看了他們的官網(wǎng)之后,感受到他們在用戶體驗上的獨特想法,對此就很有興趣了。

          網(wǎng)站的頂部導(dǎo)航設(shè)計很有特色,通過小邊框來和下面的頁面部分來區(qū)分,最有特色的是導(dǎo)航欄最中間的位置,一個風(fēng)格獨特的「立即下載」的按鈕。

          當(dāng)你向下滾動的時候,整個導(dǎo)航會很好的融入整個布局。

          5. Grain & Mortar(http://grainandmortar.com/)

          Grain & Mortar 是我去年見過的最干凈的設(shè)計機構(gòu)的網(wǎng)站。

          許多網(wǎng)站會為了流行和時尚而使用一些圖形、動畫甚至圖片,這些元素常常會讓人感到困惑,但是 G&M 的網(wǎng)站不是這樣。這個網(wǎng)站中沒有多余的元素,但是最重要的是,網(wǎng)站的頂部懸浮導(dǎo)航的設(shè)計。

          網(wǎng)站首屏使用的是視頻背景,為了更好的融入感,導(dǎo)航條目懸浮在前景,這無疑帶來了沉浸式的體驗。當(dāng)頁面向下滾動的時候,通過轉(zhuǎn)場動畫,導(dǎo)航出現(xiàn)了一個白色的底,通過一條淺灰色的線,和頁面的內(nèi)容部分進(jìn)行了區(qū)分,并且固定懸浮在頂部。

          6. Jorge Rigabert(http://www.jorgerigabert.com/)

          Jorge Rigabert 同樣是一個非英語類的網(wǎng)站。這個網(wǎng)站同樣采用了側(cè)邊欄導(dǎo)航,由于網(wǎng)站采用了類似單頁這樣的設(shè)計,導(dǎo)航欄中的條目指向到頁面中不同的位置和模塊。當(dāng)你滾動頁面的時候,左側(cè)導(dǎo)航欄會隨之變化,為你高亮展示出所處的位置。頁面的布局算得上是中規(guī)中矩,而導(dǎo)航欄在指引性上的設(shè)計,可謂是出彩。

          7. Daniel Filler(http://danielfiller.com/)

          作為一個作品集網(wǎng)站,Daniel Filler 的網(wǎng)頁設(shè)計也非常的討喜,它和前面 G&M 的導(dǎo)航設(shè)計有許多相似的地方。打開首屏的時候,導(dǎo)航底部和背景 Banner 圖很好的融入到一起,頁面的左上角是巨大的 LOGO。

          當(dāng)你向下滾動的時候,導(dǎo)航消失隨后又出現(xiàn),這個時候它擁有了一個半透明的底部背景,巨大的 LOGO 部分顯示,融入導(dǎo)航,導(dǎo)航欄的條目則從最初的右邊挪到了靠左的位置。整個設(shè)計在體驗上總體是無縫順暢的,最讓人印象深刻的設(shè)計在于,常常出現(xiàn)在網(wǎng)頁右下角的「回到頂部」的箭頭按鈕,被放置在頂部導(dǎo)航的最右邊,非常的順手,頗為創(chuàng)新。

          8. Novotel Hotels(https://novotel.accorhotels.com/gb/usa/index.shtml)

          在我所看到的諸多酒店類的網(wǎng)站當(dāng)中,Novotel Hotels 的網(wǎng)站導(dǎo)航設(shè)計絕對是最特殊的那款。

          網(wǎng)站的許多導(dǎo)航功能并沒有直接擺出來,而是隱藏到了左上角的漢堡圖標(biāo)當(dāng)中。當(dāng)你向下滾動的時候,預(yù)訂篩選菜單會隨著滾動靠近頂部導(dǎo)航,然后粘在上面,懸浮置頂。方便用戶隨時隨地地搜索和篩選。

          9. FHOKE(https://www.fhoke.com/)

          FHOKE 這個網(wǎng)站的導(dǎo)航設(shè)計也不算復(fù)雜,實際上就是LOGO 和右上角的菜單按鈕,它是沒有底色,并且隨著頁面內(nèi)容的背景顏色變化而自動匹配對比強烈的黑色或者白色。這樣的設(shè)計讓導(dǎo)航無縫地融入到整個頁面的布局當(dāng)中,并且讓用戶可以隨時便捷地點擊導(dǎo)航中的內(nèi)容。

          10. Brit + Co(https://www.brit.co/)

          對于 Brit + Co 的導(dǎo)航設(shè)計,你會發(fā)現(xiàn)幾個非常不錯的優(yōu)點。當(dāng)你向下滾動瀏覽的時候,懸浮置頂?shù)膶?dǎo)航欄會自動隱藏起來,這樣會節(jié)省空間,并且這種設(shè)計也很直接。當(dāng)你向上回滾頁面的時候,導(dǎo)航會出現(xiàn)。

          而搜索功能也設(shè)計得非常巧妙,當(dāng)你點擊搜索按鈕的時候,搜索框會出現(xiàn)在導(dǎo)航下方,足夠長,足夠明顯的輸入框,比什么都好。

          11. Coloud(https://www.coloud.com/co_us_en)

          打開 Coloud 網(wǎng)站,向下滾動的時候,你會注意到導(dǎo)航欄的邊戶:它變窄了,變小了,甚至不會顯示公司的 LOGO 了。這看起來很瘋狂,但是誰會因為向下滾動瀏覽而忘記所處的網(wǎng)頁呢?當(dāng)然不會。導(dǎo)航這樣處理,其實更加方便,縮小,保持存在感,提升定位感和體驗。

          12. Prollective(https://prollective.com/)

          最后這個案例絕對是最返璞歸真的設(shè)計方案。沒有滾動的標(biāo)識,沒有搜索框,沒有視覺障礙,沒有動效,它就是在右上角上四個小小的鏈接,黑色,對比強烈,始終存在,節(jié)省空間,隨時可以點擊。對于極簡風(fēng)的網(wǎng)頁而言,這樣的設(shè)計效果是很不錯的。

          原文作者 : JAKE ROCHELEAU

          譯者/編輯 : 陳子木

          譯文地址:https://www.uisdc.com/12-fixed-sticky-navbars

          本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

          題圖來自 Pexels,基于 CC0 協(xié)議


          主站蜘蛛池模板: 久久精品无码一区二区三区日韩| 亚洲va乱码一区二区三区| 国产亚洲一区二区三区在线| 麻豆高清免费国产一区| 国产伦精品一区二区三区免费迷| 末成年女AV片一区二区| 中文字幕在线观看一区二区三区| 国产成人精品亚洲一区| 成人丝袜激情一区二区| 波多野结衣一区二区三区| 久久一区不卡中文字幕| 香蕉一区二区三区观| 成人免费av一区二区三区| 动漫精品专区一区二区三区不卡| 国模无码一区二区三区| 亚洲av无码一区二区三区在线播放 | 国产精品一区二区av不卡| 国产传媒一区二区三区呀| 国产麻豆剧果冻传媒一区| 色综合久久一区二区三区| 精品国产高清自在线一区二区三区| 国产精品一区二区久久精品涩爱| 国产成人久久精品区一区二区| 久久精品国产第一区二区三区 | 国产精品一区视频| 在线精品视频一区二区| 精品亚洲av无码一区二区柚蜜| 天堂一区二区三区精品| 国产凸凹视频一区二区| 精品国产亚洲一区二区在线观看 | 亚洲综合一区国产精品| 97久久精品无码一区二区| 亚洲av日韩综合一区久热| 亚洲国产AV一区二区三区四区| 亚洲日韩AV无码一区二区三区人 | 精品视频一区二区三区| 中文字幕一区二区三区在线不卡 | 亚洲国产综合精品中文第一区| 一区二区三区免费在线视频 | 无码国产精品一区二区免费式直播 | 亚洲图片一区二区|