主要特色：使用bootstrap搭建，登陸註冊在一個頁面，背景圖片輪播
說明：圖片820×560
代碼：
<%@ page language=」java」 contentType=」text/html; charset=UTF-8″
pageEncoding=」UTF-8″%>
<!DOCTYPE html PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」 「http://www.w3.org/TR/html4/loose.dtd」>
<html>
<head>
<meta http-equiv=」Content-Type」 content=」text/html; charset=UTF-8″>
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge」>
<meta name=」viewport」 content=」width=device-width, initial-scale=1″>
<title>登錄註冊</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + 「://」
+ request.getServerName() + 「:」 + request.getServerPort()
+ path + 「/」;
%>
<link rel=」shortcut icon」 href=」<%=basePath %>img/brandbest.png」 />
<!– Bootstrap –>
<link href=」<%=basePath %>bootstrap/css/bootstrap.min.css」 rel=」stylesheet」>
<style>
body:{
}
#login_div{
width:26%;
hight:30%;
/*float:right;
margin-top:110px;
margin-right:160px; */
margin-left:37%;
margin-top:10%;
color:white;
position:absolute;
z-index:9999;
background-color:#000000;/* IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)下顏色被覆蓋 */
background-color:rgba(0,0,0,0.3); /* IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂，但解析為透明 */
}
#regist_div{
width:26%;
hight:30%;
/*float:right;
margin-top:110px;
margin-right:160px; */
margin-left:37%;
margin-top:10%;
display:none;
color:white;
position:absolute;
z-index:9999;
background-color:#000000;/* IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)下顏色被覆蓋 */
background-color:rgba(0,0,0,0.3); /* IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂，但解析為透明 */
}
</style>
<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn』t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=」http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js」></script>
<script src=」http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js」></script>
<![endif]–>
<!– <script type=」text/javascript」 src=」js/jquery-3.1.1.js」></script> –>
<script type=」text/javascript」 src=」<%=basePath %>js/jquery-1.11.3.js」></script>
<script type=」text/javascript」>
$(function(){
$(「#gologin」).click(function(){
$(「#login_div」).show();
$(「#regist_div」).hide();
});
$(「#goregist」).click(function(){
$(「#login_div」).hide();
$(「#regist_div」).show();
});
});
</script>
</head>
<body>
<div class=」bg」 style=」width:100%;height:100%;position:absolute;」>
<div id=」carousel-example-generic」 class=」carousel slide」 data-ride=」carousel」>
<!– Indicators –>
<ol class=」carousel-indicators」>
<li style=」display:none;」 data-target=」#carousel-example-generic」 data-slide-to=」0″ class=」active」></li>
<li style=」display:none;」 data-target=」#carousel-example-generic」 data-slide-to=」1″></li>
<li style=」display:none;」 data-target=」#carousel-example-generic」 data-slide-to=」2″></li>
</ol>
<!– Wrapper for slides –>
<div class=」carousel-inner」 role=」listbox」>
<div class=」item active」>
<img style=」width:100%;」 src=」<%=basePath %>img/bg1.jpg」 alt=」…」>
<div class=」carousel-caption」>
<!– bg1.jpg –>
</div>
</div>
<div class=」item」>
<img style=」width:100%;」 src=」<%=basePath %>img/bg2.jpg」 alt=」…」>
<div class=」carousel-caption」>
<!– bg2.jpg –>
</div>
</div>
<div class=」item」>
<img style=」width:100%;」 src=」<%=basePath %>img/bg3.jpg」 alt=」…」>
<div class=」carousel-caption」>
<!– bg3.jpg –>
</div>
</div>
<!– … –>
</div>
<!– Controls –>
<!– <a class=」left carousel-control」 href=」#carousel-example-generic」 role=」button」 data-slide=」prev」>
<span class=」glyphicon glyphicon-chevron-left」></span>
<span class=」sr-only」>Previous</span>
</a>
<a class=」right carousel-control」 href=」#carousel-example-generic」 role=」button」 data-slide=」next」>
<span class=」glyphicon glyphicon-chevron-right」></span>
<span class=」sr-only」>Next</span>
</a> –>
</div>
</div>
<!– 登錄框 –>
<div class=」loginAndRegist」>
<div id=」regist_div」>
<form>
<p style=」text-align:center;font-size:25px;」>用戶註冊 <a id=」gologin」 style=」font-size:10px;cursor:pointer;」>去登錄</a></p>
<div class=」form-group」>
<label for=」exampleInputEmail1″>賬號</label> <input
type=」email」 class=」form-control」 id=」regist_name」
placeholder=」account」><span id=」mark」 style=」display:hidden;」></span>
</div>
<div class=」form-group」>
<label for=」exampleInputPassword1″>密碼</label> <input
type=」password」 class=」form-control」 id=」regist_pass」
placeholder=」Password」>
</div>
<div class=」form-group」>
<label for=」exampleInputPassword1″>確認密碼</label> <input
type=」password」 class=」form-control」 id=」regist_pass2″
placeholder=」Confirm Password」><span id=」mark2″ style=」display:hidden;」></span>
</div>
<input id=」basePath」 type=」hidden」 value=」<%=basePath %>」/>
<button style=」background:#96c656;color:white;」 type=」button」 class=」btn btn-default」 id=」btn_regist」>註冊</button>
</form>
</div>
<div id=」login_div」>
<p style=」text-align:center;font-size:25px;」>用戶登錄 <a id=」goregist」 style=」font-size:10px;cursor:pointer;」>去註冊</a></p>
<form>
<div class=」form-group」>
<label for=」exampleInputEmail1″>賬號</label> <input
type=」email」 class=」form-control」 id=」login_name」
placeholder=」account」>
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/203994.html
微信掃一掃 
支付寶掃一掃 
