前端HTML+CSS制作登录界面

一位女士的猫

已于 2022-06-20 23:47:53 修改

阅读量848

点赞数 1

分类专栏：前端文章标签：前端 html css

于 2022-06-20 23:43:53 首次发布

本文链接：https://blog.csdn.net/m0_70807708/article/details/125382655

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

运用html和css知识做了个小小的“单身狗派对”登录页面，既好看又简单。这几天才开始学习，算是我的处女座啦

成品展示：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单身狗派对</title>
    <style>
        body{
            background:url("./Dog.jpg") no-repeat;
            background-size:1300px ;
        }
        .login{
            width:500px ;
            height:270px ;
            margin:100px auto;
            background:#00000999;
            text-align:center;
            overflow:hidden;
            color:#fff;

        }
        h2{
            color:#fff;
            font-size:40px;
            margin:20px 0;
        }
        .login i{
            font-size:30px;
            color:#fff;
        }
        .item input{
            margin-bottom:18px;
            width:50%;
            height:em;
            font-size:15px;
        }
        button{
                margin-top:7px;
                width:150px;
                height:2em;
                font-size:18px;
                font-weight:bold;
                color:#fff;
                border:0;
                border-radius:40px;
                background-image:linear-gradient(to right,#ff8177 0%,#ff867a 0%,#ff8c7f 21%,#f99185 52%,#cf556c,#b12a5b 100%);
        }

    </style>
</head>
<body>
    <div class="login">
        <h2>Login</h2>
        <div class="item">
            <i class="user"></i>
            用户名：<input type="text" placeholder="username">
        </div>
        <div class="item">
            <i class="password"></i>
            密码：<input type="password" placeholder="password">
        </div>
        <button>Login</button>
    </div>
</body>
</html>