**html怎么点击跳转到拨号页面**_html 拨号中界面-CSDN博客

本文链接：https://blog.csdn.net/weixin_45716297/article/details/105516689

html怎么点击跳转到拨号页面
废话不多说直接上代码

在这里插入代码片
<!Doctype html>

<html xmlns=http://www.w3.org/1999/xhtml>

<head>                           

  <title>专属客服</title>

    <meta charset="utf-8" />  

  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

  <meta name="apple-touch-fullscreen" content="yes" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

  <meta name="format-detection" content="telephone=no" />
  <style>
		html,body{
			width:100%;
			height:100%
		}
		body{
        font-family: "华文细黑";
	    background:url("https://qutaojishi-appimages.oss-cn-beijing.aliyuncs.com/toushukefubeijing.jpg") no-repeat;
	    background-size: 100% 100%;
        position: relative;
     }
	.toushubox{
        width: 90%;
        height: 90%;
        position: absolute;
        left: 5%;
       
	}
   /*版心*/
   .banner{
   	width: 90%;
   	height: 90%;
   	position: absolute;
    left: 5%;
    top: 5%;
   
   }
   /*头部*/
   .bannertop{
   	width: 60%;
   	height: 9%;
   	margin: 0 auto;
    position: relative;
   }
   .bannertop>img{
   	width: 30%;
   	height: 100%;
   }
   .name{
   	 display: inline-block;
   	 color: red;
     position:absolute;
     top:0;
     margin-left: .2rem;
     font-size: .4rem;
     font-family:'简粗圆';
     text-shadow:2px 2px 2px #958B1E;
     padding:3px 0; 
     color:#FFF; 
     
   }
   @font-face {
    font-family:"DHUDC1.01-BOLD_0";
    src:url('./fonts/DHUDC1.01-BOLD_0.TTF');
    /*src:url('fonts/简粗圆.ttf');*/
}
.name1{
	position:absolute;
    top:.5rem;
    margin-left: .2rem;
    text-shadow:2px 2px 2px #958B1E;
    padding:3px 0; 
    color:#FFF; 
    font-size: .26rem;
}
/*
  电话
*/
.shouhou{
	width: 90%;
	margin: 0 auto;
	height: 3rem;
	margin-top: .2rem;
	border: 2px solid  #FCE700;
	position: relative;
	text-align: center;
	background-color:#FFFFFF;
	border-radius: 15px;
	opacity: .8;
}
.shouhou>span:nth-child(1){
	display: inline-block;
    font-size: .35rem;
	color: #3c3c3c;
	margin-top: .2rem;
	text-shadow:1px 1px 1px #3c3c3c;
}
.shouhou>span:nth-child(2){
	display: block;
	/*color: #040000;*/
	color:yellow;
	font-family:'DHUDC1.01-BOLD_0';
	font-size: .4rem;
	text-shadow:1px 2px 5px #000;
	margin-top: .1rem;
}
.shouhou>span:nth-child(3){
	display: block;
	/*color: #040000;*/
	color:yellow;
	font-family:'DHUDC1.01-BOLD_0';
	font-size: .35rem;
	text-shadow:1px 2px 5px #000;
	margin-top: .1rem;
}
.shouhou>img{
   width: 50%;
   margin-top:.2rem;
}
a{
	text-decoration: none;
}
  </style>

</head>

<body>
   <div class="toushubox">
   	   <div class="banner">
   	   	   <div class="bannertop">
   	   	   	  <img src="https://qutaojishi-appimages.oss-cn-beijing.aliyuncs.com/toushukefubiaoti.png">
   	   	   	  <span class="name">拨号xxx</span>
   	   	   	  <span class="name1">QUTAOJISHI</span>
   	   	   </div>
   	   	   <!--售后电话-->
   	   	   <a href="tel://10086">
   	   	   <div class="shouhou">
   	   	   	  <span>xxxxx</span>
   	   	   	  <span>10086</span>
   	   	   	  <span>受理时间：上午9点-晚上7点</span>
   	   	   	  <img src="https://qutaojishi-appimages.oss-cn-beijing.aliyuncs.com/toushukefu_anniu.png">
   	   	   </div>
   	   	   </a>
   	   	    <a href="tel://1008611">
   	   	   <div class="shouhou">
   	   	   	  <span>招商咨询热线</span>
   	   	   	  <span>1008611</span>
   	   	   	  <span>受理时间：上午9点-晚上7点</span>
   	   	   	  <img src="https://qutaojishi-appimages.oss-cn-beijing.aliyuncs.com/toushukefu_anniu.png">
   	   	   </div>
   	   	   </a>
   	   	    <a href="tel://10000">
   	   	   <div class="shouhou">
   	   	   	  <span>投诉建议热线</span>
   	   	   	  <span>10000</span>
   	   	   	  <span>受理时间：上午9点-晚上7点</span>
   	   	   	  <img src="https://qutaojishi-appimages.oss-cn-beijing.aliyuncs.com/toushukefu_anniu.png">
   	   	   </div>
   	   	   </a>
   	   	   
   	   </div>
   </div>
</body>

</html>

希望能给大家带来帮助，感谢关注！
有什么不懂的可以私信我，我随时在线。