banner下文章列表

直接使用代码

图片素材

css代码

  <style>

.m-verification{border-radius:10px;position:relative;z-index:3;background-color:#fff;height:220px;box-shadow:0 10px 15px 0 rgba(113,113,113,.15);margin-bottom:92px;margin-top:-30px}
.m-verification .form{width:364px;float:left;height:100%;padding-top:30px;padding-left:30px;color:#fff;background:url(http://www.bootfastui.cn/img/2021/0513-2/h5.png) no-repeat;-webkit-background-size:100% 100%;background-size:100% 100%}
.m-verification .form h3{font-size:20px;font-weight:400;margin-bottom:28px;margin-top:0;padding-top:0}
.m-verification .form h3 i{display:inline-block;vertical-align:middle;width:26px;height:27px;background:url(http://www.bootfastui.cn/img/2021/0513-2/h6.png) center center no-repeat;-webkit-background-size:cover;background-size:cover;margin-right:10px;margin-top:-2px}
.m-verification .form .l{margin-right:13px;float: left;}
.m-verification .form .l .item{overflow:hidden;margin-bottom:14px}
.m-verification .form .l .inp{overflow:hidden;width:180px;height:30px;background:#fff;border-radius:5px}
.m-verification .form .l .inp input{display:block;width:100%;height:30px;border:none;background:0 0;padding:0 12px}
.m-verification .form .l .inp input::placeholder{font-size:14px;color:#ccc}
.m-verification .form .l .item .name{float:left;font-size:14px;line-height:30px;margin-right:9px}
.m-verification .form .yanzheng{display:block;overflow:hidden;width:70px;height:75px;background:rgba(255,210,0,1);border-radius:5px;font-size:18px;text-align:center;color:#000;line-height:75px}
.m-verification .form .yanzheng:hover{opacity:.8}
.m-verification .newsh1{overflow:hidden;height:100%}
.m-verification .newsh1 .con{width:50%;float:left;padding-top:30px;padding-left:36px}
.m-verification .newsh1 .con h3{padding-left:25px;font-size:18px;color:#000;font-weight:400;background-repeat:no-repeat;background-position:left center;margin-bottom:8px;overflow:hidden;margin-top:0;}
.m-verification .newsh1 .con h3 a{display:block;float:right;font-size:14px;line-height:27px;margin-right:15px;color:#f77026}
.m-verification .newsh1 .s1{position:relative}
.m-verification .newsh1 .s1:after{content:'';display:block;position:absolute;right:0;top:77px;width:1px;height:110px;background-color:#e3e3e3}
.m-verification .newsh1 .con li a{display:block;padding-left:35px;background:url(http://www.bootfastui.cn/img/2021/0513-2/pic-h3.jpg) left center no-repeat;font-size:14px;line-height:32px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
</style>

HTML+JS代码

  <img src="http://www.bootfastui.cn/img/2021/0513-2/banner.jpg" width="100%" alt="">
<div class="row-1">
  <div class="container">
    <div class="m-verification row">
      <div class="form">
        <form action="/order_info" method="post">
          <input type="hidden" name="_token" value="pu0GZ9nF2vUiWZm8ourIA7PxC50U0c3f7gSMX602">
          <div class="top">
            <h3><i></i>正版图书验证<em></em></h3>
          </div>
          <div class="box">

            <div class="l">
              <div class="item">
                <div class="name">姓名 :</div>
                <div class="inp">
                  <input type="text" name="name" id='name' required placeholder="请输入收件人姓名" />
                </div>
              </div>
              <div class="item">
                <div class="name">电话 :</div>
                <div class="inp">
                  <input type="text" name="tel" id='tel' required placeholder="请输入收件人手机号" />
                </div>
              </div>
            </div>
            <a href="http://www.bootfastui.cn" class="yanzheng myfancy">验证</a>

          </div>
        </form>
      </div>

      <script type="text/javascript">
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $(function () {
          //弹窗
          $('.myfancy').click(function () {

            _this = this;
            $.ajax({
              url: "/check",
              type: "post",
              dataType: "json",
              data: {
                "tel": $('#tel').val(),
                "name": $('#name').val(),
                '_token': "pu0GZ9nF2vUiWZm8ourIA7PxC50U0c3f7gSMX602"
              },
              success: function (result) {

                console.log(result);
                if (result.status == 'yes') {
                  $('.inner').text('恭喜您，验证成功');
                  var _id = $(_this).attr('href');
                  $(_id).fadeIn("normal");
                } else {
                  $('.inner').text('验证失败，暂无此购买信息');
                  var _id = $(_this).attr('href');
                  $(_id).fadeIn("normal");
                }
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
              },
            });
            $('.pop-bg').click(function () {
              $(this).parents('.m-pop').fadeOut("normal");
            });

          });
        })
      </script>



      <div class="newsh1">
        <div class="con s1">
          <h3 style="background-image:url(http://www.bootfastui.cn/img/2021/0513-2/h7.png)"><a href="http://www.bootfastui.cn">更多&gt;</a>最新通知</h3>
          <ul>
            <li><a href="http://www.bootfastui.cn">2019艺考生文化课百日学案开启预售</a></li>
            <li><a href="http://www.bootfastui.cn">2019版艺考生文化课百日学案官方购买渠道</a></li>
            <li><a href="http://www.bootfastui.cn">2018年春节期间预定通知</a></li>
            <li><a href="http://www.bootfastui.cn">2019年春节期间暂停发货公告</a></li>
          </ul>
        </div>
        <div class="con">
          <h3 style="background-image:url(http://www.bootfastui.cn/img/2021/0513-2/h8.png)"><a href="http://www.bootfastui.cn">更多&gt;</a>艺考政策</h3>
          <ul>
            <li><a href="http://www.bootfastui.cn">2019艺考：播音主持专业的考生不知道这4点就亏了</a></li>
            <li><a href="http://www.bootfastui.cn">2019年艺考生必看：九大美院2018校考情况</a></li>
            <li><a href="http://www.bootfastui.cn">艺术生文化课复习10大误区</a></li>
            <li><a href="http://www.bootfastui.cn">艺考生文化课复习的4个方法</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

正版图书验证

更多>最新通知

更多>艺考政策

直接使用代码

图片素材

css代码

HTML+JS代码