QQ登录页面样式设计-CSDN博客

本文链接：https://blog.csdn.net/qq_40102768/article/details/97974229
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .all{
            border: 1px solid lightskyblue;
            width: 300px;
            height: 360px;
            top: 100px;
            right: 200px;
            position: absolute;
        }
        .first{
            width: 335px;
            height: 50px;
        }
        .login,.passwd{
            width: 160px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            display:block;
            font-family: "Lucida Blackletter", eufm10, blackletter;
            color: gray;
            float: left;
        }
        .login:hover{
            color: black;
        }
        .passwd:hover{
            color: black;
        }
        .second{
            width: 330px;
            height: 300px;
        }
        .number{
            width: 280px;
            height: 35px;
            margin-top: 33px;
            margin-left: 15px;
        }
        .password{
            width: 280px;
            height: 35px;
            margin-top: 15px;
            margin-left: 15px;
        }
        .bnext{
            width: 20px;
            height: 20px;
            margin-top: 10px;
            margin-left: 15px;
        }
        .lnext{
            display: block;
            width: 100px;
            height: 10px;
            margin-left: 45px;
            margin-top: -22px;
            font-size: small;
        }
        .oknext{
            width: 280px;
            height: 40px;
            margin-top: 15px;
            margin-left:15px;
            border: 0;
            background-color: deepskyblue;
            font-size: large;
            color: white;
            font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;
        }
        .search{
            font-size: small;
            color: blue;
            /*margin-top: 80px;*/
            line-height: 50px;
            margin-left: 110px;
        }
        .search:hover{
            color: gray;
        }
        
        .forth{
            width: 220px;
            height: 50px;
            /*line-height: 0px;*/
            margin-top: -20px;
            padding-left: 210px;
            font-size: small;
            color: blue;
        }
        .fog:hover{
            color: gray;
        }
        /*.search{*/
            /*width:100px ;*/
            /*height: 10px;*/
            /*margin-top: 45px ;*/
            /*margin-left: 10px;*/
        /*}*/

    </style>
</head>
<body>
<div class="all">
    <div class="first">
        <span class="login">微信登录</span>
        <span class="passwd">QQ登录</span>

    </div>
    <div class="second">
        <input type="text" placeholder="支持QQ号/邮箱/手机号登录" class="number"><br/>
        <input type="password" placeholder="QQ密码" class="password">
        <input type="checkbox" class="bnext"><span class="lnext">下次自动登录</span>
        <input type="button" value="登录" class="oknext">
        <span class="search">扫码快捷登录</span>
    </div>
    <!--<div class="third">-->
        <!--<span class="search">扫码快捷登录</span>-->
    <!--</div>-->
    <div class="forth">
        <span class="fog">忘了密码？</span>
    </div>
</div>
</body>
</html>
qq邮箱用户登陆页面
