模仿京东登录页面
由于自己初學HTML，想模仿一個頁面來練手，所以就模仿了京東的登錄頁面，功能沒有完全實現(xiàn)，只是大體的布局實現(xiàn)了。
截圖如下：
代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"><title>京東-歡迎登錄</title><meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js"></script> <style type="text/css"> .logo {margin: 10px 0;position: relative;width: 300px;float:left;height:60px; }.welcome-login {margin-top: 15px;position: absolute;margin-left: 15px;color: rgb(51, 51, 51); }.questions {position: relative;float: right;text-decoration: none;color: #999;font-size: 12px;outline: rgb(109, 109, 109) none 0px;top:52px; } a{text-decoration: none;color: #999; } a:hover {color: #f00;text-decoration: underline; }.background-img {position: relative;width: 102%;margin-left: -8px; }.login-form {position: absolute;margin-top: 180px; } .login-wrap{position:relative;height:475px;margin:10px 0 20px;z-index:5px; } .w{width:990px;margin: 0 auto; }#content{clear: both; }.login-wrap .login-form{float:right;top:-140px; } .login-form{position:relative;z-index:4;background:#fff;overflow:visible;width:345px; } .login-form .login-tab{margin-top:15px;height:39px;font-size:18px;font-family:"microsoft yahei";text-align: center;border-bottom:1px solid #f4f4f4;position:absolute;background:#ffff;display:block; } .login-tab{position:relative;margin-left=500px; } .login-form .login-tab-r{right:0; } .login-form .login-tab-l, .login-form .login-tab-r {width: 173px; } a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {margin: 0;padding: 0; } .msg-wrap{width:306px;margin-left: 20px; } .msg-warn{color:#666;border: solid 1px ;border-color:orange;background-color: #FFEEDD;margin-top: 60px;text-align: center;font-size: 12px;padding-top: 3px;padding-bottom:3px; } .form{margin-left: 20px;width:306px;margin-top: 10px;font-size: 20px; } .item .item-fore1 .item .item-fore2{border:1px solider #bdbdbd;} .form .item-fore1{z-index:6; } .form .item{position:relative;margin-bottom:20px; } .item .item-fore2{margin-top:10px;} .form .itxt {line-height:18px;height:40px;padding:10px 0 10px 10px;width:256px;float:none;overflow:hidden;font-size:14px; } .item-fore4{font-size:12px;margin-top: 10px;height: 18px;/* width: 306px; */ } .forgetPassword{ /* margin-left:182px; */position:absolute;right:0;top:0;margin:0; } .jdcheckbox{float: none;vertical-align: middle;margin:0 3px 0 0;padding:0; } .item-fore5{text-align: center; } .lo{} .login-form .login-box .login-btn {border:1px solid #cb2a2d;width:99%;position:relative;height:32px; } .login-form .login-box .login-btn .btn-img{border:1px solid #e85356;background: #e4393c;width:302px;font-size: 20px;color:#fff;display:block;height:31px;line-height:31px;font-family:'Micraosoft YaHei'; }a.btn-img:hover{color:#000;text-decoration: none; } a.ss:hover{color:red;/* text-decoration: none; */ } .main-img{width: 990;height:475; }element.style {background-color: #041422; } /**圖片樣式*/ .login-banner{background-color: #041422;position:absolute;width: 100%;margin-top: 0px; }/* 底部鏈接*/ #footer{text-align:center;padding-bottom:30px;font-size:12px;color:#666; } .copyright{margin-top:10px; } </style> </head><body> <div class="w"><!-- 頭部，logo部分 --><div class="logo"><img alt="京東" src="${pageContext.request.contextPath }/img/logo.png"></img><font size="5px" class="welcome-login">歡迎登錄</font></div><a class="questions" οnmοuseοver="color:red;" target="_blank"href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登錄頁面，調查問卷</a> </div><!-- body --><div id="content"><div class=login-wrap><div class="w"><!-- 登錄框 --><div class="login-form"><div class="login-tab login-tab-l"><a class="ss" href="javascript:void(0)" style="color: #666">掃碼登錄</a></div><div class="login-tab login-tab-r"><a class="ss" href="javascript:void(0)" style="color:#f00">賬戶登錄</a></div><!-- 主體 --><div class="login-box"><div class="mt tab-h"></div><div class="msg-wrap"><div class="msg-warn"><label>公共場所不建議自動登錄，以防賬號丟失</label></div></div><!-- 輸入框 --><div class="mc"><div class="form"><form id="formlogin" method="post" οnsubmit="return false;"><div class="item item-fore1"><!-- <div class="input-group-addon glyphicon glyphicon-user">aa</div> --><label for="loginanme" class="login-label name-label ">賬號</label><input class="itxt" type="text" name="loginname" placeholder="郵箱/用戶名/已驗證手機"></div><div class="item item-fore2"><label for="loginanme" class="login-label name-label">密碼</label><input type="text" class="itxt"name="loginname" placeholder="請輸入密碼"></div><div class="item item-fore4"><div class="safe"><input class="jdcheckbox" type="checkbox" name="remember">自動登錄<a href="#" class="forgetPassword" style="text-align: right;">忘記密碼</a></div></div><!-- 登錄按鈕 --><div class="item item-fore5"><div class="login-btn"><a href="javascript:;" class="btn-img btn-entry" tabindex="6" id="loginsubmit">登??錄</a></div></div></form></div></div></div></div></div><div class="login-banner" ><!-- style="background-color:#041422" --><div class="w"><img class="main-img" height="475px" width="90px" src="${pageContext.request.contextPath}/img/main.jpg"><!-- <div id="banner-bg" class="i-inner" style="background: url(//img11.360buyimg.com/da/jfs/t3154/258/5179306513/128208/9d5b12bd/5864cf6eN542ab244.jpg) "></div> --></div></div></div></div><div class="w"><div id="footer"><div class="links"><a rel="nofollow" target="_blank" href="//www.jd.com/intro/about.aspx">關于我們</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/contact/">聯(lián)系我們</a>|<a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">人才招聘</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/contact/joinin.aspx">商家入駐</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/intro/service.aspx">廣告服務</a>|<a rel="nofollow" target="_blank" href="//app.jd.com/">手機京東</a>|<a target="_blank" href="/links.vm/club.jd.com/links.aspx">友情鏈接</a>|<a target="_blank" href="//media.jd.com/">銷售聯(lián)盟</a>|<a href="//club.jd.com/" target="_blank">京東社區(qū)</a>|<a href="//gongyi.jd.com" target="_blank">京東公益</a>|<a target="_blank" href="//en.jd.com/" clstag="pageclick|keycount|20150112ABD|9">English Site</a></div><div class="copyright">Copyright?©?2004-2017??京東JD.com?版權所有</div></div></div> </body> </html>
總結
- 上一篇： 选择排序由浅到深详细分析和图解
- 下一篇： 用Ext-4.2简单实现分页效果