辛福会迟到
但永远不会缺席

网站底部直接拨打电话代码

下面代码放底部模板(这是第一种)

<!-- 代码 开始 -->
<div class="foot_nav"><a href="tel:18601442667"><span class="glyphicon glyphicon-phone btn-lg" aria-hidden="true"></span>24小时服务热线:18601xxx667</a></div>

 <style type="text/css">
.foot_nav {
	width: 100%;
	line-height: 30px;
	float: left;
	background-color: #FF3300;
	text-align: center;
	color: #FFFFFF;
                box-sizing:border-box;
                position: fixed;
                bottom: 0;
                z-index: 100
}

 .glyphicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.btn-lg, .btn-group-lg > .btn {
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	border-radius: 6px;
}
.foot_nav a {
	color: #FFFFFF;
	display: block;
}
.foot_nav span {
	display: block;
	padding: 3px 0px 0px 0px;
}
</style>

下面代码放底部模板(这是第二种)

<style>
@media only screen and (min-width:300px) and (max-width:1000px) {
.mob-foot {
display:block;
overflow: hidden;
position: fixed;
bottom: 0;
background-color: #2054a3;
padding: 1rem 0;
z-index: 9999;
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width: 1100px){
.mob-foot {
display:none;
}

}
@media only screen and (min-width: 1100px){
#copyContent{
display:none;
}

}

.mob-foot a {
float: left;
width: 33.33%;
line-height: 3rem;
font-size: 1.2rem;
color: #f5f5f5;
text-align: center;
position: relative;
}
.mob-foot a img {
display: inline-block;
vertical-align: middle;
margin-right: .2rem;
width: 18px;
}

