登录界面，仿小米
html页
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=0" /> <script type="application/javascript" src="_scripts/jquery-1.10.2.min.js"></script> <script type="application/javascript" src="_scripts/idangerous.swiper-2.1.min.js"></script> <script type="application/javascript" src="_scripts/common.js"></script> <link href="css/login.css" rel="stylesheet" type="text/css">
</head> <body> <div class="nl-content"> <div class="nl-logo-area"></div> <div class="nl-login-title">一个帐号，玩转租车软件</div> <div class="nl-login-intro">一个很好的租车软件</div> <input type="text" class="enter-item" placeholder="邮箱/手机号码/ID"/> <input type="password" class="enter-item" placeholder="密码"/> <input type="text" class="button" value="立即登录"> <div class="ng-foot"> <div class="ng-link-area"><a href="">忘记密码</a></div> </div> <a href="" class="button_one">注册帐号</a> <div class="nl-footer"> <div class="nl-f-copyright">版权所有，翻录必究</div> </div> </div> </body> </html>
css页
/* CSS Document */
*{margin:0;padding:0} img{border:0;} a{ text-decoration:none; color:#000;margin:0;outline:none; -webkit-tap-highlight-color:raba(0,0,0,0); } a:-webkit-any-link { color: -webkit-link; text-decoration: none; cursor: auto; } body{ overflow-y: none; margin: 0; padding: 0; font-size: 12px; font-family: ‘Microsoft Yahei‘, ‘微软雅黑‘, Helvetica, ‘Hiragino Sans GB‘, Arial, sans-serif; } .nl-content{ text-align: center; width: 100%; position: absolute; height: 100%; top: 0; left: 0; } .nl-logo-area { margin:0 auto; height: 80px; margin-bottom: 40px; } .nl-login-title { font-size: 32px; margin:0 auto 10px; margin-bottom: 10px; color: #000; } .nl-login-intro { margin:0 auto; color: #8d8d8d; font-size: 14px; margin-bottom: 30px; } .enter-item { margin:0 auto; background: #fff; width: 298px; display: block; height: 20px; line-height: 20px; padding: 12px 10px; border: 1px solid #e6e6e6; border-radius: 6px; color: #333; font-size: 14px; font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .button{ margin:0 auto; background: #ff7a4d; color: #fff; border: 1px solid #ff7549; border-radius: 6px; color: #7c7c7c; display: block; font-size: 16px; height: 44px; line-height: 44px; text-align: center; width: 320px; } .ng-foot { margin:0 auto; height: 18px; width:320px; margin-top: 16px; } .ng-link-area { margin:0 auto; text-align: right; color: #999; position: relative; float: right; text-align: right; } .button_one { margin:0 auto; cursor: pointer; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; color: #7c7c7c; display: block; overflow: hidden; font-size: 16px; height: 44px; line-height: 44px; text-align: center; width: 320px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .nl-footer { margin:0 auto; text-align: center; padding-bottom: 20px; position: absolute; bottom: 0; left: 0; width: 100%; } .nl-f-copyright { margin:0 auto; color: #999; text-align: center; }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
