居家小二拉新活动H5页面

最新推荐文章于 2021-01-13 18:40:09 发布

一波又起

最新推荐文章于 2021-01-13 18:40:09 发布

阅读量597

点赞数

分类专栏： HTML5 javascript 文章标签： H5 webApp 手机自适应

本文链接：https://blog.csdn.net/qq_37126704/article/details/86689614

版权

本文介绍了采用后端数据注入与前端模板技术结合的方式，创建了一个居家小二拉新活动的H5页面。页面利用了bootstrap、jquery、javascript、html和css进行开发，确保了在手机上的自适应显示。

摘要由CSDN通过智能技术生成

说明：该页面是后端数据注入 + 前端模板技术（前端先写好的h5页面，给到后端，后端注入用户信息等动态数据后，再返回给前端）浏览器显示：

所使用到的技术：bootstrap、jquery、javascript、html、css

<!DOCTYPE html>
<html style="font-size:12px;">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <#--<meta name="viewport" content="width=divice-width, initial-scal=1">-->
  <#--给移动端专用的按等比 pc端缩小到移动端 （内容宽=设备宽 保证网页在移动设备上正常显示-->
  <link rel="stylesheet" href="/static/global/plugins/bootstrap/css/bootstrap.min.css">
  <style>
    body {
      background-image: url(/static/images/welcome/bar1.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div class="row">
  <div style="position: absolute;left: 8%; top:3%;">
    <div style="width:40px;height: 40px;border-radius:50%;background:url('/static/images/welcome/tou.png') no-repeat 0 0 ;background-size: cover;position: relative;">
    </div>
    <div style="width:3.8rem;height:1.8rem;position: absolute;left: 0%;bottom: -53%;color:white;"><span>张伟荣</span></div>
  </div>
</div>
<div class="row" style="width:79%;height:21%;margin:auto;position: absolute;left: 0; right: 0;top:52%;bottom:0;">
  <form>
    <div class="col-xs-12">
      <div class="form-group">
        <input type="text" class="form-control" id="telPhone" placeholder="请输入您的手机号码" style="position:relative">
        <span id="err_PhoneMsg" style="color:#edb73f;position:absolute;left:6%;top:66%;"> </span>
        <span id="delPhone" style="color:#dea319;position:absolute;right:8%;top:19%;font-size:0.8rem;">X</span>
      </div>
    </div>
    <div class="col-xs-7">
      <div class="form-group">
        <input type="text" class="form-control validateCode" id="validateCode" placeholder="验证码"
               style="position:relative">
        <span id="err_codeMsg" style="color:#edb73f;position:absolute;left:9%;top:66%;"> </span>
        <span id="delCode" style="color:#dea319;position:absolute;right:13%;top:20%;font-size:0.8rem;">X</span>
      </div>
    </div>
    <div class="col-xs-5