| 如何将导航栏始终固定在窗口顶部 如何将导航栏始终固定在窗口顶部: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.daoqin.net/" /> <title>道勤网</title> <style type="text/css"> *{ padding:0px; margin:0px; } body, ul, li{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:center; } #main{ width:20px; height:1000px; margin:0px auto; background-color:#CCC; } #nav{ width:500px; margin:0px auto; position:fixed;/*固定作用*/ top:0px; left:490px; /*ie6下样式，加下划线表示只针对ie6 的hack */ _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/ _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */ z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */ text-align:left; } a{ color:#000000; text-decoration:none; } .menu{ width:120px; height:18px; margin:0px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; display:inline; list-style:none; font-weight:bold; float:left; } </style> </head> <body> <div id="nav"> <ul> <li class="menu"><a href="#">前台专区</a></li> <li class="menu"><a href="#">后台专区</a></li> <li class="menu"><a href="#">交流专区</a></li> </ul> </div> <div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div> </body> </html> 上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可: _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/ _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */ |
关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )
GMT+8, 2024-5-17 15:32
