登录页面

liuqimichale
1 parent 47c63167
Showing 5 changed files with 85 additions and 65 deletions
css/login.css
img/handler_bg.png
img/login-pwd-bg.png
img/login-user-bg.png
login.html
@@ -21,31 +21,56 @@ html,body{
     width: 90.5px;
 }
 .login-cont{
-    height: 380px;
-    width:678px;
+    width:372px;
+    height:360px;
     position: absolute;
     top:50%;
     left: 50%;
-    margin-top: -190px;
-    margin-left: -339px;
-    background-color: rgba(255,255,255,.1);
-    border-radius: 30px!important;
-}
-
-.login .content {
+    margin-top: -186px;
+    margin-left: -180px;
-    /*background-color:#fff;*/
-    /*-webkit-border-radius:7px;*/
-    /*-moz-border-radius:7px;*/
-    /*-ms-border-radius:7px;*/
-    /*-o-border-radius:7px;*/
-    /*border-radius:7px;*/
-    margin: 0 auto;
-    width:328px;
-    /*height: 440px;*/
-    /*padding:46px 30px 30px;*/
-    overflow:hidden;
-    /*position:relative*/
+}
+.login-title{
+    height: 48px;
+    border-bottom: 2px solid #fff;
+    line-height: 48px;
+    padding-left: 40px;
+    font-size:18px;
+    font-weight:400;
+    color:rgba(55,168,247,1);
+    background:rgba(26,29,41,.6);
+    position: relative;
+}
+.login-title:after{
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    width:159px;
+    height:2px;
+    background:rgba(55,168,247,1);
+}
+.login-main{
+    width: 372px;
+    padding:32px 40px;
+    background:rgba(26,29,41,.6);
+}
+.login-user-bg{
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    background:rgba(170,171,171,.8) url("../img/login-user-bg.png") no-repeat center center;
+}
+.login-pwd-bg{
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center;
+}
+.form-control{
+    border-radius: 0;
 }
 .login .content h3 {
     color:#4db3a5;
@@ -66,8 +91,9 @@ html,body{
     margin:0
 }
 .login .content .form-control {
-    height: 36px;
-    width: 328px;
+    height: 40px;
+    width: 251px;
+    display: inline-block;
 }
 .login .content .form-control:active, .login .content .form-control:focus {
     border:1px solid #c3ccda
@@ -96,8 +122,6 @@ html,body{
 .login .content .form-actions {
     clear:both;
     border:0;
-    margin-left:-30px;
-    margin-right:-30px
 }
 .login-options {
     margin-bottom:30px;
@@ -133,11 +157,11 @@ html,body{
     padding-bottom:0
 }
 .login .content .form-actions .btn {
-    margin-top:1px;
+    height: 40px;
     font-size: 18px;
     color: #fff;
-    border:1px solid #c90000;
-    background-color: #de3a41;
+    border:1px solid #37A8F7;
+    background-color: #37A8F7;
     width: 100%;
 }
@@ -258,7 +282,7 @@ html,body{
     left: 0;
 }
 .form-group{
-    margin-bottom: 9px;
+    margin-bottom: 12px;
 }
 .form-control{
     color:#000;
@@ -291,19 +315,19 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
 #slide_box {
-    height: 36px;
+    height: 40px;
     text-align: center;
-    line-height: 36px;
+    line-height: 40px;
     font-size: 14px;
     background-color: rgba(255,255,255,.75);
     border: none;
 }
 #slide_xbox {
-    width: 56px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     text-align: center;
-    line-height: 36px;
+    line-height:40px;
     font-size: 14px;
     position: absolute;
     background: #35b34a;
@@ -311,8 +335,8 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
 #btn {
     cursor: pointer;
-    width: 56px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: #fff url(../img/handler_bg.png);
     float: right;
     /*-webkit-box-shadow: 0px 0px 15px 0px #ddd;*/
@@ -32,45 +32,41 @@
         <div class="content">
             <!-- BEGIN LOGIN FORM -->
-            <div class="text-center" style="margin: 36px 0">
-                <img src="img/login-logo-icon.png">
+            <div class=" login-title">
+                账户登录
             </div>
-            <div class="form-group">
-                <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
+            <div class="login-main">
+                <div class="form-group">
+                    <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
-                <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入用户名" name="username" id="userName" maxlength="25">
-                <div class="alert-danger display-hide error_ifo">
-                    <span>请输入正确的邮箱 </span>
+                    <span class="login-user-bg"></span><input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入用户名" name="username" id="userName" maxlength="25">
+                    <div class="alert-danger display-hide error_ifo">
+                        <span>请输入正确的邮箱 </span>
+                    </div>
                 </div>
-            </div>
-            <div class="form-group">
+                <div class="form-group">
-                <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" maxlength="20" id="password">
-                <div class="alert-danger display-hide error_ifo">
-                    <span>请输入正确密码</span>
+                    <span class=" login-pwd-bg"></span><input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" maxlength="20" id="password">
+                    <div class="alert-danger display-hide error_ifo">
+                        <span>请输入正确密码</span>
+                    </div>
                 </div>
-            </div>
-            <div id="slide_box">
-                <div id="slide_xbox">
-                    <div id="btn"></div>
+                <div id="slide_box">
+                    <div id="slide_xbox">
+                        <div id="btn"></div>
+                    </div>
+                    拖动滑块验证
                 </div>
-                拖动滑块验证
-            </div>
-            <!--<div class="form-group" style="position: relative">-->
-            <!--<i class="verification-logo"></i>-->
-            <!--<input class="form-control form-control-solid placeholder-no-fix verification-input" type="text" autocomplete="off" placeholder="请输入验证码" name="" maxlength="4" id="login_imgCode_value"/><div class="imgWrap"><img src="" id="login_imgCode">&nbsp;</div>-->
-            <!--&lt;!&ndash;<div class="alert-danger display-hide error_ifo">&ndash;&gt;-->
-            <!--&lt;!&ndash;<span>请输入正确验证码 </span>&ndash;&gt;-->
-            <!--&lt;!&ndash;</div>&ndash;&gt;-->
-            <!--</div>-->
-            <div id="login_error_ifo" class="login_error_ifo">
+                <div id="login_error_ifo" class="login_error_ifo">
+                </div>
+                <div class="form-actions">
+                    <button type="button" class="btn uppercase" id="login-btn">登录</button>
+                </div>
             </div>
-            <div class="form-actions">
-                <button type="button" class="btn uppercase" id="login-btn">登录</button>
-            </div>
+