登录页练习

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

} .z1{ font-size:24px ; color: #131313; } .z2{ margin-left: 40px; font-size: 14px; color: #869AC4;

} .z3{ font-size: 14px; color: #A7A7A7; } .line{ width: 450px; height: 2px; margin: 0px auto; background-color: #ccc; } .radio-group{ margin-top: 39px; box-sizing: border-box; } #a{ width: 16px;height: 16px; vertical-align: middle; color: #000; margin-left: 126px; cursor: pointer; } #b{ width: 16px;height: 16px; vertical-align: middle; color: #000; margin-left: 56px; cursor: pointer; } .label1{ font-size: 16px; color: #000; margin-left: 10px; } .label2{ font-size: 12px;color: #a0a0a0;

margin-left: 7px;

} .user{ background: url(./img/222.png) no-repeat 16px center; width: 380px;height: 40px;

outline: none;
border: solid 1px #aaaaaa;
background-color: #fff;
padding-left: 70px;
margin: 35px auto 29px;
display: block;
box-sizing: border-box;

} .yzm{ display: flex; } .pwd{ background: url(./img/333.png) no-repeat 20px center; width: 380px;height: 40px;

outline: none;
border: solid 1px #aaaaaa;
background-color: #fff;
padding-left: 70px;
margin: 0 auto 29px;
display: block;
box-sizing: border-box;

} .yzm .yzm-input{ width: 180px;height: 40px; border: 1px solid #aaaaaa; outline: none; background-color: #fff; padding-left: 20px; box-sizing: border-box; margin-left: 60px; } .yzm-img{ width: 150px;height: 40px; border: 1px solid #aaaaaa; margin-left: 30px; } .yzm .yzm-img img{ width: 100%; height: 100%; display: block; } .yzm span{ color: #1a479c; font-size: 14px; line-height: 40px; margin-left: 9px; } .jizhu{

margin-top: 31px;

} #e{ width: 16px;height: 16px; vertical-align: text-top; margin-left: 61px; } .jizhu label{ font-size: 14px; margin-left: 11px; color: #010101; } .jizhu span{ color: #1a479c; font-size: 14px; margin-left: 145px; } .login{ width: 380px;height: 45px; line-height: 45px; background-color: #f19149; margin: 25px auto 30px; box-sizing: border-box; border: 2px solid #f5b381; font-size: 24px;color: #fff; text-align: center; } .login:hover{ background-color: #EB6100; cursor: pointer; } .line2{ width: 500px; height: 1px; background-color: #e5e5ee; } .dec2{ font-family: SimSun; font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 24px; color: #1a479c; margin-left: 35px; margin-top: 10px; } .tu{

margin-left: 33px;
margin-top: 20px;

} html:

会员登录 立即注册 享积分换礼、返现等

普通登录 手机动态密码登录

    <input type="text" placeholder="请输入注册手机号" class="user">
    <input type="text" placeholder="" class="pwd">
    <div class="yzm">
         <input type="text" placeholder="请输入验证码"  class="yzm-input">
         <div class="yzm-img">
            <img src="./img/444.png" alt="">
            
         </div>
         <span>换一张</span>
    </div>
    <div class="jizhu">
         <input type="checkbox" id="e">
         <label for="e">30天内自动登录</label>
         <span>忘记密码？</span>
    </div>
    <div class="login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
    <div class="line2"></div>
    <div class="dec2">
    您也可以用合作网站的账号去登录
    </div>
    <div class="tu">
      <img src="./img/555.png" alt="">
    </div>
</div>