100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html导航栏固定在顶部 将导航栏始终固定在窗口顶部:

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

时间:2022-06-08 06:38:43

相关推荐

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

代码实例

固定在窗口顶部

*{

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;

}

前台专区后台专区交流专区大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了

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

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

主要是fixed

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。