css实现右侧浮动在线客服咨询按钮弹出联系方式效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现右侧浮动在线客服咨询按钮弹出联系方式效果代码
代码标签: 浮动 在线 客服 咨询 按钮 弹出 联系方式 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> /*reset*/ * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; } a { text-decoration: none; } a:hover { text-decoration: underline; } body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; color: #333333; } /*main css*/ .main-im { position: fixed; right: 10px; top: 300px; z-index: 100; width: 110px; height: 272px; } .main-im .qq-a { display: block; width: 106px; height: 116px; font-size: 14px; color: #0484cd; text-align: center; position: relative; } .main-im .qq-a span { bottom: 5px; position: absolute; width: 90px; left: 10px; } .main-im .qq-hover-c { width: 70px; height: 70px; border-radius: 35px; position: absolute; left: 18px; top: 10px; overflow: hidden; z-index: 9; } .main-im .qq-container { z-index: 99; position: absolute; width: 109px; height: 118px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 1px solid #dddddd; background: url(//repo.bfw.wiki/bfwrepo/image/610a812d70fc1.png) no-repeat center 8px; } .main-im .img-qq { max-width: 60px; display: block; position: absolute; left: 6px; top: 3px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .main-im .im-qq:hover .img-qq { max-width: 70px; left: 1px; top: 8px; position: absolute; } .main-im .im_main { background: #F9FAFB; border: 1px solid #dddddd; border-radius: 10px; background: #F9FAFB; display: none; } .main-im .im_main .im-tel { color: #000000; text-align: center; width: 109px; height: 105px; border-bottom: 1px solid #dddddd; } .main-im .im_main .im-tel div { font-weight: bold; font-size: 12px; margin-top: 6px; } .main-im .im_main .im-tel .tel-num { font-family: Arial; font-weight: bold; color: #e66d15; } .main-im .im_main .im-tel:hover { background: #fafafa; } .main-im .im_main .weixing-container { width: 55px; height: 47px; border-right: 1px solid #dddddd; background: #f5f5f5; border-bottom-left-radius: 10px; background: url(//repo.bfw.wiki/bfwrepo/image/610a815ce90c3.png) no-repeat center center; float: left; } .main-im .im_main .weixing-show { width: 112px; height: 172px; background: #ffffff; border-radius: 10px; border: 1px solid #dddddd; position: absolute; left: -125px; top: -126px; } .main-im .im_main .weixing-show .weixing-sanjiao { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #ffffff; border-width: 6px; left: 112px; top: 134px; position: absolute; z-index: 2; } .main-im .im_main .weixing-show .weixing-sanjiao-big { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #dddddd; border-width: 8px; left: 112px; top: 132px; position: absolute; } .main-im .im_main .weixing-show .weixing-ma { width: 104px; height: 103px; padding-left: 5px; padding-top: 5px; } .main-im .im_main .weixing-show .weixing-txt { position: absolute; top: 110px; left: 7px; width: 100px; margin: 0 auto; text-align: center; } .main-im .im_main .go-top { width: 50px; height: 47px; background: #f5f5f5; border-bottom-right-radius: 10px; backgr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0