美文网首页
京东登陆界面的实现

京东登陆界面的实现

作者: ____空白 | 来源:发表于2018-08-17 08:57 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>京东-欢迎登录</title>
        <!--设置网页图标
            rel: icon(设置图标)
            type: 文件类型 image/图片类型(png,ico,x-icon)
        -->
        <link rel="icon" type="image/ico" href="img/icon.ico"/>
        <link rel="stylesheet" type="text/css" href="css/jingdong.css"/>
        
        
    </head>
    <body>
        <!--=======1.顶部=========-->
        <div id="header">
            <!--上面-->
            <div class="h-top">
                <!--图标部分-->
                <div class="icon">
                    <img src="img/logo.png"/>
                    <img src="img/l-icon.png"/>
                </div>
                <!--问卷-->
                <a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank">登录页面,调查问卷
</a>
            </div>
            
            <!--下面的文字-->
            <div class="h-bottom">
                <div id="">
                    <img src="img/warning.png"/>
                    <p>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。</p>
            
                </div>
            </div>
        </div>
        
        <!--=======2.中间内容==========-->
        <div id="content">
            <div class="input_div">
                <div class="info-top">
                    <div class="top-top">
                        <img src="img/warning.png" />
                        <p>京东不会以任何理由要求您转账汇款,谨防诈骗。</p>
                    </div>
                    
                    <div class="top-bottom">
                        <button>扫码登录</button>|
                        <button>账号登录</button>
                    </div>
                </div>
                
                
                <div class="info-middle">
                    <!--输入框模块-->
                    <div class="username">
                        <img src="img/pygame.png"/>
                        <input type="text" name="username" id="" value=""  placeholder="邮箱/用户名/手机号"/>
                    </div>
                    <div class="password">
                        <img src="img/password_icon.png"/>
                        <input type="password" name="password" id="" value="" placeholder="密码"/>
                    </div>
                    
                    <!--忘记密码-->
                    <a href="https://safe.jd.com/findPwd/index.action">忘记密码</a>
                    
                    
                    <!--登陆按钮-->
                    <div class="login">
                        <button>登陆</button>
                    </div>
                        
                </div>
                
                    
                
                
                <div class="info-bottom">
                        <!--其他方式登陆-->
                    <div class="login1">
                        <img src="img/qq.png" id="img1"/>
                        <a id="qq" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=39211A3C6A2DF3C8DDDFCF03655B25CF541FF1966EEE5C1D8133D481B81DD0B8EF5CC2CD90525F519F391548766FAD67&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D9775255f85cd4d1097553ede27f29714">QQ</a>
                        
                        <span id="fuhao1">|</span>
                        
                    
                        <img src="img/weixin.png" id="img2"/>
                        <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=7475A005485CE59BB0CE91D326765EB825EC7E3570CCAE2F6DD2022C3DF44D91119AB93C91172F9F16B6B0C593D62C11&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Dd43e1c78918b4b7b97b80b3092b4a45a&response_type=code&scope=snsapi_login#wechat_redirect" id="weixin">微信</a>
                        
                        <img src="img/right.png" id="img3"/>
                        <a id="zhuce" href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com">立即注册</a>

                    </div>
                </div>
            </div>
        </div>
        <!--============3.底部===========-->
        <div id="footer">
            <div id="foot1">
                <a href="https://www.jd.com/" class="a1">关于我们&nbsp;&nbsp;|</a>
                <a href="http://about.jd.com/contact">联系我们&nbsp;&nbsp;|</a>
                <a href="http://zhaopin.jd.com/home;jsessionid=94F1CB3148F71E08A6CD57A90309AF6C.s1">人才招聘&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">商家入驻&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">广告服务&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">手机京东&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">友情链接&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">销售联盟&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">京东社区&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">京东公益&nbsp;&nbsp;|</a>
                <a href="https://www.jd.com/">English&nbsp;Site</a>
                <h4>Copyright © 2004-2018  京东JD.com 版权所有</h4>
            </div>
            
            
        </div>
        
    </body>
</html>

相关文章

  • 京东登陆界面的实现

  • 2018-10-14

    智能社区商超管理系统登陆界面设计文档 1. 登陆界面的效果图 2. 登陆界面实现的功能描述 1.该登陆界面可以实现...

  • 2018-10-14

    一. 登陆界面的效果图(1)开始界面 (2)用户类型选择界面 二. 登陆界面实现的功能描述 1.该登陆界面可以实现...

  • 智能社区商超管理系统登陆界面设计文档

    1. 登陆界面的效果图 2. 登陆界面实现的功能描述 1.该登陆界面可以实现以库管员、收银员两个不同用户来登陆各自...

  • 2018-10-19

    1. 登陆界面的效果图 2. 登陆界面实现的功能描述 1.该登陆界面可以实现以库管员、收银员两个不同用户来登陆各自...

  • 智能社区商超管理系统登陆界面设计文档

    1. 登陆界面的效果图 2. 登陆界面实现的功能描述 1.该登陆界面可以实现以收银员、库管员两个不同用户来登陆各自...

  • 2018-10-14

    1. 登陆界面的效果图 2. 登陆界面实现的功能描述 1.该登陆界面可以实现以库管员、收银员两个不同用户来登陆各自...

  • 2018-04-04(1)

    关于智慧商超管理系统的登陆界面详述文档 一、登陆界面的效果图 二、登陆界面实现的功能描述 对用户类型(收银员与库管...

  • 2018-03-16

    关于智慧商超管理系统的登陆界面详述文档 一、登陆界面的效果图 二、登陆界面实现的功能描述 对用户类型(收银员与库管...

  • 2018-03-16

    关于智慧商超管理系统的登陆界面详述文档 一、登陆界面的效果图 二、登陆界面实现的功能描述 对用户类型(收银员与库管...

网友评论

      本文标题:京东登陆界面的实现

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