HTML+CSS登录界面

最新推荐文章于 2024-05-12 16:02:18 发布

每日小新

最新推荐文章于 2024-05-12 16:02:18 发布

阅读量1.4k

点赞数 6

分类专栏：前端 Java+大数据之旅文章标签： css html html5

本文链接：https://blog.csdn.net/llAl_lAll/article/details/120626762

版权

Java+大数据之旅同时被 2 个专栏收录

112 篇文章 34 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

HTML+CSS登录界面💖

忙碌的国庆节，不是在回家的路上就是在准备出发的路上，各种事情，使得国庆也不轻松，不过也算圆满完成任务，今日发现一个好看的登录界面，分享一波🤩

😏废话不多说，直接上内容代码~

html~index.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="../css/index.css">
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <h4>登录</h4>
            <form action="" method="">
                <input class="acc" type="text" placeholder="用户名">
                <input class="acc" type="password" placeholder="密码">
                <input class="submit" type="submit" value="Login"> 
            </form>
            <div class="fn">
                <a href="javascript:;">注册账号</a>
                <a href="javascript:;">找回密码</a>
            </div>
        </div>
    </div>
</body>
</html>

内容很简单主要使用了div/form/input/a/……等常用标签，剩下就交给样式吧~

😉CSS样式内容稍多一点，没办法为了好看嘛~

css~index.css文件内容>>>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 字体大小设置 */

html{
    font-size: 10px;
    background: url(../img/day10.jpg) no-repeat;
    background-size: cover;
}

/* 设置前背景色 */
html::before{
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    /* background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%); */
    /* background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); */
    /* background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); */
    backdrop-filter: blur(0.25rem);

}

::selection{
    color: #fff;
    background-color: rgb(144,129,241);
}

/* 设置box的样式*/
.box{
    display: flex;
    overflow: hidden;
    width: 90rem;
    height: 55rem;
    background-color: rgba(255, 255, 255, 60%);
    border-radius: 1.5rem;
    margin: 10% auto;
    box-shadow: 0 0 1rem 0.rem rgb(0 0 0 / 10%);
}

.box .left{
    position: relative;
    width: 35%;
    height: 100%;
    background-color: skyblue;
}

.box .left::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/da12.jpg);
    background-size: cover;
    opacity: 80%; 
}

.box .right{
    display: flex;
    width: 65%;
    flex-direction: column;
    align-items: center;
}

.box .right h4{
    color: rgb(144,129,241);
    font-size: 3rem;
    margin-top: 5rem;
}

.box .right form{
    display: flex;
    flex-wrap: wrap;
}

.box .right form .acc{
    outline:none;
    width: 80%;
    height: 5rem;
    font-size: 1.6rem;
    margin-top: 5rem;
    padding: 1rem 0 0 1.6rem;
    border: none;
    border-bottom: 1px solid rgb(144,129,241);
    color: rgb(144,129,241);
    background-color: rgb(0,0,0,0);
}

/* right 右边的具体样式 */
.right form .acc:focus{
    outline:none;
    color: rgb(144,129,241);
    padding: 1rem 0 0 1.6rem;
}

.right .submit{
    width: 60%;
    height: 5rem;
    color: #f6f6f6;
    background-image: linear-gradient(120deg, #e0c3fc 0%,#8ec5fc 110%);
    font-size: 1.4rem;
    border: none;
    border-radius: 0.5rem;
    margin: 6rem 0 0 50%;
    transform: translateX(-50%);
}

.right .submit:hover{
    box-shadow: 0 0 2rem -0.5rem rgb(0 0 0 / 15%);
}

.right .fn{
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    width: 70%;
}

.right .fn a{
    font-size: 1.3rem;
    margin-top: 5rem;
    padding: 1rem 2rem;
    color: #666;
}

.right .fn a:hover{
    color: rgb(144,129,241);
}

😋最后效果展示

在这里插入图片描述

🎉🎉🎉🎉🎉国庆节快乐~🎉🎉🎉🎉🎉

每日小新

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML+CSS登录界面

HTML+CSS登录界面????忙碌的国庆节，不是在回家的路上就是在准备出发的路上，各种事情，使得国庆也不轻松，不过也算圆满完成任务，今日发现一个好看的登录界面，分享一波????????废话不多说，直接上内容代码~html~index.html内容：>>><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e
复制链接

扫一扫