Web(前端开发）结合html、css、js写一个简单的相册

该相册制作分为登录、注册和主页面(由于后端没有实现，登录注册只有一些简单的判断），代码如下

（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>&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;已有账号？</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">个人信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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);
}

Web(前端开发）结合html、css、js写一个简单的相册相关推荐

Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
什么是Web技术? 答:Web即全球广域网(World Wide Web),也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.它是建立在Internet上 ...
Web前端开发北京林业大学 CSS样式-单元作业
Web前端开发北京林业大学通关攻略 Web前端开发客观题编程题概论单元测试1 HTML基础单元测试2 单元作业1 CSS样式单元测试3 单元作业2 CSS布局与定位单元测试4 单元作 ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
web前端开发新技术，CSS介绍
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...
前端开发基础 HTML+CSS+JS
文章目录 HTML介绍 CSS介绍 JavaScript介绍 HTML.CSS和JavaScript之间的关系 HTML使用基本结构常用标签 CSS使用使用方法常用属性盒子模型选择器默认 ...

Web(前端开发）结合html、css、js写一个简单的相册

Web(前端开发）结合html、css、js写一个简单的相册相关推荐

最新文章

热门文章