凹显风登录页面（2）

最新推荐文章于 2024-06-21 15:14:18 发布

1 one

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量88

点赞数 1

分类专栏：前端各种登录页面文章标签：前端

本文链接：https://blog.csdn.net/weixin_62604922/article/details/131505950

版权

前端各种登录页面专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凹显风登录页面</title>
    <link rel="stylesheet" href="./css/02-凹显风登录页面.css">
</head>

<body>
    <div class="box">
        <h1>登&nbsp;录</h1>

        <div class="login_box">
            <div class="user">
                <input type="text" placeholder="请输入用户名">
                <span></span>
            </div>

            <div class="password">
                <input type="password" placeholder="请输入密码">
                <span></span>
            </div>

            <div class="remember">
                <span class="left">
                    <!--  label标签的for属性与相关元素的id属性相同 -->
                    <input type="checkbox" name="re" id="re" /> <label for="re">记住我</label>
                </span>

                <span class="right"><a href="#">忘记密码？</a></span>
            </div>

            <button>登录</button>
        </div>
    </div>
</body>

</html>

CSS代码：


@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?xs5t2x');
    src: url('fonts/icomoon.eot?xs5t2x#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?xs5t2x') format('truetype'),
        url('fonts/icomoon.woff?xs5t2x') format('woff'),
        url('fonts/icomoon.svg?xs5t2x#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(../image/star2.jpg) no-repeat;
    background-size: cover;
}

/* 登录大盒子 */
.box {
    width: 450px;
    height: 300px;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 8px 8px 10px rgba(0, 0, 0, .4);
    margin: 10% auto;
    text-align: center;
    color: aliceblue;
}

/* 登录标题 */
.box h1 {
    padding: 15px 0;
}

/* 用户名 密码 记住我部分 */
.user,
.password,
.remember {
    position: relative;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.user input,
.password input {
    padding-left: 5px;
    width: 200px;
    height: 25px;
    font-size: 12px;
    outline: none;
}

.remember {
    height: 15px;
    font-size: 8px;
}

.left {
    padding-left: 10px;
    float: left;
}

.right {
    float: right;
}

.right a {
    color: #fef9f9;
    text-decoration: none;
}

/* 登录提交按钮 */
button {
    width: 100px;
    background-color: #fef9f9;

}

input:hover,
button:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .4);
}

.user span,
.password span {
    font-family: 'icomoon';
    position: absolute;
    top: 6px;
    right: 0;
    font-size: 14px;
    color: #bfbebe;
}

登录页面：