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

編輯html,如何把導航欄固定在網頁底部隨屏幕移動?

2019-04-15 15:19 作者:佚名 來源:硅谷網綜合 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),我們將第一時間核實處理。
相關
·html如何把導航欄固定在底部隨瀏覽器移動?
廣告
頭條
新聞來源很重要?將近一半讀者根本不關心它! 新聞來源很重要?將近一半讀者根本不關心它!
在網絡主頁上發新聞的好日子早就過去了。今天的受眾更愿意把超過一半的流量花在社交媒……
·新聞來源很重要?將近一半讀者根本不關心它!
圖文
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
如何把蘋果iPhone手機的照片傳到蘋果Mac電
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
mcafee是什么軟件好用嗎?McAfee中文譯名是
自媒體賬號如何申請?各個平臺運營方法匯總!
自媒體賬號如何申請?各個平臺運營方法匯總
it是什么行業?it技術是什么?it是什么意思?
it是什么行業?it技術是什么?it是什么意思
最新
·如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
·硅谷有多大面積?美國硅谷有多大?面積多少?
·iframe怎么用?iframe標簽屬性iframe寫法詳解!
·mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
·什么是域名糾錯系統?怎么關閉域名糾錯系統?
熱點
·硅谷為什么叫硅谷?硅谷到底是什么意思呢?
·做客、作客、座客和坐客的意思和區別是什么?
·知道UV、VV,CV是什么?PV、UV、IP什么意思?
·自媒體賬號如何申請?各個平臺運營方法匯總!
·物聯網時代真的要來了,究竟物聯網是什么呢?
舊聞
·企業網站運維成本分析 選用saas型建站平臺經
·人生苦短!怎樣才能遠離那些浪費你生命的破事
·做客、作客、座客和坐客的意思和區別是什么?
·去掉1個字符,解決織夢移動版無法自動更新問
·織夢dedecms配置手機wap站點并綁定二級域名!
廣告
硅谷影像
如何把蘋果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>
香港六合彩买码站