CSS中可以使用position: fixed;
屬性將導(dǎo)航欄固定在底部,具體步驟如下:
1、在CSS中設(shè)置導(dǎo)航欄的樣式,
.navbar { position: fixed; bottom: 0; width: 100%; height: 50px; background-color: #333; color: #fff; }
2、將上述樣式應(yīng)用到HTML中的導(dǎo)航欄元素上,
<div class="navbar"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關(guān)于我們</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </div>
3、保存并查看效果,導(dǎo)航欄應(yīng)該已經(jīng)固定在底部了。
注意:使用position: fixed;
屬性會(huì)將導(dǎo)航欄固定在瀏覽器窗口中,即使?jié)L動(dòng)頁面,導(dǎo)航欄也會(huì)保持在底部,如果需要讓導(dǎo)航欄在特定位置固定,可以使用top
、right
、left
等屬性進(jìn)行調(diào)整。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請以鏈接形式注明文章出處。