element.style {
}
.mob-foot a:nth-child(2) {
background: -webkit-linear-gradient(left,#ff6255,#ec0823);
background: -o-linear-gradient(left,#ff6255,#ec0823);
background: -moz-linear-gradient(left,#ff6255,#ec0823);
background: linear-gradient(left,#ff6255,#ec0823);
color: #fff;
border-radius: 2rem 0 0 2rem;
}
.mob-foot a:nth-child(3) {
background: -webkit-linear-gradient(left,#ffcb01,#ff9502 30%,#ff9502);
background: -o-linear-gradient(right,#ffcb01,#ff9502 30%,#ff9502);
background: -moz-linear-gradient(right,#ffcb01,#ff9502 30%,#ff9502);
background: linear-gradient(to right,#ffcb01,#ff9502 30%,#ff9502);
color: #fff;
border-radius: 0 2rem 2rem 0;
}
</style>
<!--添加微笑信!-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js"></script>
<script>
var clipboard = new ClipboardJS('#copyBtn');
clipboard.on('success', function (e) {
alert('微信号已复制成功。去微信直接添加即可');
var locatUrl = "weixin://"; 
window.location.href = locatUrl;
e.clearSelection(); 
});
clipboard.on('error', function (e) {
console.error('复制失败', e.action,e.trigger);
});
</script>
<span id="copyContent">176-6292-8920</span>
<div class="mob-foot visible-xs"> <a><svg t="1637039703707" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4947" width="16" height="16">
<path
d="M532.48 0C238.592 0 0 204.8 0 457.216c0 150.016 54.784 272.896 163.84 361.984v150.016c0 40.96 13.824 54.784 34.304 54.784 12.8-0.512 24.576-5.12 34.304-13.824l163.84-95.744c45.056 8.192 90.624 12.288 136.704 13.824 293.376 0 491.52-218.624 491.52-471.04S778.752 0 532.48 0z m0 849.92c-27.136 0-95.744-6.656-122.88-6.656l-27.136-6.656-20.48 13.824-122.88 78.336v-148.48l-27.136-20.48c-88.576-75.264-126.464-179.2-126.464-302.08 0-218.624 194.56-378.88 454.144-378.88 175.104-3.584 395.776 153.6 413.184 378.88-7.168 231.936-181.248 392.192-420.352 392.192zM272.896 402.944c-33.792 0-61.44 27.648-61.44 61.44s27.648 61.44 61.44 61.44 61.44-27.648 61.44-61.44c0-16.384-6.656-31.744-17.92-43.52s-27.136-17.92-43.52-17.92z m239.104 0c-33.792 0-61.44 27.648-61.44 61.44s27.648 61.44 61.44 61.44 61.44-27.648 61.44-61.44c0-16.384-6.656-31.744-17.92-43.52s-27.136-17.92-43.52-17.92z m239.104 0c-33.792 0-61.44 27.648-61.44 61.44s27.648 61.44 61.44 61.44 61.44-27.648 61.44-61.44c0-16.384-6.656-31.744-17.92-43.52-11.776-11.776-27.136-17.92-43.52-17.92z"
p-id="4948" fill="#ffffff"></path>
</svg><span id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyContent">复制微信号</span></a> <a
href="tel:176-xxxx-8920" rel="nofollow">
<svg t="1637039661505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="3967" width="16" height="16">
<path
d="M705.74 604.873333a53.4 53.4 0 0 0-75.426667 0l-37.713333 37.713334c-21.333333 21.333333-90.413333 0.1-150.846667-60.34S360.046667 452.76 381.413333 431.4l0.046667-0.046667 37.666667-37.666666a53.4 53.4 0 0 0 0-75.426667l-165.94-165.933333a53.393333 53.393333 0 0 0-75.42 0l-37.713334 37.713333c-27.866667 27.866667-44.84 64.52-50.46 108.946667-5.213333 41.206667-0.406667 87.42 14.28 137.333333C133.333333 536.586667 199.773333 642 290.9 733.1S487.42 890.666667 587.653333 920.126667c36.926667 10.86 71.813333 16.32 104.146667 16.32a264.333333 264.333333 0 0 0 33.213333-2.04c44.426667-5.62 81.08-22.593333 108.946667-50.46l37.713333-37.713334a53.393333 53.393333 0 0 0 0-75.42z m135.76 211.193334l-37.706667 37.713333c-42.58 42.573333-115.06 51.6-204.1 25.413333-93.506667-27.5-192.453333-90.1-278.62-176.266666s-148.766667-185.113333-176.266666-278.62c-26.186667-89.033333-17.16-161.52 25.413333-204.1l37.713333-37.706667a10.666667 10.666667 0 0 1 15.086667 0l165.933333 165.933333a10.666667 10.666667 0 0 1 0 15.086667l-37.713333 37.706667C329.113333 423.333333 324.666667 458.82 338.766667 501.073333c12.426667 37.273333 38.286667 76.813333 72.813333 111.333334s74.073333 60.386667 111.333333 72.813333c16.213333 5.406667 31.42 8.08 45.26 8.08 22.233333 0 40.946667-6.913333 54.586667-20.553333l37.706667-37.713334a10.666667 10.666667 0 0 1 15.086666 0l165.933334 165.933334a10.666667 10.666667 0 0 1 0.013333 15.1zM576 234.666667a21.333333 21.333333 0 0 1 21.333333-21.333334 213.333333 213.333333 0 0 1 213.333334 213.333334 21.333333 21.333333 0 0 1-42.666667 0c0-94.106667-76.56-170.666667-170.666667-170.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m0 128a21.333333 21.333333 0 0 1 21.333333-21.333334 85.426667 85.426667 0 0 1 85.333334 85.333334 21.333333 21.333333 0 0 1-42.666667 0 42.713333 42.713333 0 0 0-42.666667-42.666667 21.333333 21.333333 0 0 1-21.333333-21.333333z m362.666667 64a21.333333 21.333333 0 0 1-42.666667 0c0-164.666667-134-298.666667-298.666667-298.666667a21.333333 21.333333 0 0 1 0-42.666667 341.073333 341.073333 0 0 1 341.333334 341.333334z"
fill="#ffffff" p-id="3968"></path>
</svg>一键拨打</a> <a href="tel:176-xxxx-8920" rel="nofollow">
<svg t="1637039748245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="5994" width="16" height="16">
<path
d="M927.616 465.6C923.328 236.704 745.888 51.808 528 51.808h-32c-217.888 0-395.328 184.896-399.616 413.76C58.112 487.744 32 528.672 32 576v64c0 70.592 57.408 128 128 128s128-57.408 128-128v-64a128.064 128.064 0 0 0-126.784-127.872C173.728 262.688 318.912 115.808 496 115.808h32c177.12 0 322.272 146.88 334.784 332.32A128.064 128.064 0 0 0 736 576v64c0 57.792 38.72 106.176 91.392 122.016a337.504 337.504 0 0 1-191.936 124.48A79.712 79.712 0 0 0 560 832a80 80 0 1 0 0 160 79.68 79.68 0 0 0 67.872-38.112 402.432 402.432 0 0 0 278.24-193.6C955.968 742.816 992 695.776 992 640v-64c0-47.328-26.112-88.256-64.384-110.4zM224 576v64c0 35.296-28.704 64-64 64s-64-28.704-64-64v-64c0-35.296 28.704-64 64-64s64 28.704 64 64z m704 64c0 34.304-27.2 62.176-61.12 63.712l-2.496-1.184c-0.224 0.512-0.576 0.928-0.8 1.408A64 64 0 0 1 800 640v-64c0-35.296 28.704-64 64-64s64 28.704 64 64v64z"
p-id="5995" fill="#ffffff"></path>
</svg>联系客服</a> </div>
赞(0)
未经允许不得转载:乐予博客 » 网站底部直接拨打电话代码
分享到: 更多 (0)