HTMLCSS静态登录页面实战

HTMLCSS登录页面实战

<div class="box">
        <img src="./img/QQ截图20211207150902.png" class="img1">
        <div class="dec">
            <span class="z1">会员登录</span>
            <span class="z2">立即注册</span>
            <span class="z3">享积分换礼、返现等专属优惠</span>
        </div>
        <div class="line"></div>
        <div class="radio">
            <input type="radio" name="c" id="a">
            <label for="a" class="lab1">普通登录</label>
            <input type="radio" name="c" id="b">
            <label for="b" class="lab2">手机动态密码登录</label>
        </div>
        <input type="text" name="" id="" placeholder="请输入注册手机/邮箱" class="user">
        <div class="pwpwpw">
            <input type="password" name="" id="" placeholder="请输入密码" class="user1">
            <div class="yzm-img">
                获取手机动态验证码
            </div>
        </div>
        <div class="jizhu">
            <input type="checkbox" name="" id="e">
            <label for="e">30天内自动登录</label>
            <span>记住密码</span>
        </div>
        <div class="login">
            登&nbsp;&nbsp;录
        </div>
        <div class="line2"></div>
        <div class="txt">
            您也可以用合作网站的帐号登录去i旅行网
        </div>
        <div class="tu">
            <img src="./img/44.png" alt="">
        </div>
    </div>
    
    

css属性：

     *{padding: 0;margin: 0;}
    html,body{
        font-size: 12px;
        font-family: '微软雅黑';
        height: 100%;
    }
    body{  
        background:url(./img/1.jpg) no-repeat;
        background-size:100% 100%;
        overflow: hidden;
    } 
    .box{
        width: 500px;
        height: 650px;
        margin: 50px auto;
        background: #EEEEEE;
        position: relative;
        overflow: hidden;
    }
    .img1{
        position: absolute;
        top: 0; 
        right: 0;
    }
    .dec{
        width: 397px;
        height: 23px;
        margin: 77px auto;
        margin-bottom:30px;

    }
    .z1{
        font-size: 24px;
        color: #131313;
    }
    .z2{
        font-size: 13px;
        margin-left: 40px;
        color: #1a479c;
    }
    .z3{
        font-size: 13px;
        color: #131313;
    }
    .line{
        width: 450px;
            height: 2px;
        margin: 0px auto;
        background: #cccccc;
    }
    .radio{
        margin-top: 39px;
    }
    .lab1{
        font-size: 14px;
        color: #000000;
        margin-left: 8px;
        font-weight: bold;
    }
    .lab2{
        font-size: 12px;
        color: #414141;
        margin-left: 8px;
    }
    #a{
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
        cursor: pointer;
        margin-left: 126px;
    }
    #b{
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
        cursor: pointer;
        margin-left: 60px;
    }
    .user{
        background: url(./img/QQ截图20211207161119.png) 10px center no-repeat;
        width: 350px;
        height: 40px;
        outline: none;
        background-color: white;
        padding-left: 69px;
        margin: 35px auto 29px;
        display: block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    .pwpwpw{
        display: flex;
    }
    .user1{
        background: url(./img/4.png) 10px center no-repeat;
        width: 180px;
        height: 40px;
        outline: none;
        background-color: white;
        padding-left: 69px;
        margin-left: 75px;
        display: block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    .yzm{
        display: flex;
    }
    .yzm-img{
        width: 150px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #cccccc;
        margin-left: 20px;
        background: #00A0E9;
        text-align: center;
        font-size: 13px;
        color: white;
        margin-top: 3px;
        display:in;
    }
    .jizhu{
        margin-top: 36px;
    }
    #e{
        width: 16px;
        height: 16px;
        vertical-align: text-top;
        margin-left: 76px;
    }
    .jizhu label{
        font-size: 14px;
        color: #010101;
    }
    .jizhu span{
        color: #1a479c;
        font-size: 14px;
        margin-left: 170px;
    }
    .login{
        margin: 25px auto 30px;
        width: 380px;
        line-height: 45px;
        background: #F19149;
        color: white;
        border: 2px solid #F5B381;
        font-size: 24px;
        text-align: center;
    }
    .login:hover{
        background: #EB6100;
    }
    .line2{
        width: 100%;
        height: 1px;
        background: #ccc;
    }
    .txt{
        width: 258px;
            height: 14px;
            font-family: SimSun;
        color: #1a479c;
        margin-top: 13px;
        margin-left: 35px;
    }
    .tu{
        margin-top: 35px;
        margin-left: 110px;
    }