HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！（二）

<div class="container right-panel-active">
      <!-- Sign Up -->
      <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
          <h2 class="form__title">注 册</h2>
          <input type="text" placeholder="用户名" class="input" />
          <input type="email" placeholder="Email" class="input" />
                    <input type="password" placeholder="密码" class="input" />
          <button class="btn">注 册</button>
        </form>
      </div>
      <!-- Sign In -->
      <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
          <h2 class="form__title">登 录</h2>
          <input type="email" placeholder="Email" class="input" />
          <input type="password" placeholder="密码" class="input" />
          <a href="#" class="link">忘记密码?</a>
          <button class="btn">注 册</button>
        </form>
      </div>
      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" id="signIn">登 录</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" id="signUp">注 册</button>
          </div>
        </div>
      </div>
    </div>

<div class="dowebok">
        <div class="logo"></div>
        <div class="form-item">
            <input id="username" type="text" autocomplete="off" placeholder="邮箱">
            <p class="tip">请输入合法的邮箱地址</p>
        </div>
        <div class="form-item">
            <input id="password" type="password" autocomplete="off" placeholder="登录密码">
            <p class="tip">邮箱或密码不正确</p>
        </div>
        <div class="form-item"><button id="submit">登 录</button></div>
        <div class="reg-bar">
            <a class="reg" href="#" target="_blank">立即注册</a>
            <a class="forget" href="#" target="_blank">忘记密码</a>
        </div>
    </div>

<div class="dowebok">
  <div class="container-login100">
    <div class="wrap-login100">
      <div class="login100-pic js-tilt" data-tilt>
        <img src="images/img-01.png" alt="IMG">
      </div>
      <form class="login100-form validate-form">
        <span class="login100-form-title">
          会员登陆
        </span>
        <div class="wrap-input100 validate-input">
          <input class="input100" type="text" name="email" placeholder="邮箱">
          <span class="focus-input100"></span>
          <span class="symbol-input100">
            <i class="fa fa-envelope" aria-hidden="true"></i>
          </span>
        </div>
        <div class="wrap-input100 validate-input">
          <input class="input100" type="password" name="pass" placeholder="密码">
          <span class="focus-input100"></span>
          <span class="symbol-input100">
            <i class="fa fa-lock" aria-hidden="true"></i>
          </span>
        </div>
        <div class="container-login100-form-btn">
          <button class="login100-form-btn">
            登陆
          </button>
        </div>
        <div class="text-center p-t-12">
          <a class="txt2" href="javascript:">
            忘记密码？
          </a>
        </div>
        <div class="text-center p-t-136">
          <a class="txt2" href="#" >
              还没有账号？立即注册
            <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
          </a>
        </div>
      </form>
    </div>
  </div>
</div>

<div id="header">
  <div class="header_title">
    <span class="title_con">学工系统</span>
  </div>
</div>
<div id="content">
  <center>
    <div class="con">
    <div class="con_title">
      <span class="con_title_sp">欢迎登录学工系统</span>
    </div>
    <div class="con_panel">
      <div class="con_input">
        <span>用户名：</span><input type="text" placeholder="学号/工号"/>
      </div>
      <div class="con_input">
        <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input type="text" placeholder="密码"/>
      </div>
      <div class="con_select">
        <input type="radio" name="t1" value="学生" />学生
        <input type="radio" name="t1" value="教师" />教师
        <input type="radio" name="t1" value="管理员" />管理员
      </div>
      <input type="submit" value="登录" class="submit-btn"/>
    </div>
  </div>
  </center>
</div>
</body>

<div class="main"> 
    <div class="login-form"> 
      <h2>SignIn Form</h2> 
      <div class="agileits-top">
        <form action="#" method="post">
          <div class="styled-input">
            <input type="text" name="User Name" required=""/>
            <label>User Name</label>
            <span></span>
          </div>
          <div class="styled-input">
            <input type="password" name="Password" required=""> 
            <label>Password</label>
            <span></span>
          </div> 
          <div class="wthree-text"> 
            <ul> 
              <li>
                <input type="checkbox" id="brand" value="">
                <label for="brand"><span></span> Remember me ?</label>  
              </li>
              <li> <a href="#">Forgot password?</a> </li>
            </ul>
            <div class="clear"> </div>
          </div>  
        </form>
      </div>
      <div class="agileits-bottom">
        <form action="#" method="post">
          <input type="submit" value="Sign In">
        </form>
      </div>  
    </div>  
  </div>