css+html的登陆静态页面

最新推荐文章于 2023-06-15 16:48:41 发布

校园小白

最新推荐文章于 2023-06-15 16:48:41 发布

阅读量217

点赞数

分类专栏： HTML/CSS/JS 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_54149550/article/details/129988084

版权

HTML/CSS/JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>aaa</title>

    <style>
        body{
                background: url("/images/dlbj.jpg") no-repeat center center fixed;
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;
            }
            .dl{
                width: 400px;
                height: 300px;
                border: 1px solid rgb(0, 0, 0);
                position: absolute;
                left: 50%;top: 50%;
                transform: translate(-50%,-50%);
                background-color: aliceblue;
                opacity: 90%;
            }
            .dl,h1{
                margin:30px 0px 50px 0px;
                text-align: center;
            }
            input{
                border: 2px solid rgb(0, 0, 0);
                margin-bottom: 10px;
            }
            button{
                margin: 10px 30px 0px 30px;
            }
            .abb{
                display:inline-block;
                margin-right: 10px;
            }
    </style>
</head>
<body>
    <div class="dl">
        <h1>登录</h1>
        <div>
            <form action="">
                <span>账号：</span><input type="text"  placeholder="请输入用户名"   name="username" value=""><br>
                <span>密码：</span><input  placeholder="请输入密码" type="password" name="password" value=""><br>
                <div class="abb"><input type="checkbox">自动登录</div>
                <div class="abb"><input type="checkbox">记住密码 </div>
                <div class="abb"><a href="">忘记密码</a></div><br>
                <button >登录</button>
                <button>注册</button>
            </form>
        </div>
    </div>
</body>
</html>