行使HTML5搭建京东登入分界面,js密码修改彰显与掩饰效果

图片 2
ca88会员登录中心

一、添加input框

在我们html文件中,引入了2个css文件,分别为reset.css和login.css。下面我们就来看一下这2个css文件是如何实现布局的。

效果图如下:

<form >        <input   name="oldpwd" type="password" placeholder="请输入旧密码" />        <div  onclick="changepicture(this,'oldpwd')">            <img src="~/Content/images/login/不可见.png" />        </div>        <input   name="newpwd" type="password" placeholder="请输入新密码" />        <div  onclick="changepicture(this,'newpwd')">            <img src="~/Content/images/login/不可见.png" />        </div>        <input   name="quepwd" type="password" placeholder="请确认密码" />        <div  onclick="changepicture(this,'quepwd')">            <img src="~/Content/images/login/不可见.png" />        </div></form>

先来看一下reset.css,这里是对于整个html文件共同的元素需要统一设置的样式,

 图片 1

二、添加css样式

代码如下:

html源码:

    .inputpwd {        outline: medium;        border: none !important;        border-bottom: 1px solid rgba(235,235,235,1)!important;        width:100%!important;    }    /*1).隐藏按钮css ,图片用webpack做了压缩,做了加密*/    .invisible {        margin-top: -50px;        margin-left: 80%    }

[html] 
<!DOCTYPE html> 
<html> 
<head> 
 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/> 
 
<link rel=”stylesheet” href=”css/style.css” /> 
<script
src=”; 
 
</head> 
<body> 
 
<div id=wrapper> 
    <div id=lbl></div> 
    <form> 
        <fieldset id=account> 
            <legend>个人信息</legend> 
            <label for=username>账号:</label>  
            <input id=username class=textbox type=text name=username
required placeholder=”请填写账号” /> 
             
            <label for=password1>密码:</label>  
            <input id=password1 class=textbox type=password
name=password1 required placeholder=”请填写密码”/> 
             
            <label for=password2>重复密码:</label>  
            <input id=password2 class=textbox type=password
name=password2 required placeholder=”请重复密码”/> 
            <label for=email>邮箱地址:</label>  
            <input id=email class=textbox type=email name=email
required placeholder=”www.csdn.com” /> 
 
        </fieldset> 
        <fieldset id=personal> 
            <legend>其他信息</legend> 
            <label for=website>个人网址:</label>  
            <input id=website class=textbox type=url name=website
required placeholder=”” /> 
 
            <label for=age>年龄:</label>  
            <input id=age class=textbox type=number name=age min=18
step=2 pattern=”[0-9]{1,3}” placeholder=”填写年龄”> 
 
            <label for=salary>月薪:</label>  
            <input id=salary class=textbox type=range name=salary
min=0 max=50000 step=500 pattern=”[0-9]{2,}” placeholder=”月薪几多”
value=10000 onchange=”showValue(this.value)” /> 
            <span id=rangevalue>10000</span> 
            <script> 
            function showValue(value) { 
               
document.getElementById(“rangevalue”).innerHTML=value; 
            } 
            </script> 
 
            <label for=description>描述:</label>  
            <textarea id=description name=description cols=30 rows=5
placeholder=”这里是详细描述”></textarea> 
        </fieldset>    
        <fieldset id=confirm> 
            <input type=submit value=”提交” /> 
            <div class=”clearfix”></div> 
        </fieldset> 
    </form>    
</div>         
 
</body> 
</html> 

/*给input添加一个背景图片,no-repeat不平铺,设置padding-left的值为背景图片的宽度*/
.login_form input {
width: 80%;
padding-left: 80px;
border: #E7E7E7 1px solid;
font-size: 26px;
color: #72828f;
height: 75px;
border-radius: 10px;
margin: 0 3%;
}

图片 2

<!DOCTYPE html>
<html>
<head>

.login_form .username {
background: #FFFFFF url(../../Content/weixinImage/登录/用户.png) 25px
20px no-repeat;
background-size: 30px 30px;
margin-top: 60px;
}

login.css是针对性的设置各个布局的样式

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>

