css+div如何将淘宝客服悬浮固定在右下角,不随滚动条移动。

html-css07

css+div如何将淘宝客服悬浮固定在右下角,不随滚动条移动。,第1张

一般情况下都是用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>