lovecoding
/
VIP24


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container{
      padding: 1rem;
      width: 100%;
    }
    label {
      font-size: 1rem;
      color: #666666;
      display: block;
    }
    input {
      display: block;
      width: 80vw;
      height: 2.3rem;
      border: 1px solid #E5E5E5;
      border-radius: 4px;
      font-size: 0.8rem;
      padding:0.5rem;
      line-height: 2.3rem;
      color: #cccccc;
      margin: .3rem 0;
    }
    .btn {
      width: 80vw;
      height: 2.3rem;
      background: #FF0000;
      color: #ffffff;
      text-align: center;
      line-height: .3rem;
      font-size: 1rem;
    }
    .telCode {
      display: inline-block;
      width: 40vw;
    }
    .code {
      width: 40vw;
      height: 2.3rem;
      background: #f00;
      color: #fff;
      display: inline-block;
      border: none;
      text-align: center;
      line-height: .3rem;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <form action="" class="container">
    <div>
      <label>收货人姓名</label>
      <input type="text" placeholder="收货人姓名">
    </div>
    <div>
      <label>手机号码</label>
      <input type="tel" placeholder="请输入您的手机号码" maxlength="11">
    </div>
    <div>
      <label>手机验证码</label>
      <input type="text" placeholder="手机验证码" class="telCode">
      <button class="code">获取验证码</button>
    </div>
    <div>
      <label>选择地区</label>
      <input type="text" list="list1" placeholder="请选择省份">
      <datalist id="list1" place>
        <option value="黑龙江"></option>
        <option value="黑龙江"></option>
        <option value="黑龙江"></option>
      </datalist>
    </div>
    <div>
      <input type="text" list="list2" placeholder="请选择城市">
      <datalist id="list2" place>
        <option value="哈尔滨"></option>
        <option value="哈尔滨"></option>
        <option value="哈尔滨"></option>
      </datalist>
    </div>
    <div>
      <label>详细地址</label>
      <input type="text" placeholder="例如XX街道XX号">
    </div>
    <input type="button" class="btn" value="提交订单">


  </form>
</body>

</html>