jquery登入頁面效果圖

瓜瓜東西發表於2014-08-05
jQuery
<%@ 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>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>

<style type="text/css">
body {
	font: 12px Arial, Verdana, Tahoma, "宋體";
}

* {
	padding: 0px;
	margin: 0px;
}

* li {
	list-style: none;
}

a {
	text-decoration: none;
	color: #20537A;
}

a:hover {
	text-decoration: underline;
}

.clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
}

.clearfix {
	_zoom: 1;
}

*+html .clearfix {
	overflow: auto;
}

.menu_navcc {
	width: 380px;
	margin: 0 auto;
}

.menu_nav {
	width: 380px;
	height: 48px;
	background: url(<%=request.getContextPath()%>/img/login/img/nav_bg.gif)
		repeat-x;
	float: left;
	margin-top: 18px;
}

.menu_nav .nav_content {
	padding-left: 25px;
	background: url(<%=request.getContextPath()%>/img/login/img/nav_l_bg.gif)
		no-repeat;
	float: left;
}

.menu_nav .nav_content li {
	width: 66px;
	height: 48px;
	padding-left: 15px;
	padding-right: 13px;
	background: url(<%=request.getContextPath()%>/img/login/img/nav_li_right.gif)
		no-repeat right center;
	float: left;
	line-height: 48px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}

.menu_nav .nav_content li a {
	color: #fff;
	width: 88px;
	height: 48px;
	display: block;
}

.menu_nav .nav_content li.current {
	line-height: 37px;
}

.menu_nav .nav_content li em {
	background: url(<%=request.getContextPath()%>/img/login/img/bid_new.gif)
		no-repeat;
	width: 35px;
	height: 21px;
	display: inline-block;
	position: absolute;
	top: -20px;
	left: 40px;
}

.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover {
	width: 88px;
	height: 37px;
	background: url(<%=request.getContextPath()%>/img/login/img/nav_li_current.gif)
		no-repeat;
	display: block;
	color: #fff;
}

.menu_nav .nav_content li a:hover {
	background: url(<%=request.getContextPath()%>/img/login/img/nav_li_hover.gif)
		no-repeat;
	line-height: 37px;
	text-decoration: none;
}

.menu_nav_right {
	padding-right: 20px;
	background: url(<%=request.getContextPath()%>/img/login/img/nav_r_bg.gif)
		no-repeat right top;
	float: right;
	margin-left: 50px;
	padding-top: 13px;
	height: 23px;
	padding-bottom: 12px;
}

p {
	margin-bottom: 15px
}
</style>

<style type="text/css">
#menu_navcc{
	width:330px;
}
</style>
<script type="text/javascript">
	$(document).ready(
			function() {
				$("p").click(function() {
					//$(this).hide();
				});

				$("input:text:not(#checkNumber),input:password,input:submit")
						.css("height", "36").css("width", "240").css(
								"border-radius", "5px");
				$("input:text[id='checkNumber']").css("height", "36").css(
						"border-radius", "5px").css("width", "120");
				//$("tr").css("line-height", "65px");
				$("ul li").css("margin-right", "1em").css("list-style-type",
						"none").css("padding", "0px");
				$("input:text").focus(function() {
					$(this).val("");
				});
				$("input:text").blur(function() {
					if ($(this).val() == "") {
						$(this).val($(this).attr("title"));
					}
				});
				$("#loopimg img").css("width", "450").css("height", "280");
				$("#loopimg img:not([id='imgs001'])").css("display", "none");
				setInterval("startRequest()", 5000);
				$("ul li").click(
						function() {

							if ($(this).val() == 1) {
								$("#putong").css("display", "block").siblings()
										.css("display", "none");
								$(this).addClass("current");
								$(this).siblings().removeClass("current");
							} else if ($(this).val() == 2) {
								$("#shouji").css("display", "block").siblings()
										.css("display", "none");
								$(this).addClass("current");
								$(this).siblings().removeClass("current");
							} else if ($(this).val() == 3) {
								$("#youxiang").css("display", "block")
										.siblings().css("display", "none");
								$(this).addClass("current");
								$(this).siblings().removeClass("current");
							}
						});
			});
	var i = 0;
	function startRequest() {
		i++;
		//alert(i);
		// $("#loopimg img").eq(i-1).fadeOut(); 
		$("#loopimg img").eq(i).css("display", "block").siblings().css(
				"display", "none");
		if (i >= 3) {
			i = 0;
		}
		/* $("img#imgs").fadeOut(); 
		$("img#imgs").attr("src","/wanju_debug_2/img/show00"+i+".jpg");
		$("img#imgs").fadeIn();
		i++;
		if(i==5)
		{
			i=1;
		}
		alert($("img#imgs").attr("src")); */
	}
