该相册制作分为登录、注册和主页面(由于后端没有实现，登录注册只有一些简单的判断），代码如下
（1）登录界面的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="xc.css"> <script type="text/javascript" src="dl.js"></script></head><body><div class="bg"><div class="bg2"><div class="tp"></div></div><div class="wzbg"><h1 style="margin-left: 150px;">立即登录</h1><p class="wz">用户名</p><input class="srk" type="text" id="name"><p class="wz">邮箱</p><input class="srk" type="text" id="email"><p class="wz">密码 <span> <a href="zc.html" style="font-size: 15px;">忘记密码？</a></span></p><input class="srk" type="password" id="pw" placeholder="密码长度至少为六位"><br><br><br><div><button class="button" type="button" onclick="dL()">登陆</button> <button class="button" onclick="window.location.href='zc.html'">注册</button></div></div></div></body></html>
（2）注册界面的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="xc.css"> <script type="text/javascript" src="zc.js"></script></head><body><div class="zcbg"><div class="bg3"><div class="tp1"></div></div><div class="wzbg"><h1 style="margin-left: 150px;">立即注册</h1><p class="wz1">邮箱</p><input class="srk1" type="text" id="email_1"><p class="wz1">用户名</p><input class="srk1" type="text" id="name_1"><p class="wz1">性别</p><input type="radio" style="margin-left: 180px;" >男<input type="radio" >女<p class="wz1">头像 </p><input class="srk1" type="file" id="tx"><p class="wz1">密码 </p><input class="srk1" type="text" id="pw_1" placeholder="密码长度至少为六位，且为数字和字母的组合"><p class="wz1">确认密码</p><input class="srk1" type="text" id="pw_2" placeholder="两次密码须一致"><br><br><br><div><button class="button1" type="button" onclick="zC()">注册</button></div></div><div class="wzbg1"><h1> 已有账号？</h1><p>有账号就登陆吧，好久不见了！</p></div><div class="wzbg2"><button class="button2" onclick="window.location.href='dl.html'">登录</button></div></div></body></html>
（3）主页的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="xc.css"> </head><body><div class="xcbg"><div class="div11"><p class="font">欢迎王佳媛登录！</p><span class="font1">个人信息 <span onclick="window.location.href='dl.html'">退出</span></span></div><div class="xctp"><img src="8 (1).jpg" alt="" /><img src="8 (2).jpg" alt="" /><img src="8 (3).jpg" alt="" /><img src="8 (4).jpg" alt="" /><img src="8 (5).jpg" alt="" /><img src="8 (6).jpg" alt="" /></div><audio src="Martin Ermen - River Flows In You.mp3" autoplay="autoplay" loop="loop"></audio></div></body></html>
（4）登录的js文件
function dL(){// var Name1="Null";var Name = document.getElementById("name").value;// var Name1 = document.getElementById("name1").value;var email = document.getElementById("email").value;var pw = document.getElementById("pw").value;if(Name!="王佳媛"){alert("用户名错误，请重新输入或注册！");}else if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)){alert("邮箱格式不正确！");}else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(pw)){alert("密码错误！")}else {alert("登录成功！");window.location.href="xc.html"}}
（5）注册的js文件
function zC(){var Name1 = (document.getElementById("name_1").value.length);var email1 = document.getElementById("email_1").value;var pw1 = document.getElementById("pw_1").value;var pw2 = document.getElementById("pw_2").value;if(Name1>5){alert("用户名过长，应不大于五位！");}else if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email1)){alert("邮箱格式不正确！");}else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(pw1)){alert("密码格式错误，请重新输入！")}else if(pw1!=pw2){alert("两次输入的密码不一致，请重新输入！");}else{alert("注册成功，请返回登录页面进行登录！");window.location.href="dl.html"}}
（6）css文件
.bg{background-image: url(1.jpg);background-size: auto;height: 880px;}.zcbg{background-image: url(2.jpg);background-size: auto;height: 880px;}.xcbg{background-image: url(4.jpg);background-size: auto;height: 880px;}.bg2{background-color: rgb(243, 215, 215);width:1400px;height: 680px;position: relative;top: 100px;left:220px;border-radius: 100px;opacity: 0.8;}.bg3{background-color: rgb(246, 253, 206);width:1400px;height: 750px;position: relative;top: 100px;left:220px;border-radius: 100px;opacity: 0.8;}.tp{background-image: url(6.jpg);width:450px;height: 500px;position: relative;top: 100px;left:100px;border-radius: 100px;}.tp1{background-image: url(7.jpg);width:450px;height: 700px;position: relative;top: 30px;left:100px;border-radius: 100px;}.wzbg{height: 500px;width: 600px;position: absolute;top:180px;left: 1000px;}.wzbg1{height: 500px;width: 500px;position: absolute;top:180px;left: 450px;color: white;}.wzbg2{height: 100px;width: 500px;position: absolute;top:680px;left: 450px;}.wz{font-size: 20px;margin-left: 200px;color: rgb(88, 88, 88);}.wz1{font-size: 15px;margin-left: 200px;color: rgb(88, 88, 88);}.srk{background-color: rgb(185, 198, 255);border-radius: 15px;height: 50px;width: 400px;margin-left: 20px;border: 1px rgb(193, 193, 255) ;box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)}.srk1{background-color: rgb(185, 255, 200);border-radius: 10px;height: 30px;width: 400px;margin-left: 20px;border: solid 1px rgb(215, 255, 215);box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)}input[type='text']{text-align:center;}.button{height: 40px;width:175px;background-color: rgb(147, 189, 190);border-radius: 15px;margin-left: 23px;border: solid 1px rgb(193, 193, 255) ;box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)}.button1{height: 40px;width:300px;background-color: rgb(179, 209, 255);border-radius: 15px;margin-left: 80px;border: solid 1px rgb(250, 250, 250) ;box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)}.button2{height: 40px;width:200px;background-color: transparent;border-radius: 15px;margin-left: 0px;border: solid 2px rgb(250, 250, 250) ;color: white;font-size: 20px;box-shadow:4px 5px 6px 7px rgba(0,0,0,.5)}.div11{height: 50px;width: auto;background-color: rgb(78, 78, 78);color:white;}.font{float: left;position: relative;top:2px;left: 20px;}.font1{float: left;position: relative;top:20px;left: 1550px;}img{width:320px;height:480px;}.xctp{width:420px;height:580px;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;transform-style: preserve-3d;transition: all 12s;}.xctp img{position: absolute;}.xctp img:nth-child(1){transform: translateZ(500px);}.xctp img:nth-child(2){transform: rotateY(60deg) translateZ(500px) ;}.xctp img:nth-child(3){transform: rotateY(120deg) translateZ(500px) ;}.xctp img:nth-child(4){transform: rotateY(180deg) translateZ(500px) ;}.xctp img:nth-child(5){transform: rotateY(240deg) translateZ(500px) ;}.xctp img:nth-child(6){transform: rotateY(300deg) translateZ(500px) ;}.xctp:hover{transform: rotateY(720deg) rotateX(45deg);}
