HTML和CSS实现好看的登录界面

孙hill

已于 2022-10-27 14:43:02 修改

阅读量1k

点赞数 3

文章标签： css css3 html

于 2022-10-16 21:06:06 首次发布

本文链接：https://blog.csdn.net/m0_55056589/article/details/127353047

版权

HTML和CSS实现好看的登录界面

废话不多说直接上效果图

在这里插入图片描述

不墨迹直接上代码

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="./logon.css">
</head>
<body>

<div class="hill">
    <h1>用户登录</h1>
    <div class="data">
        <form action="" method="">
            <div class="form-group">
                <input type="text" class="form-control" name="username"  placeholder="账号"/ ><br><br>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="pwd" placeholder="密码"/><br>
            </div>
            <div class="form-group" style="margin-top:20px">
                <input type="checkbox">
                <span class="chk-box">
                        记住密码<br>
                    </span>
            </div>
            <div class="form-group">
                <input type="submit" class="form-control log-btn" placeholder="登录"/>
            </div>
            <div class="form-group">
                <input type="reset" class="form-control log-btn" placeholder="重置"/>
            </div>

            <div class="sign-up">
                <span>没有账户?</span><br>
                <a href="./login.html" id="si">注册</a>

                <a href="" id="forget">忘记密码</a>
            </div>

        </form>
    </div>
</div>

</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
    /* 盒子模型 */
    box-sizing: border-box;
    /* a标签去除下划线 */
    text-decoration: none;
}
body{
    /* background-color: #576574; */
    /*background-color: #6968AA;*/
    background-color: #a4a4d2;
}
.hill{
    width: 400px;
    height:500px;
    /* background-color: #bdc3c7; */
    background-color: #81D8cf;
    margin: 10% auto;
    color: #2d3436;
    /* 圆角 */
    border-radius: 15px;
    padding: 60px;
    /*加载速度 */
    transition: .5s;
}
.hill h1{
    /* 文字居中 */
    text-align: center;
    margin: 15px 0;
    letter-spacing: 1px;
    /* color: #273c75; */
    color: #FD7914;
}
.hill form{
    margin-top: 10px;
    width: 100%;
}
.hill .form-group{
    margin-bottom: 10px;
}
.hill .form-group .form-control{
    /* 对话框的边框消失 */
    border: none;
    /*    对话框的背景颜色不显示 */
    background:transparent;
    border-bottom: 1px solid #ccc;
    /* 对话框无轮廓 */
    outline: none;
    padding: 10px;
    width: 100%;
}
.hill .form-group .log-btn{
    /* 按钮的边框消失 */
    border: 0;
    /* background-image: linear-gradient(100deg,#D63994,#86A8e7,#5ffbf1); */
    background-image: linear-gradient(100deg,#F6D242,#FF52E5,#5ffbf1);
    /*
#F6D242
#FF52E5 */
    padding: 10px 0;
    color: #ffff;
    font-size: 15px;
    letter-spacing: 0.5px;
    margin-top: 5px;
    background-size: 100%;
    transition: 0.5s;
    border-radius: 10px;
}
.hill .sign-up #si{
    transition: 0.5s;
    font-size: 17px;
    margin-left: 2px;
    /* 变块内元素 */
    display: inline-block;
    color: #54a0ff;
}
#forget
{
    margin-left: 170px;
    display: inline-block;
    color: #54a0ff;
}