淡蓝风格的手机登录HTML模板-roucheng

查看效果：http://hovertree测试数据/texiao/mobile/10/

或者手机扫描二维码查看效果：

效果图：


代码如下：

   DOCTYPE html  > 
   html  > 
   head  > 
   meta   http-equiv  ="Content-Type"   content  ="text/html; charset=utf-8"   /> 
   meta   content  ="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"   name  ="viewport"   /> 
   meta   content  ="initial-scale=1.0,user-scalable=no,maximum-scale=1"   media  ="(device-height: 568px)"   name  ="viewport"  > 
   meta   content  ="yes"   name  ="apple-mobile-web-app-capable"   /> 
   meta   content  ="black"   name  ="apple-mobile-web-app-status-bar-style"   /> 
   meta   content  ="telephone=no"   name  ="format-detection"   /> 
   title  > 移动端HTML5登录模板 - 何问起   title  > 
   style  >  
body   {  
margin  :   0  ;  
padding  :   0  ;  
color  :   #666  ;  
background  :   #c1d2fe  ;  
font-family  :   Verdana, sans-serif
  }  

.form_login   {  
max-width  :   640px  ;  
margin  :   auto  ;  
text-align  :   center  ;  
padding-top  :   100px  ; 
 }  

.form-group   {  
width  :   355px  ;  
margin  :   0 auto  ;  
height  :   50px  ;  
margin-bottom  :   20px  ; 
 }  

.form-group .fa   {  
display  :   block  ;  
width  :   50px  ;  
height  :   50px  ;  
float  :   left  ; 
 }  

.form-group .form-control   {  
display  :   block  ;  
width  :   300px  ;  
height  :   48px  ;  
float  :   left  ;  
border  :   1px solid #ccc  ;  
padding  :   0  ;  
margin-left  :   0  ;  
text-indent  :   1em  ;  
themeColor  :   #00a988  ; 
 }  

.form-group .form-control:hover   {  
border  :   1px solid #0160A0  ; 
 }  

.form-group .checkfont   {  
color  :   #666  ; 
 }  

.form-group .btn   {  
width  :   350px  ;  
height  :   50px  ;  
background-color  :   #0160A0  ;  
border  :   0px  ;  
color  :   #fff  ;  
font-size  :   14px  ; 
 }  

.fa-user   {  
background  :   url(http://hovertree测试数据/texiao/mobile/10/images/user.png) no-repeat center  ; 
 }  

.fa-key   {  
background  :   url(http://hovertree测试数据/texiao/mobile/10/images/pw.png) no-repeat center  ; 
 }  

.hovertree_form_footer   {  
margin-top  :   100px  ;  
font-size  :   14px  ;  
color  :   #5B809A  ; 
 }  
.form_logo  {  font-size  :  26px  ;  }  a  {  color  :  gray  } 
   style  > 
   head  > 

   body  > 
   div   class  ="form_login"  > 
   div   class  ="form_logo"  >  img   src  ="http://hovertree测试数据/themes/hvtimages/hlogo.png"   /> 
   br   />  
何问起管理系统    div  > 
   form   method  ="post"   role  ="form"   id  ="form_login"  > 

   div   class  ="form-group"  > 
   i   class  ="fa fa-user"  >  i  > 
   input   type  ="text"   class  ="form-control"   name  ="username"   id  ="username"   placeholder  ="Username"   autocomplete  ="off"  > 
   div  > 

   div   class  ="form-group"  > 
   i   class  ="fa fa-key"  >  i  > 
   input   type  ="password"   class  ="form-control"   name  ="password"   id  ="password"   placeholder  ="Password"   autocomplete  ="off"  > 
   div  > 
   div   class  ="form-group"   style  ="height:25px; line-height:25px; text-align:left;"  > 
   input   type  ="checkbox"   class  =""   name  ="checkbox"   id  ="checkbox"   placeholder  ="checkbox"   autocomplete  ="off"  > 
   label   class  ="checkfont"   for  ="checkbox"   > 记住我的帐号   label  > 
   div  > 
   div   class  ="form-group"  > 
   button   type  ="submit"   class  ="btn btn-primary btn-block btn-login"  > 登录   button  > 
   br   />  a   href  ="http://hovertree测试数据/h/bjaf/loucldil.htm"   target  ="_blank"  > 查看代码   a  >     a   href  ="http://hovertree测试数据"   target  ="_blank"  > 首页   a  >     a   href  ="http://hovertree测试数据/texiao/"   target  ="_blank"  > 特效   a  > 
   div  > 

   form  > 
   div   class  ="hovertree_form_footer"  >  ©  何问起 hovertree测试数据   div  > 
   div  > 
   body  > 
   html  >  

查看更多关于淡蓝风格的手机登录HTML模板-roucheng的详细内容...