实例介绍
【实例简介】登录页模板17素材网要30金币
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系统登录</title>
<link href="login.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></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>XX后台登录</h1>
<form method="post" action="">
<div class="name">
<label>管理员账号：</label>
<input type="text" name="" id="" tabindex="1" autocomplete="off" />
</div>
<div class="password">
<label>密 码：</label>
<input type="password" name="" maxlength="16" id="" tabindex="2" />
</div>
<div class="code">
<label>验证码：</label>
<input type="text" name="" maxlength="4" id="code" tabindex="3" />
<div class="codeImg">
<!--<img src="{:U('index/Verify')}" style="border-radius:8px;" onclick="this.src=this.src '?rand=' Math.random()" />-->
</div>
</div>
<div class="remember">
<input type="checkbox" id="remember" tabindex="4">
<label>记住密码</label>
</div>
<div class="login">
<button type="submit" tabindex="5">登录</button>
</div>
</form>
</div>
<div class="bottom">©2014 Leting <a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span></div>
<div class="screenbg">
<ul>
<li>
<a href="javascript:;"><img src="images/0.jpg"></a>
</li>
<li>
<a href="javascript:;"><img src="images/1.jpg"></a>
</li>
<li>
<a href="javascript:;"><img src="images/2.jpg"></a>
</li>
</ul>
</div>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
网友评论
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)