css 联系电话 QQ | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
    <div class="return">
​
    <div class="rtn-call">
​
        <h2>000-0000-000<br>000-0000-000</h2>
​
​
​
        <div class="call-ico"></div>
​
        <span>联系电话</span>
​
    </div>
​
    <div class="rtn-qq">
​
        <h2><a href="../#" target="_blank" style="color:#FFFFFF;">在线咨询</a></h2>
​
        <div class="qq-ico"></div>
​
        <span>QQ咨询</span>
​
    </div>
​
    <div class="rtn">
​
        <div class="rtn-ico"></div>
​
        <span>返回顶部</span>
​
    </div>
​
</div>
</body>
</html>

HTML

xxxxxxxxxx
 
.return{ width:72px; height:190px; position:fixed;right:0;  top:50%; margin-top:-95px; z-index:100; cursor:pointer;  }
​
.rtn-call{ width:70px; height:60px; border:1px solid #63b328; background:#fff;}
​
.rtn-call h2{ position:absolute; display:block; height:54px; background:#63b328;  z-index:-2; width:auto; text-align:center; width:184px; color:#fff; font-size:20px; line-height:25px; margin-left:80px; margin-top:-1px; padding-top:8px; }
​
.call-ico{ width:70px; height:39px; background:url(../images/call.png) no-repeat center 10px;}
​
.return span{ color:#63b328; text-align:center;  display:block;}
​
​
​
.rtn-qq{width:70px; height:60px; border:1px solid #63b328; border-top:none;  background:#fff;}
​
.qq-ico{ width:70px; height:39px; background:url(../images/qq.png) no-repeat center 10px;}
​
.rtn-qq h2{ position:absolute; display:block; height:62px; background:#63b328;  z-index:-2; width:auto; text-align:center; width:164px; color:#fff; font-size:25px; line-height:60px; margin-left:80px; margin-top:-1px;}
​
​
​
.return .rtn{width:70px; height:60px; border:1px solid #63b328; border-top:none;  background:#fff; display:none;}
​
.rtn-ico{ width:70px; height:39px; background:url(../images/top1.png) no-repeat center 10px;}

CSS