H5+css3+js搭建带验证码的登录页面

本文实例为大家分享了H5+css3+js搭建带验证码的登录页面，供大家参考，具体内容如下

login.html

 
 
 
 
 .main_bar{
 width:1350px;
 height:350px;
 background-color:#6495ED;
 margin-top:10%;
 } 
 #login_form{
 width:40%;
 height:100%;
 background-color:#112435;
 margin:0 auto;
 }
 .title{
 width:100%;
 height:55px;
 color:#ffffff;
 border-bottom:1px solid #ffffff;
 font-size:20pt;
 font-family:"微软雅黑";
 line-height:55px;
 text-align:center; 
 }
 #form_widget{
 width:100%;
 height:295px;
 background-color:#808080;
 }
 .txt{
 display:block;
 width:70%;
 margin:0 auto;
 height:35px;
 font-size:15pt;
 border-radius:5px;
 border:0;
 padding-left:8px;
 }
 #vcode{
 height:35px;
 width:40%;
 font-size:15pt;
 margin-left:15%;
 border-radius:5px;
 border:0;
 padding-left:8px;
 }
 #code{
 color:#ffffff;
 background-color:#000000; 
 font-size:20pt;
 font-family:"华康娃娃体W5";
 padding:5px 35px 10px 35px;
 margin-left:5%; 
 cursor:pointer;
 }
 #search_pass_link{
 width:70%;
 text-align:right;
 margin:0 auto;
 padding:5px;
 }
 
 #search_pass_link a{
 color:#000000;
 text-decoration:none; 
 }
 
 #search_pass_link a:hover{
 color:#ff0000;
 text-decoration:underline;
 }
 .btn{
 width:70%;
 margin-left:15%;
 height:40px;
 border:0;
 font-size:14pt;
 font-family;"微软雅黑";
 background-color:#FC5628;
 color:#ffffff;
 cursor:pointer;
 border-radius:20px;
 border:0;
 } 
 #copyright{
 width:100%;
 text-align:center;
 padding-top:20px;
 font-family:"微软雅黑";
 color:#e0e0e0;
 }
 
 
 
  
 
 
  EasyBuy系统登录  
  
 
 
  
  
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。