凹显风登录页面（1）

最新推荐文章于 2024-06-12 11:13:48 发布

1 one

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量126

点赞数 2

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

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

版权

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

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="./Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/凹显风登录页面.css">
</head>

<body>
    <div class="container">
        <h1>登录</h1>
        <div class="box">
            <div class="box-input">
                <span class="glyphicon glyphicon-user"></span>
                <input type="text" placeholder="用户名">
            </div>

            <div class="box-input">
                <span class="glyphicon glyphicon-eye-close"></span>
                <input type="password" placeholder="密码">
            </div>

            <button>登录</button>
            <div class="sign">
                还没用户？
                <a href="#">立即注册</a>
            </div>
        </div>
    </div>
</body>

</html>

css代码：


* {
    margin: 0;
    padding: 0;
}

body {
    background: url(../image/star.jpg) no-repeat;
    /* 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 */
    background-size: cover;
}

.container {
    width: 450px;
    height: 310px;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5%;
    margin: 10% auto;
    text-align: center;
}

.container h1 {
    color: aliceblue;
    padding: 20px 0;
}

.box .box-input,
.box button {
    margin-bottom: 15px;
}

.box .box-input span {
    width: 5px;
    margin-right: -15px;
}

.box .box-input input {
    width: 180px;
    padding-left: 35px;
    outline: none
}

.box .box-input input:hover {
    background-color: rgb(209, 211, 213);
    box-shadow: 5px 2px rgba(0, 0, 0, .1);
}

.box button {
    width: 150px;
    height: 25px;
    border: 0;
    border-radius: 10px;
    background: -webkit-linear-gradient(left top, rgb(44, 163, 190), rgb(215, 160, 166));
    color: aliceblue;
    font-weight: 600;
    /*  中间间隔 */
    letter-spacing: 5px;
}

.box .sign {
    color: #ccc;
    font-size: 12px;
}

登录页面：