HTML+CSS 实现简单的登陆页面

zzaaa 1

已于 2022-11-05 17:15:42 修改

阅读量296

点赞数

分类专栏： HTML+CSS 小案例文章标签： html css

于 2022-11-05 17:11:09 首次发布

本文链接：https://blog.csdn.net/qq_58782226/article/details/127705895

版权

HTML+CSS 小案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="./style.CSS">
    <link rel="stylesheet" href="./fontawesome/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>登录</h1>
        </div>

        <div class="main">
            <form>
                <span>
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="账号">
                </span><br>
                <span>
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="密码">
                </span><br>
                <button>登录</button>
            </form>
        </div>

    </div>
</body>
</html>

CSS代码

body {
    font-family: sans-serif;
    background: url(./bg.jpg) no-repeat;

    /* 溢出隐藏  */
    overflow: hidden;

    background-size: cover;
}

.container {
    width: 380px;
    margin: 7% auto;
    border-radius: 25px;
    background-color: rgba(0,0,0,.1);

    /* 阴影 */
    box-shadow: 0 0 17px #333;
}

.header {
    text-align: center;
    padding-top: 75px;
}

.header h1 {
    color: #333;
    font-size: 45px;
    margin-bottom: 80px;
}

.main {
    text-align: center;
}

.main input,button {
    width: 300px;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 40px;
    box-sizing: border-box;
    font-size: 15px;
    color: #333;
    margin-bottom: 40px;
}

.main button {
    padding-left: 0;
    background-color: #83acf1;

    /* 字间距 */
    letter-spacing: 2px;

    font-weight: bold;
    margin-bottom: 81px;
}

.main button:hover {
    box-shadow: 2px 2px 5px #555;
    background-color: #7799d4;
}

.main input:hover {
    box-shadow: 2px 2px 5px #555;
    background-color: #ddd;

}

.main span {
    /* 相对定位 */
    position: relative;
}

.main i {
    position: absolute;
    left: 15px;
    color: #333;
    font-size: 16px;
    top: 2px;
}