項目實戰：京東商城（1）----京東商城首頁
效果圖：
點擊賬戶登錄的效果：
源代碼（如需其余源碼，請在下方評論留言）：
<!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> <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>