2018-09-18-day22作业

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/jd_login.css" />
        <title></title>
        <script>
            function change(){
                var s=document.getElementById('textinput02');
                s.src='img/clear.png';
            }
            
            function change2(){
                var s=document.getElementById('textinput02');
                s.src='';
            }
        </script>
    </head>
    <body>
        <div id='total'>
            <div id='one'>
                <img src='./img/logo.png'>
                <img src='./img/l-icon.png'>
                <span id='one_right'>
                    <img src='./img/q-icon.png'>
                    登录页面,调查问卷
                </span>
            </div>
            <div id='two' align="center">
                <div style="height:18px;"></div>
                <div>
                    <img src="./img/xx.png"/>
                    <font style="color:gray;">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!新版《<font style="color:black;"><b>京东隐私政策</b></font>》已上线,将更有利与保护您的个人隐私</font>
                </div>
                
            </div>
            <div id="three">
                <div>
                    
                    <div id="login_form" align="center">
                        <img src="img/warning.png" />
                        <font style="color:gray;height:50px;background-color:#FFF8F0;font-size:10px;">京东不会以任何要求你转账汇款,谨防诈骗</font>
                        <table cellspacing="20">
                            <tr>
                                <td><font size="5"><b>扫码登录</b></font></td>
                                <td><font size="5" color="#FF0000"><b>账户登录</b></font></td>
                            </tr>
                
                        </table>
                        <hr style="color:gray;font-size:5px;">
                        <br>
                        
                        <table bgcolor="gray" cellspacing="1">
                            <tr bgcolor="white" height="40px">
                                <td><img src='img/pygame.png'></td>
                                <td>
                                    <input onfocus="change()" id='textinput' class='zh' type='text' onblur="change2()">
                                    <img id='textinput02' style="width:40px;">
                                </td>
                            </tr>
                            <tr bgcolor="white" height="45px" style="border-collapse:separate; border-spacing:10px;">
                                <td><img src="img/password_icon.png"/></td>
                                <td><input id="textinput" type='password'></td>
                            
                            </tr>
                            
                                
                            
                            
                        </table>
                        <span style="position:relative;margin-right: -140px;";>
                            <a href='#'><font>忘记密码</font></a>
                        </span>
                        <br>
                        <span>
                            <button style="width:200px;height:50px;background-color: red;"><font size="5" color="white"><b>登&nbsp;录</b></font></button>
                        </span>
                        <div style="position: absolute; left:10px;bottom:10px;">
                            <img src="img/qq.png"/>
                            <img src="img/weixin.png"/>
                        </div>
                        <div style="position: absolute;right: 10px;bottom: 10px;">
                            
                            <img src="img/right.png" style="margin-bottom:-7px;"/>
                            <a href='#'><font color="#FF0000">立即注册</font></a>
                        </div>
                    </div>
                </div>
                    
                </div>
            </div>
            <div id='four' align="center" style="position:relative;margin-top:-150px;">
                <span>
                <font class='bu'>关于我们</font>&nbsp;|&nbsp;<font class='bu'>联系我们</font>&nbsp;|&nbsp;<font class='bu'>人才招聘</font>&nbsp;|
                &nbsp;<font class='bu'>商家入驻</font>&nbsp;|&nbsp;<font class='bu'>广告服务</font>&nbsp;|&nbsp;<font class='bu'>手机京东</font>&nbsp;|
                &nbsp;<font class='bu'>友情链接</font>&nbsp;|&nbsp;<font class='bu'>销售联盟</font>&nbsp;|&nbsp;<font class='bu'>京东社区</font>&nbsp;|
                &nbsp;<font class='bu'>京东公益</font>&nbsp;|&nbsp;<font class='bu'>English Site</font>&nbsp;
                </span>
                <br>
                <br>
                <span>
                <font class='bu'>Copyright&nbsp;&copy;&nbsp;2004-2018&nbsp;&nbsp;京东JD.com&nbsp;版权所有</font>
            </span>
            </div>
            
        <div>
    </body>
</html>

2.css部分

#total{
    
    height:766px;
}

#two{
    background-color:#FFF8F0;
    height:50px;

    
}
#three{
    position:relative;
    background: url(../img/bg.png);
    display: block;
    height:475px;
}
#login_form{
    position:absolute;
    background-color:white;
    top:20px;
    right:20px;
    width:300px;
    height:350px;
}

#one_right{
    /*margin-right:20px;*/
    float:right;
    margin-top:30px;
}

#textinput{
    height:35px;
    border:0px;
}
.bu{
    font-size: 15px;
    color:gray;
}



推荐阅读更多精彩内容