周测作业

最新推荐文章于 2025-04-02 19:15:55 发布

Jackson27

最新推荐文章于 2025-04-02 19:15:55 发布

阅读量127

点赞数

本文链接：https://blog.youkuaiyun.com/Jackson27/article/details/101448247

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .all{
            text-align: center;
            width: 500px;
            height: 420px;
            border: 1px solid lightgray
        }
        .red{
            width: 200px;
            color: gray;
            font-size: 20px;
            float: left;
            height: 100px;
            line-height: 100px;
        }
        .red:hover{
            width: 200px;
            border-bottom: 2px solid red;
            color: red;
        }
        .red1{
            width: 50px;
            height: 100px;
            float: left;
        }
        .all2{

            float: left;
        }
        .all2 input{
            width: 400px;
            height: 50px;
            border: 1px solid lightgray;
            margin-top: 20px;
            color: lightgray;
        }
        .all4{
            padding-left: 50px;

        }
        .all4 div{
            padding-left: 330px;
            color: gray;
            padding-top: 20px
        }

        .all4 {
            float: left;
            padding-top: 20px
        }

        .all4 a{
            float: left;
            color: gray;
            padding-top: 20px
        }
        .all3{
            padding-left: 50px;
            float: left;

        }
        .all3 div{
            background-color: red;
            width: 400px;
            font-size: 20px;
            color: white;
            margin-top: 20px;
            line-height: 35px;
        }
        .all5{
            padding-left: 50px;
        }
        .all5 a{
            float: left;
            color: gray;
            padding-top: 20px
        }
        .all5 span{
            float: left;
            color: blue;
            padding-top: 20px
        }

        .all5 div{
            float: right;
            padding-right: 50px;
            color: dodgerblue;
            padding-top: 20px
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <div class="all">
        <div style="border-bottom: 1px solid lightgray;height: 100px">
            <div class="red1"></div>
            <div class="red">账号登录</div>
            <div class="red">手机登录</div>
            <div class="red1">

            </div>
        </div>

        <div class="all2">
            <input type="text" value="请输入邮箱或手机号">
            <input type="text" value="请输入您的密码">
        </div>

        <div class="all4">
            <a><input type="checkbox" value="">7天内自动登录</a>
            <div>忘记密码</div>
        </div>

        <div class="all3">
            <div>
                登录
            </div>
        </div>

        <div class="all5">
            <a>登录即代表同意《</a>
            <span>飞扬会员规则</span>
            <a>》</a>
            <div>免费注册</div>
        </div>
    </div>
</div>
</body>
</html>