zoukankan html css js c++ java

一个纯CSS写的登录的样式

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

先看效果：

1.HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="css/login.style.css">
</head>
<body>

<div id="content">
    <div class="login-header">
        <img src="assets/images/logo">
    </div>
    <form>
        <div class="login-input-box">
            <span class="icon icon-user"></span>
            <input type="text" placeholder="Please enter your email/phone">
        </div>
        <div class="login-input-box">
            <span class="icon icon-password"></span>
            <input type="password" placeholder="Please enter your password">
        </div>
    </form>
    <div class="remember-box">
        <label>
            <input type="checkbox">&nbsp;Remember Me
        </label>
    </div>
    <div class="login-button-box">
        <button>Login</button>
    </div>
    <div class="logon-box">
        <a href="">Forgot?</a>
        <a href="">Register</a>
    </div>
</div>

</body>
</html>

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;
}

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

查看全文

相关阅读:
LeetCode（287）Find the Duplicate Number
LeetCode（290） Word Pattern
LeetCode（205）Isomorphic Strings
LeetCode（201） Bitwise AND of Numbers Range
LeetCode（200） Number of Islands
LeetCode（220） Contains Duplicate III
LeetCode（219） Contains Duplicate II
命令行执行Qt程序
 LeetCode（228） Summary Ranges
redis 的安装和使用记录

原文地址：https://www.cnblogs.com/xinjiebi/p/5061516.html