一个纯CSS写的登录的样式_html/css_WEB-ITnose

设计了一个简单的登录样式，然后自己写了下代码，巩固一下自己的状态（就使用了HTML&CSS）

先看效果：

1.HTML代码如下：

    
        
    
        
                        
        
                        
    
    
                     Remember Me            
    
        Login    
    
        Forgot?        Register    

2.CSS代码如下：

body{    background: url("../assets/images/bg_login.jpg") no-repeat fixed;    /* set background tensile */    background-size: 100% 100%;    -moz-background-size: 100% 100%;    margin: 0;    padding: 0;}#content{    background-color: rgba(255, 255, 255, 0.95);    width: 420px;    height: 300px;    border: 1px solid #000000;    border-radius: 6px;    padding: 10px;    margin-top: 15%;    margin-left: auto;    margin-right: auto;    display: block;}.login-header{    width: 100%;    height: 48px;    margin-bottom: 20px;    border-bottom: 1px solid #dcdcdc;}.login-header img{    width: 120px;    margin-left: auto;    margin-right: auto;    display: block;}.login-input-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-input-box input{    width: 340px;    height: 32px;    margin-left: 18px;    border: 1px solid #dcdcdc;    border-radius: 4px;    padding-left: 42px;}.login-input-box input:hover{    border: 1px solid #ff7d0a;}.login-input-box input:after{    border: 1px solid #ff7d0a;}.login-input-box .icon{    width: 24px;    height: 24px;    margin: 6px 4px 6px 24px;    background-color: #ff7d0a;    display: inline-block;    position: absolute;    border-right: 1px solid #dcdcdc;}.login-input-box .icon.icon-user{    background: url("../assets/images/user.png");}.login-input-box .icon.icon-password{    background: url("../assets/images/password.png");}.remember-box{    width: auto;    height: auto;    margin-left: 18px;    margin-top: 12px;    font-size: 12px;    color: #6a6765;}.login-button-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-button-box button{    background-color: #ff7d0a;    color: #ffffff;    font-size: 16px;    width: 386px;    height: 40px;    margin-left: 18px;    border: 1px solid #ff7d0a;    border-radius: 4px;}.login-button-box button:hover{    background-color: #ee7204;}.login-button-box button:active{    background-color: #ee7204;}.logon-box{    margin-top: 20px;    text-align: center;}.logon-box a{    margin: 30px;    color: #4a4744;    font-size: 13px;    text-decoration: none;}.logon-box a:hover{    color: #ff7d0a;}.logon-box a:active{    color: #ee7204;}

发现没法上传资源文件 -_-