CSS實現(xiàn)網(wǎng)頁頂部拖動無閃爍工具欄
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
在天涯社區(qū)發(fā)現(xiàn)的一個始終固頂工具欄，用css代碼布局，原先發(fā)現(xiàn)有少這樣的頂部工具條，但有很多在拖動滾動條的時候有閃爍現(xiàn)象，竟然發(fā)現(xiàn)天涯這個沒有閃爍 ，于是花點時間從天涯扒下來，這就是完整的代碼，實際上細心的朋友會發(fā)現(xiàn)，這個頂部的工具條實則是一個平鋪的背景圖像，css起到固定背景的作用，也算是一種獨特的實現(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>頂部拖動無閃爍菜單欄</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ān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
