在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例:
蚂蚁部落 *{ 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;}查看更多关于如何将导航栏始终固定在窗口顶部_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did108686