CSS實(shí)現(xiàn)網(wǎng)頁(yè)頂部拖動(dòng)無(wú)閃爍工具欄
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在天涯社區(qū)發(fā)現(xiàn)的一個(gè)始終固頂工具欄，用css代碼布局，原先發(fā)現(xiàn)有少這樣的頂部工具條，但有很多在拖動(dòng)滾動(dòng)條的時(shí)候有閃爍現(xiàn)象，竟然發(fā)現(xiàn)天涯這個(gè)沒(méi)有閃爍 ，于是花點(diǎn)時(shí)間從天涯扒下來(lái)，這就是完整的代碼，實(shí)際上細(xì)心的朋友會(huì)發(fā)現(xiàn)，這個(gè)頂部的工具條實(shí)則是一個(gè)平鋪的背景圖像，css起到固定背景的作用，也算是一種獨(dú)特的實(shí)現(xiàn)方法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>頂部拖動(dòng)無(wú)閃爍菜單欄</title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { background-image: url(); background-attachment: fixed; } #topNavWrapper { width: 980px; text-align: left; height: 31px; margin: 0px auto; z-index:100; _position: relative ; _top:0px; } #topNav { width: 980px; float: left; display: block; z-index: 100; overflow: visible; position: fixed; top: 0px; /* position fixed for IE6 */ _position: absolute; _top: expression(documentElement.scrollTop + "px"); background-image: url(http://www.codefans.net/jscss/demoimg/201003/top_r.gif); background-repeat: no-repeat; background-position: right; height: 31px; } </style> </head> <body> <div class="div_content" id="topNavWrapper"> <ul class="jd_menu" id="topNav">
</ul> </div> <table><tr><td height="1080"></td></tr></table> </body> </html> 該文章在 2023/10/21 12:01:43 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
