信息中心

提供网站前端、SEO、APP和公众号小程序开发技术信息

首页 >  网站模板

用网页微信登录页面的源代码 做你的联系方式

文章分类: 网站模板 浏览量:129 发布时间:2020-06-08 20:10:48

用网页微信登录页面的源代码 做你的联系方式,是不是很酷炫呢?
网页微信登录页面

你可以在这个页面中,图中的二维码改成你的微信或者其他链接的二维码,以此来作为你的网站的联系方式专属页面,非常酷炫。
下面贴出源代码:
HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>通过微信联系我-</title>
  <link rel="stylesheet" type="text/css" href="wx.css"/>
 
</head>
<body>
<div class="lg">
<div class="lg1">Zhuseo</div><div class="lg2">丨每一克都在用心</div>
</div>
<div class="wx">
<div class="ewm">
<img src="ewm.png" height="230px"  width="230px" alt="微信二维码" />
<p class="sm">使用微信扫码联系我们</p>
<p class="tel">或者致电我们13709694286</p>
</div>
</div>
<div class="foot">
<a href="/">东莞首页</a>
<span class="sep"></span>
<a href="/">广州首页</a>
<span class="sep"></span>
<a href="http://www.zhuseo.com/">珠海网站建设</a>
</div>
<div class="cr">
© 1998 - 2018 SFweight.and <a href="http://www.zhuseo.com/">www.zhuseo.com</a> All Rights Reserved
</div>
</body>
</html>


css代码:
body{
   background: url(http://res.wx.qq.com/a/wx_fed/webwx/res/static/img/2zrdI1g.jpg);
   background-size: cover;
   width:99%;
   font-family: 黑体;
}
a{color:#E3E7EE;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
.lg{
height:180px;
}
.lg1{
float: left;
    padding: 80px 0 0 180px;
    font-size: 35px;
 
    color: rgba(75, 75, 75, 0.99);
}
.lg2{
float: left;
    padding: 95px 0 0 10px;
    font-size: 15px;
    font-family: 黑体;
    color: rgba(51, 51, 51, 0.63);
}
.wx{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -270px;
    -webkit-border-radius: 4px;
    background-color: #fff;
    width: 380px;
    height: 540px;
    -webkit-box-shadow: #999 0 2px 10px;
}
.ewm{
height:230px;
width:230px;
text-align: center;
margin:63px 75px 35px 75px;
}
.sm{
text-align: center;
    font-size: 20px;
    color: #353535;
    margin-bottom: 23px;
}
.tel{
    text-align: center;
    color: #9E9E9E;
    font-size: 16px;
    padding: 0 40px;
    line-height: 1.8;
}
.foot .sep {
    display: inline-block;
    height: 12px;
    vertical-align: middle;
    margin: 0 10px;
    border-right: 1px solid #d3d3d3;
}
.foot{
bottom: 60px;
left: 60px;
position: absolute;
font-size: 14px;
}
.cr{
position: absolute;
    bottom: 60px;
    right: 60px;
    color: #d3d3d3;
    font-size: 14px;
}
 
 
下面来看看源代码安装的效果吧:

网页微信登录界面作为你的网站的联系方式

7*24服务电话(以解决问题为最终目标)

173-0756-4526

直接负责:MR.潘:17307564526

技术负责:MR.王:18186226660

邮箱:694394062#qq.com
地址:珠海香洲区紫荆路振国巷9号科汇大厦

COPYRIGHT © 2010-2020 蓝黛科技珠海网站建设 珠海SEO www.zhuseo.com ALL RIGHTS RESERVER 版权所有 粤ICP备17099728号-1