登录框界面

最新推荐文章于 2024-03-18 16:25:59 发布

上善若水丿

最新推荐文章于 2024-03-18 16:25:59 发布

阅读量291

点赞数

分类专栏： web前端文章标签： Web

本文链接：https://blog.csdn.net/PanHanJia/article/details/100657719

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        #b1 {
            width: 400px;
            height: 400px;
            border: 1px solid  black;
            margin: 120px 200px;
            background-color:white;;
        }
        #b1-1 {
            width: 400px;
            height: 90px;
            border: 1px solid white;
        }
        #b1-2 {
            float: left;
            width: 45%;
            height: 80px;
            margin: 10px 10px;
            border-bottom: 2px solid red;
            text-align: center;
            line-height: 80px;
            color: red;
        }
        #b1-3 {
            width: 45%;
            height: 87px;
            margin: 10px 195px;
            border: 2px solid white;
            text-align: center;
            line-height: 80px;
        }
        #b1-4 {
            border: 1px solid gray;
            width: 399px;
        }
        #b2 {
            width: 360px;
            height: 180px;
            border: 1px solid white;
            margin-left: 20px;
            margin-top: 5px;
        }
        #b2-1 {
            width: 340px;
            height: 50px;
            border: 1px solid white;
            margin: 10px 10px;
        }
        #b2-2 {
            width: 340px;
            height: 50px;
            border: 1px solid white;
            margin: 20px 10px;
        }
        #b2-3 {
            width: 300px;
            height: 50px;
            border: white 1px solid;
            margin-left: 20px;
        }
        #b2-4 {
            color: gray;
            width: 140px;
            height: 50px;
            font-size: 12px;
            float: left;
        }
        #b2-5 {
            width: 120px;
            height: 50px;
            float: right;
            font-size: 12px;
            color: gray;
            text-align: right;
        }
        #b3 {
            width: 100%;
            height: 50px;
            border: 1px solid white;
            margin: 5px 0;
        }
        #b4 {
            width: 100%;
            height: 40px;
            margin: 2px 0;
        }
        #b4-1 {
            width: 90px;
            height: 30px;
            margin: 2px 35px;
            font-size: 12px;
            color: gray;
            float: left;
        }
        #b4-2 {
            width: 100px;
            height: 30px;
            font-size: 12px;
            float: left;
            margin: 2px -35px;
        }
        #b4-3 {
            float:left;
            width: 80px;
            height: 30px;
            font-size: 12px;
            margin-left: 110px;
        }
        input {
            outline: none;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div id="b1">
    <div id="b1-1">
        <div id="b1-2">
        <span style="font-size: 25px">账号登录</span>
        </div>
        <div id="b1-3">
        <span style="font-size: 25px ">手机登录</span>
        </div>
    </div>
    <div id="b1-4"></div>
    <div id="b2">
        <div id="b2-1">
            <input type="text" style="margin: 5px 10px;height: 30px;width: 300px;" placeholder="请输入邮箱和手机号">
        </div>
        <div id="b2-2"><input type="text" style="margin: 5px 10px;height: 30px;width: 300px"placeholder="请输入您的密码"></div>
        <div id="b2-3">
            <div style="float: left">
                <input type="checkbox" style="width: 15px;height: 15px;">
            </div>
            <div id="b2-4">7天内自动登录</div>
            <div id="b2-5">忘记密码</div>
        </div>
    </div>
    <div id="b3">
        <input type="button"value="登录" style="width: 310px;height: 40px;margin: -20px 40px;background-color: red;color: white;font-size: 20px">
    </div>
    <div id="b4">
        <div id="b4-1" >登录即代表同意</div>
        <div id="b4-2"><a href="#">《飞扬会员规则》</a></div>
        <div id="b4-3"><a href="#">免费注册</a></div>
    </div>
</div>
</body>
</html>