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;

}

效果如下