.login_form .password {
background: #FFFFFF url(../../Content/weixinImage/登录/密码.png) 28px
22px no-repeat;
background-size: 26px 33px;
margin-top: 30px;
}

代码如下:

<link rel=”stylesheet” href=”css/style.css” />
<script
src=”;

三、js控制文本框的type

/*header*/

</head>
<body>

///密码显示与隐藏    function changepicture(obj, name) {        var showPwd = $('#' + name + '');        if (showPwd.prop =='password') {           showPwd.prop('type', 'text');           $.find.attr("src", "@Url.Content("~/Content/images/login/可见.png")");        }        else {            showPwd.prop('type', 'password');            $.find.attr("src", "@Url.Content("~/Content/images/login/不可见.png")");        }           }

*{

<div id=wrapper>
 <div id=lbl></div>
 <form>
  <fieldset id=account>
   <legend>个人信息</legend>
   <label for=username>账号:</label>
   <input id=username class=textbox type=text name=username required
placeholder=”请填写账号” />
   
   <label for=password1>密码:</label>
   <input id=password1 class=textbox type=password name=password1
required placeholder=”请填写密码”/>
   
   <label for=password2>重复密码:</label>
   <input id=password2 class=textbox type=password name=password2
required placeholder=”请重复密码”/>
   <label for=email>邮箱地址:</label>
   <input id=email class=textbox type=email name=email required
placeholder=”www.csdn.com” />

 效果图如下:

-webkit-box-sizing: border-box;

  </fieldset>
  <fieldset id=personal>
   <legend>其他信息</legend>
   <label for=website>个人网址:</label>
   <input id=website class=textbox type=url name=website required
placeholder=”” />

图片 3

-moz-box-sizing: border-box;

   <label for=age>年龄:</label>
   <input id=age class=textbox type=number name=age min=18 step=2
pattern=”[0-9]{1,3}” placeholder=”填写年龄”>

box-sizing: border-box;}

   <label for=salary>月薪:</label>
   <input id=salary class=textbox type=range name=salary min=0
max=50000 step=500 pattern=”[0-9]{2,}” placeholder=”月薪几多”
value=10000 onchange=”showValue(this.value)” />
   <span id=rangevalue>10000</span>
   <script>
   function showValue(value) {
    document.getElementById(“rangevalue”).innerHTML=value;
   }
   </script>

header{

   <label for=description>描述:</label>
   <textarea id=description name=description cols=30 rows=5
placeholder=”这里是详细描述”></textarea>
  </fieldset> 
  <fieldset id=confirm>
   <input type=submit value=”提交” />
   <div class=”clearfix”></div>
  </fieldset>
 </form> 
</div>  

width:100%;

</body>
</html>

height: 80px;

 

}

css源码:

