美文网首页
2018-09-18-day22作业

2018-09-18-day22作业

作者: oxd001 | 来源:发表于2018-09-18 20:51 被阅读0次

    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;
    }
    
    
    
    

    相关文章

      网友评论

          本文标题:2018-09-18-day22作业

          本文链接:https://www.haomeiwen.com/subject/pufvnftx.html