|  首頁  |  資訊  |  評測  |  活動  |  學院  |  訪談  |  專題  |  雜志  |  產服  |  
您現在的位置:硅谷網> 學院> 經驗>

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手機的照片傳到蘋果Mac電腦?
如何把蘋果iPhone手機的照片傳到蘋果Mac電
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
mcafee是什么軟件好用嗎?McAfee中文譯名是
自媒體賬號如何申請?各個平臺運營方法匯總!
自媒體賬號如何申請?各個平臺運營方法匯總
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
如何把蘋果iPhone手機的照片傳到蘋果Mac電
最新
·巴西5G不排除華為是什么情況?為何巴西5G不排除華
·如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
·硅谷有多大面積?美國硅谷有多大?面積多少?
·iframe怎么用?iframe標簽屬性iframe寫法詳解!
·mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
熱點
·做客、作客、座客和坐客的意思和區別是什么?
·硅谷為什么叫硅谷?硅谷到底是什么意思呢?
·知道UV、VV,CV是什么?PV、UV、IP什么意思?
·自媒體賬號如何申請?各個平臺運營方法匯總!
·目前微信有什么bug?微信bug是什么意思啊?
舊聞
·百度新聞源:百度新聞源審核、被清理、解封辦
·蘋果電腦MAC系統登錄遠程桌面 如何能夠實現?
·CAXA二維CAD教程:把圖紙名默認為文件名
·從事游戲策劃,工作中中最難的一點是什么?
·簡易教程:如何將iPad mini快速升級到iOS 7 b
廣告
硅谷影像
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
什么是域名糾錯系統?怎么關閉域名糾錯系統?
什么是域名糾錯系統?怎么關閉域名糾錯系統?
董事長屬于高管嗎?公司董事屬于公司高管嗎?
董事長屬于高管嗎?公司董事屬于公司高管嗎?
server服務:server服務自動停止關閉如何解決?
server服務:server服務自動停止關閉如何解決?
怎么關閉域名糾錯系統?什么是域名糾錯系統?
怎么關閉域名糾錯系統?什么是域名糾錯系統?
關于我們·About | 聯系我們·contact | 加入我們·Join | 關注我們·Invest | Site Map | Tags | RSS Map
電腦版·PC版 移動版·MD版 網站熱線:(+86)010-57255600
Copyright © 2007-2020 硅谷網. 版權所有. All Rights Reserved. <京ICP備12003855號-2>
英雄杀斗魂
今天吉林11选5开 香港权威一波中特 怎么在手机上玩qq麻将 排列3d试机号今天是多少 NBA季前赛 利用互联网怎么赚钱 陕西快乐10分开奖直播 贵阳捉鸡麻将辅导工具 2018黄大仙六肖必中特 广东麻将推倒胡下载老版本 秒速飞艇开奖视频 财云配资 三分彩是全国开奖吗 吉林快3专家和值推荐 26选5的好彩3 格力电器股票分析报告