1.注册页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>用户登录界面</title>
<base target="_blank" />
<style>
* {
padding: 0px;
margin: 0px;
}
a {
color: #FFF;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: blueviolet;
font-size: 13px;
}
img {
border: 0;
}
.lg {
width: 468px;
height: 468px;
margin: 100px auto;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png) no-repeat;
}
.lg_top {
height: 200px;
width: 468px;
}
.lg_main {
width: 400px;
height: 180px;
margin: 0 25px;
}
.lg_m_1 {
width: 290px;
height: 100px;
padding: 60px 55px 20px 55px;
}
.ur {
height: 37px;
border: 2;
color: #666;
width: 236px;
margin: 4px 28px;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/user.png) no-repeat;
padding-left: 10px;
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
.pw {
height: 37px;
border: 2;
color: #666;
width: 236px;
margin: 4px 28px;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
padding-left: 10px;
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
.bn {
width: 336px;
height: 50px;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
border: 2;
display: block;
font-size: 18px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
}
.lg_foot {
height: 80px;
width: 330px;
padding: 100px 20px 0 68px;
}
h1 {
text-align: center;
color: #FFF;
font-size: 60px;
}
</style>
</head>
<body class="b">
<div class="lg">
<h1>Register</h1>
<form action="#" method="POST">
<div class="lg_top"></div>
<div class="lg_main">
<div class="lg_m_1">
<input name="username" placeholder="请输入用户名" class="ur" />
<input name="password" type="password" placeholder="请输入密码" class="pw" />
<input name="password" type="password" placeholder="确认密码" class="pw" />
</div>
</div>
<div class="lg_foot">
<input type="button" value="注册" onclick="registered()" class="bn" /></div>
</form>
</div>
<div style="text-align:center;">
</div>
<script>
function registered() {
window.open("registered.html");
}
</script>
</body>
</html>
2.注册成功:
<!DOCTYPE html>
<html>
<head>
<title>登录成功</title>
</head>
<style>
body {
background-color: blueviolet;
}
h1 {
text-align: center;
font-size: 60px;
color: aliceblue;
}
h2 {
text-align: center;
font-size: 40px;
color: aliceblue;
}
input {
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
height: 50px;
width: 300px;
font-size: 35px;
color: aliceblue;
}
.bu {
padding: 50px 168px 0 618px;
}
</style>
<body>
<h1>注册成功</h1>
<h2>欢迎注册糊涂TV</h2>
<div class="bu">
<input type="button" value="点击进入登录界面" onclick="enter()"></input>
</div>
<script>
function enter() {
window.open("enter.html");
}
</script>
</body>
</html>
3.登录页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>用户登录界面</title>
<base target="_blank" />
<style>
* {
padding: 0px;
margin: 0px;
}
a {
color: #FFF;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: blueviolet;
font-size: 13px;
}
img {
border: 0;
}
.lg {
width: 468px;
height: 468px;
margin: 100px auto;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png) no-repeat;
}
.lg_top {
height: 200px;
width: 468px;
}
.lg_main {
width: 400px;
height: 180px;
margin: 0 25px;
}
.lg_m_1 {
width: 290px;
height: 100px;
padding: 60px 55px 20px 55px;
}
.ur {
height: 37px;
border: 2;
color: #666;
width: 236px;
margin: 4px 28px;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/user.png) no-repeat;
padding-left: 10px;
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
.pw {
height: 37px;
border: 2;
color: #666;
width: 236px;
margin: 4px 28px;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
padding-left: 10px;
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
.bn {
width: 336px;
height: 50px;
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
border: 2;
display: block;
font-size: 18px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
}
.lg_foot {
height: 80px;
width: 330px;
padding: 6px 68px 0 68px;
}
h1 {
text-align: center;
color: #FFF;
font-size: 60px;
}
</style>
</head>
<body class="b">
<div class="lg">
<h1>Login</h1>
<form action="#" method="POST">
<div class="lg_top"></div>
<div class="lg_main">
<div class="lg_m_1">
<input name="username" placeholder="user" class="ur" />
<input name="password" type="password" placeholder="wjl" class="pw" />
</div>
</div>
<div class="lg_foot">
<input type="button" value="登录" onclick="entered()" class="bn" /></div>
</form>
</div>
<div style="text-align:center;">
</div>
<script>
function entered() {
window.open("entered.html");
}
</script>
</body>
</html>
4.登录成功
<!DOCTYPE html>
<html>
<head>
<title>登录成功</title>
</head>
<style>
body {
background-color: blueviolet;
}
h1 {
text-align: center;
font-size: 60px;
color: aliceblue;
}
h2 {
text-align: center;
font-size: 40px;
color: aliceblue;
}
input {
background: url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
height: 50px;
width: 200px;
font-size: 35px;
color: aliceblue;
}
.bu {
padding: 50px 168px 0 648px;
}
</style>
<body>
<h1>登录成功</h1>
<h2>欢迎登录糊涂TV</h2>
<div class="bu">
<input type="button" value="点击进主页" onclick="video1()"></input>
</div>
<script>
function video1() {
window.open("video1.html");
}
</script>
</body>
</html>
其中利用了button中的onclick属性进行点击发生事件响应:
例:
<input type="button" value="点击进主页" onclick="video1()">
利用JavaScript函数进行响应:
<script>
function video1() {
window.open("video1.html");
}
</script>