index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
<style>
body {
width: 1000px;
margin: 0 auto;
}
#header{
width: 1000px;
height: 60px;
background: #CCC;
}
* {
padding: 0;
margin: 0;
}
h1 {
width: 200px;
float: left;
line-height: 60px;
height: 60px;
color: green;
font-size: 36px;
margin-left: 20px;
}
h3 {
float: left;
height: 60px;
line-height: 60px;
vertical-align: middle;
text-align: center;
font-size: 16px;
font-family: "微软雅黑";
margin-left: 510px;
}
.content {
width: 100%;
overflow: hidden;
}
.content img {
width: 100%;
border-radius: 10px;
}
#login{
display: inline-block;
height: 60px;
width: 80px;
border-radius: 10px;
background-color: #C0C0C0;
line-height: 60px;
margin-left: 65px;
}
#login a{
text-decoration: none;
font-size: 16px;
margin-left: 5px;
color: black;
}
#login a:hover{
color: gold;
}
</style>
</head>
<body>
<div id="header">
<h1>在线教育</h1>
<h3>XXX,欢迎您</h3>
<div id="login">
<a href="login.html">登录/注册</a>
</div>
</div>
<div class="content">
<img src="images/index.png" alt="" />
</div>
<script src="js/script.js">
window.onload = function()
var userInfo = JSON.parse(localstorage.getItem("userInfo"));
if(userInfo) {
document.getElementById("welcome").innerHTML =
userInfo.username + “，欢迎您！”；
};
</script>
</body>
</html>
</html>
login
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="formContainer" class="dwo">
<div class="formLeft">
<img src="images/avatar.png" />
</div>
<div class="formRight">
<form id="login">
<header>
<h1>欢迎回来</h1>
<p>请先登录</p>
</header>
<section>
<label>
<p>用户名</p>
<input type="text" id="userName"/>
<div class="border"></div>
</label>
<label>
<p>密码</p>
<input type="password" id="pwd" />
<div class="border"></div>
</label>
<button type="button" id="loginButton">登 录</button>
</section>
<footer>
<a href="#">忘记密码</a>
<a href="register.html" id="registerBtn">注册新用户</a>
</footer>
</form>
</div>
</div>
<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
register
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录注册忘记密码页面</title>
<link rel="stylesheet" href="css/normalize min.css" />
<link rel="stylesheet" href="css/register.css" />
</head>
<body>
<div id="formContainer" class="dwo">
</div>
<div class- "formLeft">
<img src- "images/avatar.png" />
<div class="formRight">
<form id="register" class="otherform">
<header>
<h1>用户注册</h1>
<p>注册后享受更多服务</p>
</header>
<section>
<label>
<p>用户名</p>
<input type="text" id="serName" />
<div class="border"></div>
</label>
<label>
<p>邮箱</p>
<input type-"email" id="email" />
<div class="border"></div>
</label>
<label>
<p>密码</p>
<input type="password" id="pwd" /> <div class="border"></div>
</label>
<label>
<p>重复密码</p>
<input type="password" id="repwd" />
<div class="border"></div>
</label>
<button id="btn" type="button">注册</button>
</section>
<footer>
<a href="login.html">返回</a>
</footer>
</form>
</div>
</div>
</body>
<script src="js/register.js" type="text/javascript" charset="utf-8"></script>
</html>
2709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
