二肖中特大公开
  |  首頁  |  資訊  |  評測  |  人物  |  活動  |  學院  |  新報  |  專欄  |  專題  |  專區  |  
您現在的位置:硅谷網> 學院> 教程>

html如何把導航欄固定在底部隨瀏覽器移動?

2019-04-15 15:14 作者:百度經驗 來源:硅谷網綜合 HV: 編輯:GuiGu 【搜索試試

導航欄固定在底部,隨瀏覽器一起移動;

工具/原料

需要的CSS樣式:position:fixed;z-index:999;left:0;right:0;bottom:0;

正常導航,

方法/步驟1:

原理:通過CSS樣式就可以完成

position:fixed;

生成絕對定位的元素,相對于瀏覽器窗口進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

方法/步驟2:

用fixed的話,會出現優先級別較低,導致被其他div覆蓋的情況,那么這里就需要用到z-index:999;來讓他成為最高級別,不至于被覆蓋,999只是個數字,可以隨意更改,比其他的高就可以;

方法/步驟3:

定位:left:0;right:0;bottom:0;

這三個樣式寫好后,就可以固定在底部并居中了。不要寫top:0;

方法/步驟4:

div部分:

首頁

列表頁

內容頁

方法/步驟5:

CSS樣式部分:

.a1{

margin: auto;

padding:0;

list-style: none;

font-size:14px;

width:1020px;

position:fixed;

z-index:999;

bottom:0px;

left:0;

right:0;

}

注意事項

樣式要作用于,不要作用到 上面,會出現堆疊

z-index的數值不一定非得999,比其他大就可以;

樣式添加浮動后,不要在div里面清除,這樣不會影響布局;

【對“html如何把導航欄固定在底部隨瀏覽器移動?”發布評論】

版權及免責聲明:
① 本網站部分投稿來源于“網友”,涉及投資、理財、消費等內容,請親們反復甄別,切勿輕信。本網站部分由贊助商提供的內容屬于【廣告】性質,僅供閱讀,不構成具體實施建議,請謹慎對待。據此操作,風險自擔。
② 內容來源注明“硅谷網”及其相關稱謂的文字、圖片和音視頻,版權均屬本網站所有,任何媒體、網站或個人需經本網站許可方可復制或轉載,并在使用時必須注明來源【硅谷網】或對應來源,違者本網站將依法追究責任。
③ 注明來源為各大報紙、雜志、網站及其他媒體的文章,文章原作者享有著作權,本網站轉載其他媒體稿件是為傳播更多的信息,并不代表贊同其觀點和對其真實性負責,本網站不承擔此類稿件侵權行為的連帶責任。
④ 本網站不對非自身發布內容的真實性、合法性、準確性作擔保。若硅谷網因為自身和轉載內容,涉及到侵權、違法等問題,請有關單位或個人速與本網站取得聯系(聯系電話:01057255600),我們將第一時間核實處理。
相關
廣告
頭條
圖文
查找我的iPhone詳細教程:蘋果手機丟了怎么辦?
查找我的iPhone詳細教程:蘋果手機丟了怎么
山寨安卓手機刷機教程 不用擔心自己不會刷機了
山寨安卓手機刷機教程 不用擔心自己不會刷
dedecms織夢上傳圖片相對路徑改成絕對路徑方法
dedecms織夢上傳圖片相對路徑改成絕對路徑
織夢dedecms配置手機wap站點并綁定二級域名!
織夢dedecms配置手機wap站點并綁定二級域名
最新
·編輯html,如何把導航欄固定在網頁底部隨屏幕移動
·html如何把導航欄固定在底部隨瀏覽器移動?
·查找我的iPhone詳細教程:蘋果手機丟了怎么辦?
·dede下載遠程圖片格式修改?JPEG圖片本地化!
·dedecms批量命令:dede合并欄目、刪除欄目方法
熱點
·dedecms批量命令:dede合并欄目、刪除欄目方
·dedecms織夢上傳圖片相對路徑改成絕對路徑方
·織夢dedecms配置手機wap站點并綁定二級域名!
·DEDE系統如何調用圖片?圖片標簽調用方法大全
·為何總寫自我意淫型文案?文案應該怎么寫?
舊聞
·微信營銷時代 記住這五步就能優化微信營銷
·織夢dedecms瀏覽次數初始默認值如何設置修改
·簡易教程:如何將iPad mini快速升級到iOS 7 b
·去掉1個字符,解決織夢移動版無法自動更新問
·星座劃分日期和時間查詢?星座劃分方式是什么
廣告
硅谷影像
查找我的iPhone詳細教程:蘋果手機丟了怎么辦?
查找我的iPhone詳細教程:蘋果手機丟了怎么辦?
山寨安卓手機刷機教程 不用擔心自己不會刷機了
山寨安卓手機刷機教程 不用擔心自己不會刷機了
星座劃分日期和時間查詢?星座劃分方式是什么?
星座劃分日期和時間查詢?星座劃分方式是什么?
為何總寫自我意淫型文案?文案應該怎么寫?
為何總寫自我意淫型文案?文案應該怎么寫?
織夢dede后臺頁面和功能 修改及精簡操作方法
織夢dede后臺頁面和功能 修改及精簡操作方法
安卓系統預裝軟件卸載 無需ROOT刪除自帶APP
安卓系統預裝軟件卸載 無需ROOT刪除自帶APP
關于我們·About | 聯系我們·contact | 加入我們·Join | 贊助我們·Sponsor | Site Map | Tags | RSS Map
電腦版·PC版 移動版·MD版 網站熱線:(+86)010-57255600
Copyright © 2007-2019 硅谷網. 版權所有. All Rights Reserved. <京ICP備12003855號-2>
二肖中特大公开