京东商城项目实战（2）------京东商城登陆页面

时间  2019-11-19
标签 京东商城 项目 实战 登陆 页面 繁體版
原文   原文链接

项目实战：京东商城（1）----京东商城首页javascript

　　　　　京东商城（2）----京东商城登陆页面css

　　　　　京东商城（3）----京东商城注册页面html

 

效果图：java

点击帐户登陆的效果：jquery

 

源代码（如需其他源码，请在下方评论留言）：安全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东-欢迎登陆</title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<div class="lheader">
    <div class="w clearfix">
        <div class="fl">
            <div class="logo fl">
                <a href="#" class="bglogo"></a>
            </div>
            <div class="welcome fl">欢迎登陆</div>
        </div>
        <div class="fr">
            <i></i>&nbsp;<a href="login.html">登陆页面，调查问卷</a>
        </div>
    </div>
</div>
<div class="lcontainer">
    <div class="lts"><i></i>依据《网络安全法》，为保障您的帐户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的我的隐私。</div>
    <div class="bg">
        <div class="loginw">
            <div class="login">
                <div class="warn">
                    <i class="icon_tips"></i>京东不会以任何理由要求您转帐汇款，谨防诈骗。
                </div>
                <div class="login_method">
                    <div class="login_l fl"><a href="javascript:;" id="sm" class="active">扫码登陆</a></div>
                    <div class="spacer">|</div>
                    <div class="login_r fr"><a href="javascript:;" id="zh">帐户登陆</a></div>
                </div>
                <div class="sm_login_box" id="sm_box">
                    <div class="ewm">
                        <div class="ewmbox">
                            <img src="images/show.png" alt="扫一扫" id="show_img"/>
                            <img src="images/phone-orange.png" alt="手机" id="phone_orange"/>
                        </div>
                    </div>
                    <div class="pane clearfix">
                        <ul>
                            <li>打开<a href="#">手机京东</a></li>
                            <li>扫描二维码</li>
                        </ul>
                    </div>
                    <div class="qr">
                        <ul>
                            <li><i class="qr1"></i><span>免输入</span></li>
                            <li><i class="qr2"></i><span>更快</span></li>
                            <li><i class="qr3"></i><span>更安全</span></li>
                        </ul>
                    </div>
                </div>
                <div class="zh_login_box" id="zh_box">
                    <div class="form">
                        <div class="zh_box">
                            <label for="loginName" class="name_icon"></label>
                            <input type="text" placeholder="邮箱/用户名/已验证手机" id="loginName"/>
                        </div>
                        <div class="pw_box">
                            <label for="loginPw" class="pw_icon"></label>
                            <input type="password" placeholder="密码" id="loginPw"/>
                        </div>
                        <p><a href="#" class="fr">忘记密码</a></p><br/>
                        <button>登录</button>
                    </div>
                </div>
                <div class="dsf">
                    <div class="fl">
                        <ul>
                            <li><i class="qq"></i><a href="#">QQ</a><span class="spacer">|</span></li>
                            <li><i class="weixin"></i><a href="#">微信</a></li>
                        </ul>
                    </div>
                    <div class="fr">
                        <ul>
                            <li>
                                <i class="ljzc"></i>
                                <a href="regist.html">当即注册</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="w">
        <p><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></p>
        <p>Copyright©2004-2018  京东JD.com 版权全部</p>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程