代码实例
固定在窗口顶部
*{
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