2018-09-19 Day23-作业(京东登录界面)

HTML代码



    
        
        京东-欢迎登录
        
    
    
        
        
欢迎登录
登录页面,调查问卷

依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。

京东不会以任何理由要求您转账汇款,谨防诈骗。

扫码登录
账户登录

忘记密码

QQ 微信 立即注册


关于我们 联系我们 人才招聘 商家入驻 广告服务 手机京东 友情链接 销售联盟 京东社区 京东公益 English Site Copyright © 2004-2018 京东JD.com 版权所有

CSS代码

body{
    margin: 0px;
}
#zhuce02:hover,#vx2:hover,#qq1:hover,#forget:hover,#id1:hover,#p1:hover,#p2:hover,#p3:hover,#p4:hover,#p5:hover,#p6:hover,vp7:hover,#p8:hover,#p9:hover,#p10:hover,#p11:hover{
    color: red;
    text-decoration: underline;
}
#logo{
    position: absolute;
    left: 130px;
    top: 24px;
}
#logo_test{
    position: absolute;
    left: 320px;
    top: 45px;
    font-size: 25px;
}
#q{
    position: absolute;
    left: 992px;
    top: 75px;
}
#q1{
    position: relative;
    left: 30px;
    top:-22px;
    font-size: 13px;
}
#tiaowen{
    position: absolute;
    width: 100%;
    top: 100px;
    font-size: 13px;
}
#bgpic{
    position: absolute;
    width: 100%;
    top: 143px;
}
#login{
    position: relative;
    width: 348px;
    height: 400px;
    left: 850px;
    top: 148px;
}
#d01{
    position: absolute;
    height: 40px;
    padding: 0px 42px;
    line-height: 10px;
    background-color: blanchedalmond;
    text-align: center;
}
#login1{
    position: absolute;
    top: 50px;
    left: 50px;
}
#login2{
    position: absolute;
    top: 50px;
    left: 210px;
}
#forget{
    position: absolute;
    top: 225px;
    left: 260px;
    font-size: 10px;
}

#user{
    position: absolute;
    top: 280px;
    left: 890px;
}
#user01{
    position: relative;
    top: -14px;
    left: -7px;
    height: 30px;
    width: 230px;
}
#password{
    position: relative;
    top: -14px;
    left: -7px;
    height: 30px;
    width: 230px;
}
#form_login{
    position: absolute;
    top:150px;
    left: -30px;
    height: 34px;
    width: 270px;
    margin-left: 28px;
    margin-right: 28px;
    background-color: rgb(229,56,60);
}
#qq{
    position: absolute;
    left: 19px;
    top: 360px;
}
#qq1{
    float: left; 
    position:absolute; 
    left: 25px;
    top: 5px;
}
#vx1{
    float: left; 
    position:absolute; 
    left: 52px;
}
#vx2{
    float: left; 
    position:absolute; 
    left: 80px;
    top: 5px;
    width: 50px;
}
#zhuce01{
    float: left; 
    position:absolute; 
    left: 200px;
}
#zhuce02{
    float: left; 
    position:absolute; 
    left: 226px;
    top: 2px;
    width: 100px;
}
#saoma:hover,#denglu:hover{
    color: rgb(229,56,60);
    font-weight:bold ;
}

#p1{
    position: absolute;
    top: 605px;
    left: 200px;

}
#shu1{
    position: absolute;
    top: 605px;
    left: 260px;
}
#p2{
    position: absolute;
    top: 605px;
    left: 280px;
}
#shu2{
    position: absolute;
    top: 605px;
    left: 340px;
}
#p3{
    position: absolute;
    top: 605px;
    left: 360px;
}
#shu3{
    position: absolute;
    top: 605px;
    left: 420px;
}
#p4{
    position: absolute;
    top: 605px;
    left: 440px;
}
#shu4{
    position: absolute;
    top: 605px;
    left: 500px;
}
#p5{
    position: absolute;
    top: 605px;
    left: 520px;
}
#shu5{
    position: absolute;
    top: 605px;
    left: 580px;
}
#p6{
    position: absolute;
    top: 605px;
    left: 600px;
}
#shu6{
    position: absolute;
    top: 605px;
    left: 660px;
}
#p7{
    position: absolute;
    top: 605px;
    left: 680px;
}
#shu7{
    position: absolute;
    top: 605px;
    left: 740px;
}
#p8{
    position: absolute;
    top: 605px;
    left: 760px;
}
#shu8{
    position: absolute;
    top: 605px;
    left: 820px;
}
#p9{
    position: absolute;
    top: 605px;
    left: 840px;
}
#shu9{
    position: absolute;
    top: 605px;
    left: 900px;
}
#p10{
    position: absolute;
    top: 605px;
    left: 920px;
}
#shu10{
    position: absolute;
    top: 605px;
    left: 980px;
}
#p11{
    position: absolute;
    top: 605px;
    left: 1000px;
}
#p12{
    position: absolute;
    top: 630px;
    left: 505px;

}

效果如下


2018-09-19 Day23-作业(京东登录界面)_第1张图片

你可能感兴趣的:(2018-09-19 Day23-作业(京东登录界面))