day21_task_京东登录界面

要求: 完成以下图片所示登录界
fdsf.jpg
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>京东-欢迎登录</title>
        <style type="text/css">
            #img1{
                position: absolute;
                left: 100px;
            }
            #img2{
                position: absolute;
                left: 290px;
                top: 30px;
            }


            
            #hua{
                background-image: url(img/bg.png);
                height: 500px;
                position: absolute;
                left: 0px;
                right: 0px;
                top: 110px;
        
            }
            #rejister{
                background-color: white;
                position: absolute;
                right: 90px;
                width: 340px;
                top:18px ;
                height: 380px;
            
            }
            #world{
                font-size: 9px;
                position: absolute;
                background-color: antiquewhite;
                width: 340px;
                height: 30px;
            }
            #child3{
                top: 5px;
                position: absolute;
                left: 50%;
                height: 30px;
                margin-left: -140px;    
            }
            #lel{
                position: absolute;
                right: 80px;
                top: 45px;
                font-size: 14px;
            }
            #box1{
                font-size: 15px;
                background: antiquewhite;
                top: 80px;
                height: 40px;
                left: 0px;
                right: 0px;
                position: absolute;
                }
            #child1{
                top: 5px;
                position: absolute;
                left: 50%;
                height: 30px;
                margin-left: -500px;
                }
            #table1{
                position: absolute;
                left: 0px;
                top: 625px;
                height: 30px;
                right: 0px;
                overflow: hidden;
            }
            #child2{
                position: absolute;
                left: 50%;
                height: 30px;
                margin-left: -500px;
            }
            #copy{
                position: absolute;
                top: 670px;
                left: 500px;
            }
            #deng{
                position: absolute;
                width: 340px;
                height: 60px;
                top: 40px;
            }
            #saoma{
                background-color:rgba(255,255,255,0);
                font-size: 28px;
                position: absolute;
                left: 10px;
                width: 160px;
                border: 0px solid orange;
        
            }
            #account{
                background-color:rgba(255,255,255,0);
                font-size: 28px;
                position: absolute;
                right: 10px;
                width: 160px;
                border: 0px solid orange;
            }
            #aaaa{
                position: absolute;
                width: 340px;
                height: 50px;
                top: 120px; 
            }
            #pygame{
                position: absolute;
                left: 60px;
                height: 40px;
                width: 260px;
                padding-left: 10px;
            }
            #cccc{
                position: absolute;
                left: 20px;
                height: 45px;
                width: 40px;
                
            }
            #bbbb{
                position: absolute;
                width: 340px;
                height: 50px;
                top: 180px; 
            }
            #passworld{
                position: absolute;
                left: 60px;
                height: 40px;
                width: 260px;
                padding-left: 10px;
            }
            #dddd{
                position: absolute;
                left: 20px;
                height: 45px;
                width: 40px;
            }
            #last{
                position: absolute;
                top: 330px;
            }
            #denglu{
                position: absolute;
                top: 270px;
            }
            #forget{
                position: absolute;
                top: 245px;
            }
            #forget a{
                position: absolute;
                left: 260px;
                width: 100px;
                font-size: 15px;
                
            }
            #denglu button{
                position: absolute;
                width: 300px;
                height: 35px;
                left: 20px;
                font-size: 20px;
                background-color: gray;
            }
        </style>
        <link rel="icon" type="image/ico" href="./img/jd_logo.ico"/>
        
    </head>
    <body>
        <div id="number1">
            <img src="img/logo.png" id="img1"/><img src="img/l-icon.png" id="img2"/>
            <a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" id="lel"><img src="img/q-icon.png" id="question" /><label for="question"></label>登录界面,调查问卷</a>
        </div>
        <div id="box1">
            <span id="child1"><img src="img/xx.png" id="xx1" style="height: 14px;"/><span>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。</span>
        </span>
        </div>
        <div id="hua">
            <div id="rejister">
                <form action="" method="get">
                    <div id="world">
                    <span id="child3"><img src="img/xx.png" id="xx2"/><span>京东不会以任何理由要求您转账汇款,谨防诈骗。</span></span>
                    </div>
                    <div id="deng">
                        <input id="saoma"type="button" value="扫码登录"></input><input id="account" type="button" value="账户登录"></input>
                    </div>
                    <div id="aaaa">
                        <img src="img/pygame.png" id="cccc"/><input type="text" name="pygame" value="" placeholder="邮箱/用户名/已验证手机" id="pygame"/>
                    </div>
                    <div id="bbbb">
                        <img src="img/password_icon.png" id="dddd"/><input type="password" name="serect" id="passworld" value="" placeholder="密码"/>
                    </div>
                    <div id="forget">
                        <a href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
                    </div>
                    <div id="denglu">
                        <button type="submit">登录</button>
                    </div>
                    <div id="last">
                        <span id="">
                            <img src="img/qq.png"id="qqq"/><font><label for="qqq"><a href="https://graph.qq.com">QQ</a></font> </label>
                            <img src="img/weixin.png" id="weiwei"/><font><label for="weiwei"><a href="https://open.weixin.qq.com">微信</a></font></label> 
                        </span>
                    </div>
                </form> 
            </div>
        </div>
        <div id="table1">
            <table border="0" cellspacing="0" cellpadding="5px" id="child2">
                <tr>
                    <td class="td"><a href="https://www.jd.com/">关于我们</a></td>
                    <td class="td"><a href="https://www.jd.com/contact/">联系我们</a></td>
                    <td class="td"><a href="http://zhaopin.jd.com/home;jsessionid=C097E4B343083CCE91B4AF7DCA1301E1.s1">人才招聘</a></td>
                    <td class="td"><a href="https://www.jd.com/">商家入驻</a></td>
                    <td class="td"><a href="https://www.jd.com/">广告服务</a></td>
                    <td class="td"><a href="https://app.jd.com/">手机京东</a></td>
                    <td class="td"><a href="https://app.jd.com/">友情链接</a></td>
                    <td class="td"><a href="https://app.jd.com/">销售联盟</a></td>
                    <td class="td"><a href="https://app.jd.com/">京东社区</a></td>
                    <td class="td"><a href="https://app.jd.com/">京东公益</a></td>
                    <td class="td"><a href="https://app.jd.com/">English Site</a></td>
                    
                </tr>
            </table>
        </div>  
        <div id="copy">Copyright © 2004-2019  京东JD.com 版权所有</div>
    </body>
</html>
efw.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容