京東商城項目實戰（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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。