华丽的前台登陆页面

最新推荐文章于 2023-06-16 22:15:00 发布
yipanbo
最新推荐文章于 2023-06-16 22:15:00 发布
阅读量3.2k
点赞数
分类专栏： web
web 专栏收录该内容
10 篇文章 0 订阅
订阅专栏
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>系统登录</title>
<style type="text/css">
html{overflow-y:scroll;vertical-align:baseline;}
body{font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;font-size:12px;color:#fff;line-height:1;background:#999}
*{margin:0;padding:0}
ul,li{list-style:none}
h1{font-size:30px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.login-box{width:410px;margin:120px auto 0 auto;text-align:center;padding:30px;background:url(../images/mask.png);border-radius:10px;}
.login-box .name,.login-box .password,.login-box .code,.login-box .remember{font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.login-box .remember input{box-shadow:none;width:15px;height:15px;margin-top:25px}
.login-box .remember{padding-left:40px}
.login-box .remember label{display:inline-block;height:42px;width:70px;line-height:34px;text-align:left}
.login-box label{display:inline-block;width:100px;text-align:right;vertical-align:middle}
.login-box #code{width:120px}
.login-box .codeImg{float:right;margin-top:26px;}
.login-box img{width:148px;height:42px;border:none}
input[type=text],input[type=password]{width:270px;height:42px;margin-top:25px;padding:0px 15px;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;letter-spacing:2px;font-size:16px;background:transparent;}
button{cursor:pointer;width:100%;height:44px;padding:0;background:#ef4300;border:1px solid #ff730e;border-radius:6px;font-weight:700;color:#fff;font-size:24px;letter-spacing:15px;text-shadow:0 1px 2px rgba(0,0,0,.1)}
input:focus{outline:none;box-shadow:0 2px 3px 0 rgba(0,0,0,.1) inset,0 2px 7px 0 rgba(0,0,0,.2)}
button:hover{box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2)}
.screenbg{position:fixed;bottom:0;left:0;z-index:-999;overflow:hidden;width:100%;height:100%;min-height:100%;}
.screenbg ul li{display:block;list-style:none;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:-1000;float:right;}
.screenbg ul a{left:0;top:0;width:100%;height:100%;display:inline-block;margin:0;padding:0;cursor:default;}
.screenbg a img{vertical-align:middle;display:inline;border:none;display:block;list-style:none;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:-1000;float:right;}
.bottom{margin:8px auto 0 auto;width:100%;position:fixed;text-align:center;bottom:0;left:0;overflow:hidden;padding-bottom:8px;color:#ccc;word-spacing:3px;zoom:1;}
.bottom a{color:#FFF;text-decoration:none;}
.bottom a:hover{text-decoration:underline;}
</style>
	<script src="../jquery/jquery-2.1.3.js" type="text/javascript"></script>

		<script type="text/javascript">
		$(function() {
			$(".screenbg ul li").each(function() {
				$(this).css("opacity", "0");
			});
			$(".screenbg ul li:first").css("opacity", "1");
			var index = 0;
			var t;
			var li = $(".screenbg ul li");
			var number = li.size();
			function change(index) {
				li.css("visibility", "visible");
				li.eq(index).siblings().animate({
					opacity : 0
				}, 3000);
				li.eq(index).animate({
					opacity : 1
				}, 3000);
			}
			function show() {
				index = index + 1;
				if (index <= number - 1) {
					change(index);
				} else {
					index = 0;
					change(index);
				}
			}
			t = setInterval(show, 8000);
			//根据窗口宽度生成图片宽度
			var width = $(window).width();
			$(".screenbg ul img").css("width", width + "px");
		});
	</script>
</head>
<body>
	<div class="login-box">
		<h1>恒纯果汁机后台管理系统</h1>
		<form action="" method="post">
			<div class="name">
			<label>管理员账号：</label>
			<input id="" type="text" autocomplete="off" tabindex="1" name="">
			</div>
			
			<div class="password">
			<label>密 码：</label>
			<input id="" type="password" tabindex="2" maxlength="16" name="">
			</div>
			
			<div class="code">
			<label>验证码：</label>
			<input id="code" type="text" tabindex="3" maxlength="4" name="">
			<div class="codeImg">
			<img src="">
			</div>
			</div>
			
			<div class="remember">
			<input id="remember" type="checkbox" tabindex="4">
			<label for="remember">记住密码</label>
			</div>
			
			<div class="login">
			<button tabindex="5" type="submit">登录</button>
			</div>
		</form>
	</div>

	<div class="bottom">
		©2014 Leting
		<a target="_blank" href="javascript:;">关于</a>
		<span>京ICP证030173号</span>
		<img width="13" height="16" src="">
	</div>
	
	<div class="screenbg">
		<ul>
			<li style="opacity: 0.0238287; visibility: visible;">
			<a href="javascript:;">
			<img src="../images/0.jpg" style="width: 1348px;">
			</a>
			</li>
			
			<li style="opacity: 0; visibility: visible;">
			<a href="javascript:;">
			<img src="../images/1.jpg" style="width: 1348px;">
			</a>
			</li>
			
			<li style="opacity: 0.976171; visibility: visible;">
			<a href="javascript:;">
			<img src="../images/2.jpg" style="width: 1348px;">
			</a>
			</li>
		</ul>
	</div>
</body>
</html>