将导航栏始终固定在窗口顶部:

た 入场券 2022-01-16 08:21 335阅读 0赞

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

代码实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="http://www.softwhy.com/" />
  6. <title>固定在窗口顶部</title>
  7. <style type="text/css">
  8. *{
  9. padding:0px;
  10. margin:0px;
  11. }
  12. body, ul, li{
  13. background-color:white;
  14. font-size:12px;
  15. font-family:Arial, Helvetica, sans-serif;
  16. text-align:center;
  17. }
  18. #main{
  19. width:20px;
  20. height:1000px;
  21. margin:0px auto;
  22. background-color:#CCC;
  23. }
  24. #nav{
  25. width:500px;
  26. margin:0px auto;
  27. position:fixed;/*固定作用*/
  28. top:0px;
  29. left:490px;
  30. /*ie6下样式,加下划线表示只针对ie6 的hack */
  31. _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
  32. _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
  33. z-index:9999; /* 让导航栏浮在网页的高层位置,遇到flash和图片时候也能始终保持最外层 */
  34. text-align:left;
  35. }
  36. a{
  37. color:#000000;
  38. text-decoration:none;
  39. }
  40. .menu{
  41. width:120px;
  42. height:18px;
  43. margin:0px 4px 0px 0px;
  44. background-color:#F5F5F5;
  45. color:#999999;
  46. border:1px solid #EEE8DD;
  47. padding:6px 0px 0px 0px;
  48. overflow-y:hidden;
  49. cursor:hand;
  50. display:inline;
  51. list-style:none;
  52. font-weight:bold;
  53. float:left;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div id="nav">
  59. <ul>
  60. <li class="menu"><a href="#">前台专区</a></li>
  61. <li class="menu"><a href="#">后台专区</a></li>
  62. <li class="menu"><a href="#">交流专区</a></li>
  63. </ul>
  64. </div>
  65. <div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
  66. </body>
  67. </html>

上面的代码已经实现了需要的功能,导航条固定在了网页的顶部,这个主要是使用了position:fixed,然后将top值设置为0即可,但是仅仅使用position:fixed还是不够,因为IE6浏览器并不支持,所以还需要进行浏览器兼容性设置,那就是添加以下代码即可:

_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/ _top:expression(documentElement.scrollTop + “px”); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */

主要是fixed

转载于:https://my.oschina.net/u/1450300/blog/1560300

发表评论

表情:
评论列表 (有 0 条评论,335人围观)

还没有评论,来说两句吧...

相关阅读