直接使用代码

图片素材

无

css代码

 <style>
/* 登录注册 */
.login-box{position: absolute;right:20%;top:20%;width:700px;min-height:300px;background:#fff;border-radius: 5px;}
.login-box .l-left{width:350px;float:left;border-right:1px dashed #cdcdcd;height:330px}
.login-box .l-right{width:350px;float:left;}
.login-box .title-box{height:35px;border-bottom: 1px solid #ccc;overflow: hidden;;}
.login-box .title-box .t-name{display: inline-block;height:34px;line-height: 34px; border-bottom:2px solid #21666B ;font-size:16px;font-weight:bold}
.login-box .l-content{padding:20px;}
.login-box .l-left input{margin:30px 0}

.login-box .r-left{border-right:1px dashed #cdcdcd;padding-right:20px;width:320px;float: left;}
.login-box .r-right{width:320px;float: left;padding-left:20px}
.register-form input{margin:15px 0}

.btn-login{background: #e60012;color:#fff;padding:6px 30px;border:none;border-radius: 6px;font-size:16px;margin-top:20px}
.btn-login:hover{background: #ff3e4d;}
.com-btn{display:inline-block; line-height:30px; padding:0 20px;  color:#fff; border:none; margin:10px 0; cursor:pointer; font-size:14px;background:#A10009;border-radius: 5px;}



</style>

HTML+JS代码

 
<section class="relative" style="height:650px">
  <img src="/Public/images/banner2.jpg" alt="" class="pm" width="100%">

  <div class="login-box hidden-xs">
    <div class="l-left">
      <div class="l-content">
        <div class="title-box">
          <div class="t-name">账号登录</div>
        </div>
        <form method="post" enctype="multipart/form-data" action="/check">
          <input type="text" name="username" required class="form-control" placeholder="用户名">
          <input type="text" name="password" required class="form-control" placeholder="密码">
          <button type="submit" class="btn-login" style="width: 100%;">登录</button>
        </form>
      </div>

    </div>
    <div class="l-right">
      <div class="l-content">
        <div class="title-box">
          <div class="t-name">注册账号</div>
        </div>
        <h5 class="gray f16 line40">注册Semiware.com后可享受的好处</h5>
        <p class="des f14 line25">
          订购样品<br /> 查询订单物流信息<br /> 保存产品列表<br /> 获取技术动态<br /> 访问其他资源<br />
        </p>
        <a href="/register.html" class="com-btn fright">注册账号 > </a>
      </div>
    </div>
  </div>
</section>

<!-- 轮播+搜索 -->
<section class="relative" style="height:700px">
  <img src="/Public/images/banner2.jpg" alt="" class="pm" width="100%">
  <!-- 搜索 -->
  <div class="login-box hidden-xs">

    <div class="l-content" style="padding-bottom: 0;">
      <div class="title-box">
        <div class="t-name">注册账号</div>
        <div class="fright f15 gray">
          <span>已有账号，</span>
          <a href="/login.html" class="com-color">马上登录</a>
        </div>
      </div>

      <form method="post" enctype="multipart/form-data" action="/savezhuce" class="register-form">
        <div class="clear"><br /></div>
        <div class="r-left">
          <input type="text" name="username" class="form-control" required placeholder="用户名">
          <input type="text" name="password" class="form-control" required placeholder="密码">
          <input type="text" name="email" id="email" class="form-control" required placeholder="邮箱">
          <input type="text" name="tel" id="tel" class="form-control" required placeholder="电话">

        </div>
        <div class="r-right">
          <input type="text" name="company" class="form-control" required placeholder="所在公司">
          <input type="text" name="content" class="form-control" required placeholder="主营产品（选填）">
          <input type="text" name="verify" class="form-control" required placeholder="验证码"
            style="width: 40%;float: left;">
          <img src="/admin/index/Verify" alt="验证码" style="cursor:pointer; float:left; width: 160px; margin-left:20px"
            onclick="javascritp:this.src='/admin/index/Verify?'+Math.random();" />
        </div>
        <div class="clear"></div>
        <div class="text-center">
          <button type="submit" class="btn-login" style="width: 50%; margin:20px auto"
            onclick="return check()">注册</button>
        </div>

      </form>
    </div>



  </div>
</section>