主要特色：使用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%;
margin-left:37%;
margin-top:10%;
color:white;
position:absolute;
z-index:9999;
background-color:#000000;
background-color:rgba(0,0,0,0.3);
}
#regist_div{
width:26%;
hight:30%;
margin-left:37%;
margin-top:10%;
display:none;
color:white;
position:absolute;
z-index:9999;
background-color:#000000;
background-color:rgba(0,0,0,0.3);
}
</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”>