我们经常遇到需要在两侧或一侧浮动的图片或按钮,特别是电商类网站需要在网页一侧浮动在线客服之类的按钮和图标。
大部分的浮动按钮之类的代码要么很复杂,要么简单但是不兼容IE6,毕竟IE6在中国的占有率还是比较高的,那么现在跟大家分享一个支持IE6简单的CSS代码。
这段CSS代码带浮动链接和回到顶部按钮:
CSS代码如下:(top.css)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | #feedba ck{ right : 100px ; width : 70px ; height : 100px ; line-height : 15px ; overflow : visible ; padding : 10px 5px ; border-radius: 5px ; bottom : 180px ; float : right ; position : fixed !important ; top : 200px ; } *html #feedba ck { position : absolute ; z-index : 300 ; top :expression(offsetParent.scrollTop+ 200 ); right : 20px ; /*兼容IE6*/ } #feedba ck a{ text-decoration : none ; color : #000 ; } #feedba ck_btn { -moz-border-radius: 5px ;-khtml-border-radius: 5px ;-webkit-border-radius: 5px ;border-radius: 5px ; border : 1px solid #dfdfdf ; cursor : pointer ; padding : 5px ; margin : 5px ; background : #fff ; width : 60px ; height : 20px ; font-size : 12px ; } #returntop{ -moz-border-radius: 5px ;-khtml-border-radius: 5px ;-webkit-border-radius: 5px ;border-radius: 5px ; border : 1px solid #dfdfdf ; cursor : pointer ; padding : 5px ; margin : 5px ; background : #fff ; width : 60px ; height : 20px ; font-size : 12px ; } |
html代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < link rel = "stylesheet" href = "top.css" media = "all" /> < div id = "feedback" > < div id = "feedback_btn" >< a href = "" target = "_blank" >客服</ a ></ div > < div id = "feedback_btn" >< a target = "_blank" href = "" >QQ</ a ></ div > < div id = "feedback_btn" >< a target = "_blank" href = "" >旺旺</ a ></ div > < div id = "returntop" >回顶部</ div > < script type = "text/javascript" > var getDiv=document.getElementById('returntop'); getDiv.onclick=function(){ window.scrollTo(0,0); } </ script > </ div > < table width = "90%" border = "0" align = "center" bgcolor = "#f8f8f8" height = "1500" >< td ></ td ></ table > |
其中回到顶部使用了一个兼容IE6的JS代码,而没有使用#标签:
1 2 3 4 | var getDiv=document.getElementById( 'returntop' ); getDiv.onclick= function (){ window.scrollTo(0,0); } |
- 相关文章 -
HTML网页DIV布局设计的常见错误 - 2009-07-31
今日全国哀悼日为舟曲灾区祈祷…将网站变成灰色CSS代码 - 2010-08-15
1寸、小2寸、2寸证件照片是多大尺寸? - 2017-11-25
那些看起来美美的照片是怎么拍出来的? - 2017-11-21
HTML to JS 或者 JS to HTML (HTML&JS互转) - 2010-07-31
投影仪投影是菱形像素和方形像素哪种更清晰呢? - 2017-10-19
Photoshop组的混合属性里穿透是什么意思?PS里穿透是什么意思? - 2010-07-29
如何设置网站的PC版和移动版/无线版,以及两者之间的适配关系 - 2017-08-04
- 文章评论 -
- 最新评论[0条评论] -
版权所有©逍遥峡谷 - 星际中心超自然局 · 地球总部 |
逍遥峡谷 ·
酷品优选
Copyright©Interstellar Central Occult Agency (I.C.O.A)
本局纯属虚构,如有雷同,纯属巧合