|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級(jí)文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級(jí)文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 大家在瀏覽網(wǎng)站時(shí)有沒有發(fā)現(xiàn),幾乎每個(gè)網(wǎng)站都有導(dǎo)航欄,而且有些導(dǎo)航可以固定在頂部不動(dòng),不管滾動(dòng)條移動(dòng)到哪里,都會(huì)固定在一個(gè)位置,你知道頂部固定導(dǎo)航欄怎么寫嗎?這篇文章就給大家講講如何使導(dǎo)航欄固定在頂部,以及導(dǎo)航欄固定在頂部的代碼,有一定的參考價(jià)值,感興趣的朋友可以看看。實(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)樾枰撁嫣D(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)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!