一般情况下都是用CSS的fixed固定定位,但不兼容IE6,在IE6下,用absolute方式。
下面给出简单的兼容写法代码实现。仅供参考:
<style>*{margin:0px padding:0px}
body {height:2000px}
div {width:100px height:100px background:#ccc position:absolute bottom:0px right:0px}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1')
if(window.navigator.userAgent.indexOf('MSIE 6') != -1)
{
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop
oDiv.style.top = top + 'px'
}
}
else
{
oDiv.style.position='fixed'
}
}
</script>
单独的css是无法完成导航条的,需要结合html,一般导航条的制作都是通过一个div包裹着ul,使用li来排列完成导航条的html部分,css中,我们需要给这个div宽高,还需要设置好li的宽,高,还有一个float属性,这样基本上导航条就制作完成,请看代码:<html>
<head>
<style>
#div1{
width:600px
height:40px
font-size:13px
}
#div1 ul li{
list-style:none
width:50px //具体的高宽需要根据实际要求
height:30px
}
</head>
<body>
<div id='div1'>
<ul>
<li><a href=''>目录1</a></li>
<li><a href=''>目录2</a></li>
<li><a href=''>目录3</a></li>
<li><a href=''>目录4</a></li>
</ul>
</div>
</body>
</html>