header .header-content{

[css] 
body{ 
    background:url(bg.jpg) repeat; 
    font-family:Arial Narrow, Arial, sans-serif; 
    margin:0; 
    padding:0; 

header, section, footer{ 
    display:block; 

header{ 
    width:100%; 
    background-color:rgb(0, 0, 0); 
    background-color:rgba(0, 0, 0, 0.9); 
    color:#ccc; 
    padding:15px 0; 
    letter-spacing:1px; 
    margin-bottom:20px; 
    position:relative; 

header h1{ 
    margin:0 50px; 
    text-shadow:2px 2px 2px #888; 
    float:left; 

#backlinks{ 
    float:right; 
    margin:-10px 20px; 
    line-height:25px; 
    font-weight:bold; 
    font-size:12px; 
    text-align:right; 

#backlinks a{ 
    color:#ccc; 
    text-decoration:none; 
    margin:3px 0 0; 
    display:block; 

#backlinks a:hover{ 
    color:#fff; 

footer{ 
    background-color:rgb(0, 0, 0); 
    background-color:rgba(0, 0, 0, 0.8); 
    height:25px; 
    width:100%; 
    line-height:25px; 
    position:relative; 
    font-family:Arial,Helvetica,sans-serif; 
    bottom:0; 
    left:0; 
    color:#888; 
    font-size:11px; 

footer span{ 
    padding-left:20px; 

footer a{ 
    color:#1FA2E1; 

 
#wrapper{ 
    width:770px; 
    margin:0 auto; 
    text-align:center; 

#wrapper hgroup{ 
    margin:20px 0; 
    text-shadow:1px 1px 1px #ccc; 

#wrapper h1{ 
    color:#146FA0; 
    font-size:42px; 
    margin:0; 

#wrapper h2{ 
    color:#71C1ED; 
    font-size:27px; 
    margin:0; 

#lbl{ 
    color:#777; 
    font-size:17px; 
    font-weight:bold; 
    text-shadow:1px 1px 0 #fff; 
    margin:10px 0; 

*:focus{ 
    outline:none; 

label, input, textarea, fieldset{ 
    display:block; 

fieldset#account, fieldset#personal{ 
    width:250px; 
    padding:0 50px 50px; 
    margin:10px; 
    float:left; 
    background:rgb(244,244,244); 
    background:rgba(244,244,244,0.7); 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
    border:3px double #999; 

fieldset#confirm{ 
    padding-top:10px; 
    clear:both; 
    border:none; 
    line-height:15px; 
    margin:10px 0; 

fieldset#confirm label, fieldset#confirm input{ 
    display:inline; 
    float:left; 
    margin:15px 5px 0; 

legend{ 
    font-size:20px; 
    font-weight:bold; 
    letter-spacing:5px; 
    color:#999; 
    margin-left:-20px; 
    text-align:left; 
    padding:0 10px; 
    text-shadow:1px 1px 0 #ccc; 

label{ 
    font-size:17px; 
    font-weight:bold; 
    margin:17px 0 7px; 
    text-align:left; 
    text-shadow:1px 1px 0 #fff; 

textarea{ 
    resize:both; 
    max-width:230px; 

input.textbox, textarea{ 
    padding:5px 10px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    border:1px solid #fff; 
    width:200px; 
    text-shadow:1px 1px 1px #777; 
    -moz-box-shadow: 0px 2px 0px #999; 
    -webkit-box-shadow: 0px 2px 0px #999; 
    box-shadow: 0px 2px 0px #999; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
     
    background:url(required.png) no-repeat 200px 5px #F0F0EF; 
    background:-webkit-gradient(linear, left top, left bottom,
from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /*
Chrome 10+, Saf5.1+ */ 
    background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+
*/ 
    background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10
*/ 
    background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera
11.10+ */ 

input.textbox:focus, textarea:focus{ 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    transform: scale(1.1); 
    -moz-box-shadow: 5px 3px 1px #ccc; 
    -webkit-box-shadow: 5px 3px 1px #ccc; 
    box-shadow: 7px 7px 2px #ccc; 
    text-shadow:1px 1px 3px #777; 

input.textbox:required{ 
    background:url(required.png) no-repeat 200px 5px #F0F0EF; 
    background:url(required.png) no-repeat 200px 5px,
-webkit-gradient(linear, left top, left bottom, from(#E3E3E3),
to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:url(required.png) no-repeat 200px 5px,
-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+,
Saf5.1+ */ 
    background:url(required.png) no-repeat 200px 5px,
-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:url(required.png) no-repeat 200px 5px,
-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:url(required.png) no-repeat 200px 5px,
-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 

input.textbox:required:valid{ 
    background:url(valid.png) no-repeat 200px 5px #F0F0EF; 
    background:url(valid.png) no-repeat 200px 5px,
-webkit-gradient(linear, left top, left bottom, from(#E3E3E3),
to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:url(valid.png) no-repeat 200px 5px,
-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+,
Saf5.1+ */ 
    background:url(valid.png) no-repeat 200px 5px,
-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:url(valid.png) no-repeat 200px 5px,
-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:url(valid.png) no-repeat 200px 5px,
-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 
}        
input.textbox:focus:invalid, input.textbox:not(:required):invalid{ 
    background:url(invalid.png) no-repeat 200px 5px #F0F0EF; 
    background:url(invalid.png) no-repeat 200px 5px,
-webkit-gradient(linear, left top, left bottom, from(#E3E3E3),
to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:url(invalid.png) no-repeat 200px 5px,
-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+,
Saf5.1+ */ 
    background:url(invalid.png) no-repeat 200px 5px,
-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:url(invalid.png) no-repeat 200px 5px,
-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:url(invalid.png) no-repeat 200px 5px,
-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 

input[type=submit] { 
    padding:10px; 
    margin:0 10px !important; 
    width:300px; 

@media screen and (-webkit-min-device-pixel-ratio:0) {  
    input[type=range] {padding:0;} 

#rangevalue{ 
    display:block; 
    text-align:right; 
    margin-top:-25px; 

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder

    color: #aaa; 
    font-style:italic; 
    text-shadow:1px 1px 0 #fff; 

input:-moz-placeholder, textarea:-moz-placeholder { 
    color: #aaa; 
    font-style:italic; 
    text-shadow:1px 1px 0 #fff; 

 
.clearfix{ 
    clear:both; 

box-sizing: border-box;

body{
 background:url(bg.jpg) repeat;
 font-family:Arial Narrow, Arial, sans-serif;
 margin:0;
 padding:0;
}
header, section, footer{
 display:block;
}
header{
 width:100%;
 background-color:rgb(0, 0, 0);
 background-color:rgba(0, 0, 0, 0.9);
 color:#ccc;
 padding:15px 0;
 letter-spacing:1px;
 margin-bottom:20px;
 position:relative;
}
header h1{
 margin:0 50px;
 text-shadow:2px 2px 2px #888;
 float:left;
}
#backlinks{
 float:right;
 margin:-10px 20px;
 line-height:25px;
 font-weight:bold;
 font-size:12px;
 text-align:right;
}
#backlinks a{
 color:#ccc;
 text-decoration:none;
 margin:3px 0 0;
 display:block;
}
#backlinks a:hover{
 color:#fff;
}
footer{
 background-color:rgb(0, 0, 0);
 background-color:rgba(0, 0, 0, 0.8);
 height:25px;
 width:100%;
 line-height:25px;
 position:relative;
 font-family:Arial,Helvetica,sans-serif;
 bottom:0;
 left:0;
 color:#888;
 font-size:11px;
}
footer span{
 padding-left:20px;
}
footer a{
 color:#1FA2E1;
}

width: 990px;

#wrapper{
 width:770px;
 margin:0 auto;
 text-align:center;
}
#wrapper hgroup{
 margin:20px 0;
 text-shadow:1px 1px 1px #ccc;
}
#wrapper h1{
 color:#146FA0;
 font-size:42px;
 margin:0;
}
#wrapper h2{
 color:#71C1ED;
 font-size:27px;
 margin:0;
}
#lbl{
 color:#777;
 font-size:17px;
 font-weight:bold;
 text-shadow:1px 1px 0 #fff;
 margin:10px 0;
}
*:focus{
 outline:none;
}
label, input, textarea, fieldset{
 display:block;
}
fieldset#account, fieldset#personal{
 width:250px;
 padding:0 50px 50px;
 margin:10px;
 float:left;
 background:rgb(244,244,244);
 background:rgba(244,244,244,0.7);
 -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
 border:3px double #999;
}
fieldset#confirm{
 padding-top:10px;
 clear:both;
 border:none;
 line-height:15px;
 margin:10px 0;
}
fieldset#confirm label, fieldset#confirm input{
 display:inline;
 float:left;
 margin:15px 5px 0;
}
legend{
 font-size:20px;
 font-weight:bold;
 letter-spacing:5px;
 color:#999;
 margin-left:-20px;
 text-align:left;
 padding:0 10px;
 text-shadow:1px 1px 0 #ccc;
}
label{
 font-size:17px;
 font-weight:bold;
 margin:17px 0 7px;
 text-align:left;
 text-shadow:1px 1px 0 #fff;
}
textarea{
 resize:both;
 max-width:230px;
}
input.textbox, textarea{
 padding:5px 10px;
 -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
 border:1px solid #fff;
 width:200px;
 text-shadow:1px 1px 1px #777;
 -moz-box-shadow: 0px 2px 0px #999;
 -webkit-box-shadow: 0px 2px 0px #999;
    box-shadow: 0px 2px 0px #999;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 
 background:url(required.png) no-repeat 200px 5px #F0F0EF;
 background:-webkit-gradient(linear, left top, left bottom,
from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */
 background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome
10+, Saf5.1+ */
 background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+
*/
 background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
 background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera
11.10+ */
}
input.textbox:focus, textarea:focus{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
 -moz-box-shadow: 5px 3px 1px #ccc;
 -webkit-box-shadow: 5px 3px 1px #ccc;
    box-shadow: 7px 7px 2px #ccc;
 text-shadow:1px 1px 3px #777;
}
input.textbox:required{
 background:url(required.png) no-repeat 200px 5px #F0F0EF;
 background:url(required.png) no-repeat 200px 5px,
-webkit-gradient(linear, left top, left bottom, from(#E3E3E3),
to(#FFFFFF)); /* Saf4+, Chrome */
 background:url(required.png) no-repeat 200px 5px,
-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+,
Saf5.1+ */
 background:url(required.png) no-repeat 200px 5px,
-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
 background:url(required.png) no-repeat 200px 5px,
-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
 background:url(required.png) no-repeat 200px 5px,
-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
}
input.textbox:required:valid{
 background:url(valid.png) no-repeat 200px 5px #F0F0EF;
 background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear,
left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome
*/
 background:url(valid.png) no-repeat 200px 5px,
-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+,
Saf5.1+ */
 background:url(valid.png) no-repeat 200px 5px,
-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
 background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top,
#E3E3E3, #FFFFFF); /* IE10 */
 background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top,
#E3E3E3, #FFFFFF); /* Opera 11.10+ */
}  
input.textbox:focus:invalid, input.textbox:not(:required):invalid{
 background:url(invalid.png) no-repeat 200px 5px #F0F0EF;
 background:url(invalid.png) no-repeat 200px 5px,
-webkit-gradient(linear, left top, left bottom, from(#E3E3E3),
to(#FFFFFF)); /* Saf4+, Chrome */
 background:url(invalid.png) no-repeat 200px 5px,
-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+,
Saf5.1+ */
 background:url(invalid.png) no-repeat 200px 5px,
-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
 background:url(invalid.png) no-repeat 200px 5px,
-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
 background:url(invalid.png) no-repeat 200px 5px,
-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
}
input[type=submit] {
 padding:10px;
 margin:0 10px !important;
 width:300px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=range] {padding:0;}
}
#rangevalue{
 display:block;
 text-align:right;
 margin-top:-25px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{
 color: #aaa;
 font-style:italic;
 text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
 color: #aaa;
 font-style:italic;
 text-shadow:1px 1px 0 #fff;
}

height: 80px;

.clearfix{
 clear:both;
}

margin: 0 auto;

html源码: [html] !DOCTYPE html
html head meta http-equiv=Content-Type content=text/html; charset=utf-8
/ link rel=stylesheet href=css/style.css / script src=…

/*background-color: red;*/

}

header .header-content .logo{

float: left;

width: 160px;

height: 60px;

background: url(“../image/icon.png”) no-repeat 0 15px;

}

header .header-content span{

float: left;

font-size: 24px;

padding-left: 30px;

margin-top: 20px;

}

header .header-content .login{

float: right;

font-size: 12px;

margin-top: 55px;

padding-bottom: 5px;

font-family: Arial,Verdana,”\5b8b\4f53″;

}

header .header-content .login i{

display: inline-block;

width: 18px;

height: 16px;

margin: 0 5px;

background: url(“../image/msg-icon.png”) no-repeat ;

}

header .header-content .login a{

color: #999;

position: relative;

top: -5px;

}

header .header-content .login a:hover {

color: #E4393C;

text-decoration: underline;

}

main{

width:100%;

height: 475px;

background-color: #E8C99A;

position: relative;

}

main section{

width: 990px;

height:100%;

margin:  0 auto;

background: url(“../image/loginBg.jpg”)no-repeat 0 0 ;

}

main section .login-content{

width: 346px;

height: 346px;

padding: 20px;

float: right;

top: 40px;  ;

background: #fff;

position: relative;

color: #666;

}

main section .login-content-top{

width:100%;

height: 55px;

border-bottom: 1px solid #f4f4f4;

position: absolute;

top: 0;

left:0;

}

main section .login-content-top a:hover,main section .login-content-top
a:nth-child(2) {

font-weight: bold;

color: #e4393c;

}

main section .login-content-top a{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

float: left;

width: 50%;

height: 100%;

padding: 0 20px;

text-align: center;

line-height: 55px;

color: #666;

font-size: 18px;

}

main section .login-content-notice{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

width: 100%;

height: 23px;

position: relative;

background: #fef4e5;

color: #666;

margin: 40px auto 5px;

padding-left: 40px;

border: 1px solid #f6c090;

font-size: 12px;

line-height: 23px;

}

main section .login-content-notice i{

display: inline-block;

width: 16px;

height: 17px;

position: absolute;

left: 10px;

top: 3px;

background: url(“../image/pwd-icons.png”)no-repeat  -104px -24px;

}

main section form{

width: 100%;

}

main section form .form-item{

border: 1px solid #bdbdbd;

height: 38px;

width: 100%;

margin-bottom: 20px;

position: relative;

}

main section form .form-item label{

position: absolute;

top: 0;

left: 0px;

width: 38px;

height: 36px;

border-right: 1px solid #bdbdbd;

}

main section form .form-item input{

height: 100%;

width:100%;

padding-left: 45px;

color: #666;

border: none;

}

main section form .form-item:nth-child(1) label{

background: url(“../image/pwd-icons.png”) no-repeat ;

}

main section form .form-item:nth-child(2) label{

background: url(“../image/pwd-icons.png”) no-repeat -48px 0;

}

main section form .form-check{

font-size: 12px;

}

main section form .form-check label{

margin-left: 5px;

vertical-align: top;

}

main section form .form-check a{

float: right;

color: #666;

}

main section form .form-check a:hover{

color: #E4393C;

text-decoration: underline;

}

main section form input[type = submit]{

width:100%;

height: 31px;

background: #e4393c;

color: #ffffff;

font-size: 18px;

word-spacing: 1em;

border: 1px solid #e85356;

margin-top: 15px;

}

main section .login-content-bottom{

width:100%;

position: absolute;

bottom:0;

left: 0;

padding: 0 18px;

line-height: 50px;

border-top: 1px solid #f4f4f4;

background-color: #fcfcfc;

}

main section .login-content-bottom a{

font-size: 12px;

}

main section .login-content-bottom span{

padding-left: 1px;

margin: 0 5px;

font-size: 10px;

background-color: #999;

}

main section .login-content-bottom a i{

width: 19px;

height: 18px;

display: inline-block;

position: relative;

top: 5px;

}

main section .login-content-bottom a:nth-child(1) i{

margin-right: 5px;

background: url(“../image/QQ-weixin.png”) no-repeat;

}

main section .login-content-bottom a:nth-child(3) i{

margin-right: 5px;

background: url(“../image/QQ-weixin.png”) no-repeat -20px 0;

}

main section .login-content-bottom a:nth-child(6){

float: right;

}

main section .login-content-bottom a:nth-child(6) i{

margin-right: 5px;

background: url(“../image/pwd-icons.png”)-104px -75px no-repeat;;

}

main section .login-content-bottom a:hover {

color: #e4393c;

text-decoration: underline;

}

/*footer*/

footer{

font-size: 12px;

text-align: center;

border-top: solid 1px #e6e6e6;

color: #999;

padding-bottom: 30px;

}

footer p a{

font-size: 12px;

text-align: center;

color: #999;

}

footer p:nth-child(1){

padding-top: 30px;

padding-bottom: 15px;

}

footer p span{

padding-left: 1px;

margin: 0 10px;

font-size: 10px;

background-color: #999;

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图