废话不多说直接为大家附上代码
登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BLIZZARD</title>
<link rel="stylesheet" href="BLIZZARD.css">
<script src="BLIZZARD.js" type="text/javascript"></script>
</head>
<body class="mainbg">
<div class="login">
<div class="username"><input id="username" class="ipusername" type="text" placeholder="电子邮箱或手机号码" onchange="username()"></div>
<br>
<div class="password"><input id="password" class="ippassword"type="password" placeholder="密码" onchange="password()"></div>
<br>
<div class="btn">
<form>
<button id="login" class="btnlogin" type="button" onclick="login_album()">登录</button>
</form>
</div>
<div class="xian">——————————————————————————</div>
<div class="register" id="register" onclick="register()">免费创建战网通行证</div>
</div>
</body>
</html>
注册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>免费创建战网通行证</title>
<link rel="stylesheet" href="BLIZZARD.css">
<script src="Register.js" type="text/javascript"></script>
</head>
<body class="mainreg">
<div class="maindiv">
<div class="login_div">
<div class="reg_username"><input class="reg_ipusername" id="username" type="text" placeholder="用户名(电子邮箱或手机号码)" onchange="username()"></div>
<div class="reg_name"><input class="reg_ipname" id="name" type="text" placeholder="战网昵称" onchange="namechange()"></div>
<div class="reg_password"><input class="reg_ippassword" id="password" type="password" placeholder="密码(长度至少为6位,且为数字和字母的组合)" onchange="password()"></div>
<div class="reg_scpassword"><input class="reg_ipscpassword" id="scpassword" type="password" placeholder="两次密码必须一致" onchange="scpassworld()"></div>
<div class="reg_headpic"><input class="reg_btnheadpic" id="reg_btnheadpic" type="file"><div class="reg_headpic_message">战网头像</div></div>
<div class="message_sex">性别</div>
<div class="reg_sex"><div class="reg_sex_male">男<input class="reg_ipsex_male" id="sex_male" type="radio" name="sex" value="male"></div><div class="reg_sex_female">女<input class="reg_ipsex_female" id="sex_female" type="radio" name="sex" value="female"></div></div>
<button class="reg_btn" id="reg_btn" onclick="reg_btn()">注   册</button>
</div>
<div class="reged_div">
<div class="reged_text">已有账号?</div>
<div class="reged_message_text">有账号就登录吧!好久不见了!</div>
<button class="reged_login" id="reged_login" onclick="reged_login()">登  录</button>
</div>
</div>
</body>
</html>
个人相册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>album</title>
<link rel="stylesheet" href="BLIZZARD.css">
<script src="BLIZZARD.js"></script>
</head>
<body class="mainalbum">
<div>
<div class="top" id="top">
<div class="container">
<div class="left fl table color">
<table>
<tr>
<td width="80px">
<img src="images/5.jpg" width="77px" height="77px">
</td>
<td width="130px">
<h3>游戏下载</h3>
</td>
<td width="130px">
<h3>游戏商城</h3>
</td>
<td width="130px">
<h3>游戏新闻</h3>
</td>
<td width="130px">
<h3>电子竞技</h3>
</td>
</tr>
</table>
</div>
<div class="right fr">
<div class="ul2 color">
<div>
<div class="div1">个人信息</div>
<div class="div2"><a href="BLIZZARD.html">退出</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div id="photo_box">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
<img src="image/5.jpg">
<img src="image/6.jpg">
<img src="image/7.jpg">
<img src="image/8.jpg">
<img src="image/9.jpg">
<img src="image/10.jpg">
<img src="image/11.jpg">
</div>
</div>
<div id="text1" class="div3">欢迎登录</div>
</div>
<script>
var str = localStorage.getItem("name");
var div1 = document.getElementById("text1");
div1.innerHTML= "欢迎 "+str+" 登录!";
</script>
</body>
</html>
CSS
/* 登录 */
.mainbg{
background: url("images/7.jpeg") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.login{
background-color: rgba(105, 174, 238, 0.486);
width: 500px;
height: 500px;
border-radius: 500px;
margin: 0 auto;
position: relative;
top: 210px;
/* left: 20%; */
/* -webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); */
animation: move 2s ease-in-out 1s alternate;
}
/* input */
.ipusername{
width: 100%;
height: 100%;
color: aliceblue;
border-color: rgba(192, 208, 233, 0.486);
background-color:rgba(0, 0, 0, 0.623) ;
}
.ipusername::-webkit-input-placeholder{
color: rgba(255, 255, 255, 0.781);
}
.ippassword{
width: 100%;
height: 100%;
color: aliceblue;
border-color: rgba(192, 208, 233, 0.486);
background-color:rgba(0, 0, 0, 0.623) ;
}
.ippassword::-webkit-input-placeholder{
color: rgba(255, 255, 255, 0.781);
}
/* div */
.username{
position: absolute;
top: 30%;
left: 25%;
width: 50%;
height: 5%;
}
.password{
position: absolute;
top: 40%;
left: 25%;
width: 50%;
height: 5%;
}
.btn{
position: absolute;
top: 55%;
left: 25%;
width: 100%;
}
.xian{
position: absolute;
top: 65%;
left: 5%;
color: black;
}
.register{
position: absolute;
color: rgb(77, 76, 76);
font-weight: 550;
top: 70%;
left: 36%;
}
.register:hover{
color: rgba(14, 93, 240, 0.781);
}
.find{
position: absolute;
color: rgb(77, 76, 76);
font-weight: 550;
top: 75%;
left: 44%;
}
.find:hover{
color: rgba(41, 109, 235, 0.856);
}
/* 按钮 */
.btnlogin{
top: 50%;
width: 258px;
height: 30px;
color: white;
border-color: rgba(98, 187, 238, 0.479);
background: rgb(32, 108, 170);
}
/* 动画 */
@keyframes move{
0%{
transform: rotatex(0);
}
100%{
transform: rotatey(360deg);
}
}
/* 免费创建战网通行证 */
.mainreg{
/* background-image: linear-gradient(0deg,rgb(3, 21, 43),rgb(7, 49, 97));
background-attachment: fixed; */
background: url("images/7.jpeg") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
/* div */
body {
margin: 0px;
}
.maindiv{
background-color: rgba(105, 174, 238, 0.486);
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
top: 50px;
}
.login_div{
width: 700px;
height: 800px;
}
.reged_div{
position: relative;
background: url("images/10.jpg") no-repeat;
background-size: cover;
left: 700px;
top: -800px;
width: 500px;
height: 800px;
}
.reged_text{
font-size: 28px;
color: blanchedalmond;
position: relative;
top: 50px;
left: 190px;
font-weight: 600;
}
.reged_message_text{
color: blanchedalmond;
position: relative;
top: 100px;
left: 150px;
}
/* .div1{
position: relative;
color: white;
left: 45%;
} */
.reg_username{
position: relative;
left: 25%;
top: 10%;
}
.reg_name{
position: relative;
left: 25%;
top: 15%;
}
.message_sex{
position: relative;
top: 10%;
left: 340px;
color: rgba(255, 255, 255, 0.781);
}
.reg_sex{
position: relative;
left: 42%;
top: 12%;
}
.reg_sex_female{
position: relative;
top: -21px;
left: 95px;
}
.reg_password{
position: relative;
left: 25%;
top: 50%;
}
.reg_scpassword{
position: relative;
left: 25%;
top: 58%;
}
.reg_headpic{
background-color:rgba(0, 0, 0, 0) ;
position: relative;
top: 30%;
left: 25%;
border: none;
border-bottom: 1px solid black;
width: 50%;
height: 30px;
color: rgba(255, 255, 255, 0.781);
}
.reg_headpic_message{
text-align: center;
position: relative;
top: -75px;
left: 5px;
}
/* input */
.reg_ipusername{
background-color:rgba(0, 0, 0, 0) ;
position: relative;
border: none;
border-bottom: 1px solid black;
width: 50%;
height: 30px;
color: aliceblue;
}
.reg_ipusername::-webkit-input-placeholder{
color: rgba(255, 255, 255, 0.781);
font-size: 16px;
text-align: center;
}
.reg_ippassword{
background-color:rgba(0, 0, 0, 0) ;
position: relative;
border: none;
border-bottom: 1px solid black;
width: 50%;
height: 30px;
color: aliceblue;
}
.reg_ippassword::-webkit-input-placeholder{
color: rgba(255, 255, 255, 0.781);
font-size: 16px;
text-align: center;
}
.reg_ipname{
background-color:rgba(0, 0, 0, 0) ;
position: relative;
border: none;
border-bottom: 1px solid black;
width: 50%;
height: 30px;
color: aliceblue;
}
.reg_ipname::-webkit-input-placeholder{
color: rgba(255, 255, 255, 0.781);
font-size: 16px;
text-align: center;
}
.reg_ipscpassword{
background-color:rgba(0, 0, 0, 0) ;
position: relative;
border: none;
border-bottom: 1px solid black;
width: 50%;
height: 30px;
}
.reg_ipscpassword::-webkit-input-placeholder{
color: rgba(255, 255, 255, 0.781);
font-size: 16px;
text-align: center;
}
/* button */
.reged_login{
width: 130px;
height: 40px;
border-radius: 40px;
font-size: 16px;
position: relative;
top: 500px;
left: 180px;
border-color: blanchedalmond;
color: blanchedalmond;
background: rgb(0, 0, 0, 0);
}
.reg_btn{
width: 258px;
height: 50px;
color: white;
font-size: 16px;
border-radius: 50px;
border-color: rgba(98, 187, 238, 0.479);
background: rgb(32, 108, 170);
position: relative;
top: 60%;
left: 31%;
}
.reg_btnheadpic{
width: 200px;
height: 30px;
}
/* 相册界面 */
.mainalbum{
background: url("images/7.jpeg") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
/* 顶部 */
.top{
width:100%;
height: 80px;
min-width: 980px;
background-color: black;
border-bottom-color: blanchedalmond;
}
.top .left{
width: 600px;
height:100%;
/*background-color: brown;*/
}
.top .right{
width:300px;
height:100%;
/*background-color: brown;*/
}
.table{
margin:0px;
padding:0px;
border:0px;
width:600px;
height:80px;
}
.table tr{
height:80px;
}
.table a{
color:#FFFF;
}
.table a:hover{
color:#c5bcaf;
}
.ul2{
height:100%;
width:100px;
position: relative;
top: 29px;
font-size: 20px;
}
.div2{
position: relative;
top: -28px;
left: 200px;
}
.ul2 a{
color:#FFFF;
}
.ul2 a:hover{
color:#c5bcaf;
}
a{
text-decoration: none;
color:#ffff
}
.div3{
position: absolute;
color: aliceblue;
font-size: 20px;
top: 75%;
left: 45%;
}
/*共用部分*/
.container{
width: 100%;
height: 100%;
margin: 0 0;
}
.fl{
float: left;
}
.fr{
float: right;
}
.p{
font-size: 15px;
text-align: center;
}
.p a:hover{
color:#c5bcaf;
}
.color{
color:#FFFF;
}
/* div */
#main{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
#photo_box{
width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: 200px auto;
transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/
transform: rotateX(-5deg) rotateY(0deg);
animation: run 30s linear infinite;/*循环执行run动画,每30秒执行一次*/
}
/*设置图像大小、边框、圆角、位置*/
#photo_box img{
width: 250px;
height: 350px;
border: 5px solid #ccc;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
}
/*依次设置图像盒子中每个图像旋转后位置*/
#photo_box img:nth-child(1){
transform: rotateY(0deg) translateZ(500px);
}
#photo_box img:nth-child(2){
transform: rotateY(36deg) translateZ(500px);
}
#photo_box img:nth-child(3){
transform: rotateY(72deg) translateZ(500px);
}
#photo_box img:nth-child(4){
transform: rotateY(108deg) translateZ(500px);
}
#photo_box img:nth-child(5){
transform: rotateY(144deg) translateZ(500px);
}
#photo_box img:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(7){
transform: rotateY(216deg) translateZ(500px);
}
#photo_box img:nth-child(8){
transform: rotateY(252deg) translateZ(500px);
}
#photo_box img:nth-child(9){
transform: rotateY(288deg) translateZ(500px);
}
#photo_box img:nth-child(10){
transform: rotateY(324deg) translateZ(500px);
}
#photo_box img:nth-child(11){
transform: rotateY(360deg) translateZ(500px);
}
/*采用@keyframes 规则创建run动画。*/
@keyframes run {
0%{transform: rotateX(0deg) rotateY(0deg);
}
25%{transform: rotateX(10deg) rotateY(90deg);
}
50%{transform: rotateX(0deg) rotateY(180deg);
}
75%{transform: rotateX(-10deg) rotateY(270deg);
}
100%{transform: rotateX(0deg) rotateY(360deg);
}
}
登录界面的js
// 登录界面
function login_album(){
var p = document.getElementById("password").value;
var e = document.getElementById("username").value;
var p2=localStorage.getItem("password");
var e2=localStorage.getItem("username");
if(p==p2&&e==e2){
window.location = "album.html";
}else{
alert("账号或密码不正确");
}
}
// 注册
function register(){
window.location = "Register.html";
}
// 数据流动
function username(){
var username = document.getElementById("username").value;
var regemail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
var regtel = /^1[0-9]{10}$/;
if(username == ""){ }
else if(regemail.test(username)!=true&®tel.test(username)!=true){
alert("电子邮箱或手机号码格式不正确");
}
}
function password(){
var password = document.getElementById("password").value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
if(reg.test(password)!=true){
alert("密码格式不正确");
}
}
注册界面的js
// 注册界面
function reged_login(){
window.location = "BLIZZARD.html";
}
function reg_btn(){
var name = document.getElementById("name").value;
var pword = document.getElementById("password").value;
var na = document.getElementById("username").value;
localStorage.setItem("username",na);
localStorage.setItem("password",pword);
localStorage.setItem("name",name);
window.location = "BLIZZARD.html";
}
// 数据流动
function username(){
var username = document.getElementById("username").value;
var regemail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
var regtel = /^1[0-9]{10}$/;
if(regemail.test(username)!=true&®tel.test(username)!=true){
alert("电子邮箱或手机号码格式不正确");
}
}
function namechange(){
var x=document.getElementById("name").value.length;
if(x>5){
alert("姓名格式不正确");
}
}
function password(){
var password = document.getElementById("password").value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
if(reg.test(password)!=true){
alert("密码格式不正确");
}
}
function scpassworld(){
var p1 = document.getElementById("scpassword").value;
var p2 = document.getElementById("password").value;
if(p2!=p1){
alert("两次密码不相同");
}
}
成果展示