web_day3作业

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
                font-family: 微软雅黑;
                font-size: 16px;
                color: #707070;
            }
            #middle{
                background-image: url(img/bg.png);
                height: 476px;
            }
            #img1{
                margin:30px auto 0 auto;
            }
            #img2{
                margin-left: 15px;
            }
            #top1{
                text-align:left; 
                padding-bottom:0;
            }
            .img3{
                margin: 0 auto 0 900px;
            }
            .p1{
                margin-right: 10px;
            }
            .font1{
                font-size: 15px;
                display: inline-block;
                margin:0;
            }
            .font2{
                margin-left: 290px;
            }
            .font3{
                
            }
            .img4{
                margin: 15px auto 0 200px;
                /*padding-top: 20px;*/
            }
            .img5{
                margin: 8px auto auto 25px;
            }
            #div1{
                width: 380px; 
                height: 400px; 
                background-color: white; 
                margin: 10px 30px auto auto; 
                float: right;
                
            }
            #div11{
                width: 380px; 
                height: 40px; 
                background-color: papayawhip;
            }
            #div14{
                background-color: #EEEEEE;
                height: 60px;
            }
            .table1{
                /*border-bottom: 2px;*/
                width: 380px;
                height: 50px;
                /*border-bottom-color: red;*/
                
                border:1px solid #eee
                /*border="1" cellspacing="0" cellpadding="0" width="380" height="50"*/
            }
            .td1{
                font-size: 25px;
                font-family: "微软雅黑";
            }
            .input1{
                margin-left: 40px;
                background-color: firebrick;
            }
            .login-btn{
                height: 32px;
                background-color: red;
                /*margin-top: 30px;*/
                width: 100%;
            }
            .login-btn a{
                color: #FFFFFF;
                text-align: center;
                display: block;
                padding-top: 2px;
                /*vertical-align: middle;*/
                height: 32px;
                font-size: 20px;
            }
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                /*padding-top: 15px;*/
            }
        </style>
    </head>
    <body>
        <div id="top" style="background-color: white; height: 150px;">
            <div id="top1" style="height: 100px; padding-left: 20px;">
                <span id="">
                    <img id="img1" src="img/logo.png"/>
                </span>
                <span id="">
                    <img id="img2" src="img/l-icon.png"/>
                </span>
                
                <img class="img3" src="img/q-icon.png" />
                <font style="font-size: 15px; margin:auto 10px 10px auto">登录页面,调查问卷</font>
            </div>
            <div id="top2" style="background-color: bisque; height: 50px;background-color:papayawhip;">
                <img class="img4" src="img/warning.png" />
                <font class="font1">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。</font>
            </div>
        </div>
        <div id="middle" style="background-color: chartreuse; ">
            <div id="div1">
                <div id="div11">
                    <img class="img5" src="img/warning.png"/>
                    <font class="font1" style="">京东不会以任何理由要求您转账汇款,谨防诈骗</font>
                </div>
                <div id="div12">
                    <table class="table1">
                        <tr align="center">
                            <td class="td1">扫码登录</td>
                            <td class="td1" style="color: red;">账户登录</td>
                        </tr>
                    </table>
                </div>
                <!-- form -->
                <form>
                <div class="h252 pl20 pr20">
                    <div class="w100p">
                        <div class="h40 center">
                            <div class="warning fs10 color-r"></div>
                        </div>

                    </div>
                    <div class="w100p">
                        <div class="h50 center">
                            <label for="username" id="username" class="itxt-icon"><img src="img/pygame.png"></label>
                            <input placeholder="邮箱/用户名/已验证手机" id="username" class="itxt" type="text" name="username" autocomplete="off">
                        </div>
                    </div>
                    <div class="w100p">
                        <div class="h50 center pt10">
                            <label for="password" id="password" class="itxt-icon"><img src="img/password_icon.png"></label>
                            <input placeholder="密码" id="password" class="itxt" type="password" name="password" autocomplete="off">
                        </div>
                    </div>
                    <div class="w100p">
                        <div class="h32 right-link">
                            <div class="fr fs10 pt10"><a href="">忘记密码</a></div>
                        </div>
                    </div>
                    <div class="w100p">
                        <div class="h50 center">
                            <div class="login-btn"><a href="">登&nbsp;&nbsp;&nbsp;&nbsp;录</a></div>
                        </div>
                    </div>
                </div>

                </form>
                
                <div class="w90p">
                    <div class="login-plus h50 pt15">
                        <ul>
                            <li class="fl fs20 mr10"><img src="img/qq.png"/>QQ</li>
                            <li class="fl fs20 mr10">|</li>
                            <li class="fl fs20 mr10"><img src="img/weixin.png"/>微信</li>
                            <li class="fr fs20 color-r"><img src="img/right.png"/>立即注册</li>
                        </ul>
                    </div>
                </div>

            </div>
            
        </div>
        <!-- footer -->
<div class="w">
    <div class="footer">
        <div class="pt15 fs10 center">
            <a href="">关于我们</a> <span>|</span>
            <a href="">联系我们</a> <span>|</span>
            <a href="">人才招聘</a> <span>|</span>
            <a href="">商家入驻</a> <span>|</span>
            <a href="">广告服务</a> <span>|</span>
            <a href="">手机京东</a> <span>|</span>
            <a href="">友情链接</a> <span>|</span>
            <a href="">销售联盟</a> <span>|</span>
            <a href="">京东社区</a> <span>|</span>
            <a href="">京东公益</a> <span>|</span>
            <a href="">English Site</a>
        </div>
    </div>

</div>
    </body>
</html>
jd.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容