需要的小伙伴关注评论区留言哦
界面一：
代码如下：
<div class="demo form-bg"> <div class="container"> <div class="row"> <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6"> <form class="form-horizontal"> <div class="heading">注册页面</div> <div class="form-group"> <i class="fa fa-user"></i><input required name="login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1"> </div> <div class="form-group"> <i class="fa fa-lock"></i><input required name="login[password]" type="password" class="form-control" placeholder="Password" /> </div> <div class="form-group"> <button type="submit" class="btn btn-default"><i class="fa fa-arrow-right"></i></button> <span><a href="" class="create_account">注册</a></span> </div> </form> </div> </div> </div> </div>
界面二
部分代码如下：
<body> <!--User-Login--> <h1>用户登录</h1> <div class="avtar"> <img src="images/avtar.png" /> </div> <div class="login-form"> <p>新用户?<a href="#">在这注册!</a></p> <form> <div class="form-text"> <input type="text" class="text" value="用户名" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'USERNAME';}" > <input type="password" value="密码" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'Password';}"> </div> <input type="submit"value="GO" > </form> </div>
界面三
代码如下：
<body> <div id="window" style="display:none;"> <div class="page page-front"> <div class="page-content"> <div class="input-row"> <label class="label fadeIn">用户名</label> <input id="username" type="text" data-fyll="pineapple" class="input fadeIn delay1"/> </div> <div class="input-row"> <label class="label fadeIn delay2">密码</label> <input id="password" type="password" data-fyll="hackmeplease" class="input fadeIn delay3"/> </div> <div class="input-row perspective"> <button id="submit" class="button load-btn fadeIn delay4"> <span class="default"><i class="ion-arrow-right-b"></i>登录</span> <div class="load-state"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div> </button> </div> </div> </div>
界面四
部分代码如下：
<div class="main"> <div class="login"> <div class="log-con"> <span>登录</span> <input type="text" class="name" placeholder="请输入用户名"/> <input type="text" class="password" placeholder="请输入密码"/> <input type="text" class="code" placeholder="请输入验证码"/> <input type="button" id="code" οnclick="change();"/> <a>立即登录</a> </div> </div> </div>
界面五
部分代码如下：
<div class="limiter"> <div class="container-login100"> <div class="wrap-login100"> <div class="login100-form-title" style="background-image: url(images/bg-01.jpg);"> <span class="login100-form-title-1">登 录</span> </div> <form class="login100-form validate-form"> <div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空"> <span class="label-input100">用户名</span> <input class="input100" type="text" name="username" placeholder="请输入用户名"> <span class="focus-input100"></span> </div> <div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空"> <span class="label-input100">密码</span> <input class="input100" type="password" name="pass" placeholder="请输入用户名"> <span class="focus-input100"></span> </div> <div class="flex-sb-m w-full p-b-30"> <div class="contact100-form-checkbox"> <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me"> <label class="label-checkbox100" for="ckb1">记住我</label> </div> <div> <a href="javascript:" class="txt1">忘记密码？</a> </div> </div> <div class="container-login100-form-btn"> <button class="login100-form-btn">登 录</button> </div> </form> </div> </div> </div>
界面六
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！（二）https://developer.aliyun.com/article/1383354