</script>
<style type="text/css">
#nav,#blank {
	margin: auto;
	width: 999px;
}

#main {
	width: 888px;
	margin: auto;
	background-color: #DC9E9F;
}

#left {
	float: left;
}

#right {
	float: right;
}

#clear {
	clear: both;
}

li {
	float: left;
	list-style-type: none;
	margin-left: 0px;
}

p {
	clear: both;
}

ul {
	
}

div {
	color: white;
}

div #shouji,div #youxiang {
	display: none;
}

#main_outer,#nav,#nav_outer {
	background-color: #DC9E9F;
}

#blank {
	background-color: #D4D1EB;
}

#blank {
	background-color: #D4D1EB;
	height: 600px;
}
</style>
<jsp:include page="../../common/navlogin.jsp"></jsp:include>
</head>

<body>

	<div id="nav_outer">
		<div id="nav"> </div>
	</div>
	<div id="main_outer">
		<div id="main">
			<div id="left" class="center">
				<div id="loopimg">
					<img id="imgs001"
						src="<%=request.getContextPath()%>/img/show001.jpg"> <img
						id="imgs002" src="<%=request.getContextPath()%>/img/show002.jpg">
					<img id="imgs003"
						src="<%=request.getContextPath()%>/img/show003.jpg"> <img
						id="imgs004" src="<%=request.getContextPath()%>/img/show004.jpg">
					<img id="imgs005"
						src="<%=request.getContextPath()%>/img/show005.jpg">
				</div>
			</div>
			<div id="right" class="center">
				<div id="loginmenu">
					<ul id="loginul">
						<li value="1">普通登入</li>
						<li value="2">手機登入</li>
						<li value="3">手機登入</li>
						<p></p>
					</ul>
				</div>
				<div class="menu_navcc">
					<div class="menu_nav clearfix">
						<ul class="nav_content">
							<li value="1" class="current"><a href="#" title="普通登入"><span>普通登入</span></a></li>
							<li value="2"><a href="#" title="手機登入"><span>手機登入</span></a></li>
							<li value="3"><a href="#" title="郵箱登陸"><span>手機登入</span></a></li>
						</ul>
						<div class="menu_nav_right"></div>
					</div>
				</div>
				<div style='clear: both'></div>
				<br>
				<div id="loginframe">
					<div id="putong">
						<form action="">
							<table>
								<tr>
									<td></td>
									<td width="90%"><input type="text" id="name" value="使用者名稱"
										checked="checked" title="使用者名稱"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="password" id="pwd" value="密碼" title="密碼"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="text" id="checkNumber" size="10"
										value="驗證碼" title="驗證碼"><img
										src="<%=request.getContextPath()%>/createcode/code"></img></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td><input type="hidden" id="type" value="putong" /></td>
									<td><input type="submit" id="tijiao" value="提交"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
							</table>
						</form>
					</div>
					<div id="shouji">
						<form action="">
							<table>
								<tr>
									<td></td>
									<td width="90%"><input type="text" id="phone" value="手機號"
										title="手機號"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="password" id="pwd" value="密碼" title="密碼"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="text" id="checkNumber" value="驗證碼"
										title="驗證碼"> <img
										src="<%=request.getContextPath()%>/createcode/code"></img></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td><input type="hidden" id="type" value="shouji" /></td>
									<td><input type="submit" id="tijiao" value="提交"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
							</table>
						</form>
					</div>
					<div id="youxiang">
						<form action="">
							<table>
								<tr>
									<td></td>
									<td width="90%"><input type="text" id="email" value="郵箱"
										title="郵箱"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="password" id="pwd" value="密碼" title="密碼"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="text" id="checkNumber" value="驗證碼"
										title="驗證碼"> <img
										src="<%=request.getContextPath()%>/createcode/code"></img></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td><input type="hidden" id="type" value="youxiang" /></td>
									<td><input type="submit" id="tijiao" value="提交"></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td></td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
			<div id="clear"></div>
		</div>
	</div>
	<div id="blank"></div>


</body>

</html>




相關文章