周三的博客
作者：互联网
登录页面效果及其代码（正则表达式）
<!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>
<style>
body{
text-align: center;
margin: 0;
padding: 0;
}
#bg{
display: flex;
align-items: center;
justify-content: center;
width: 1500px;
height: 800px;
background-image: url(./images/a.jpg);
}
#xbg{
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 400px;
border-radius: 100%;
background-color: rgba(231, 222, 222, 0.3);
}
.inp{
text-align: center;
border: none;
border-bottom:1px solid black;
background-color: transparent;
outline: none;
}
.bt{
border-radius: 12px;
background-color: yellow;
width: 50px;
}
.bt:hover{
background-color: yellowgreen;
}
</style>
</head>
<body>
<center>
<div id="bg">
<div id="xbg">
<div>
<form action="" method="post"></form>
<h2>立即登录</h2><br>
<span>邮箱</span><br>
<input type="text" id="e_m" class="inp"><br>
<span>密码</span><br>
<input type="password" id="password" class="inp" placeholder="密码长度至少为6位"><br><br>
<input type="submit" onclick="get_in()" value="登录" class="bt">
<input type="button" onclick="window.open('sign_up.html')" value="注册" class="bt">
</form>
</div>
</div>
</div>
</center>
</body>
<script>
var u = localStorage.getItem("username")
var p = localStorage.getItem("password")
function get_in(){
var em = document.getElementById("e_m")
var e_mile = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if(!e_mile.test(em.value)) {
alert("邮箱格式不正确")
window.location.reload()
}
else{
var pwd = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){6,19}$/
var mm = document.getElementById("password")
if(!pwd.test(mm.value)) {
alert("密码格式不正确")
window.location.reload()
}
else{
if(em.value==u && mm.value==p){
window.location.href="login.html"
}
else{
alert("邮箱或密码不正确")
window.location.reload()
}
}
}
}
</script>
</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>
<style>
body{
text-align: center;
margin: 0;
padding: 0;
}
#bg{
display: flex;
align-items: center;
justify-content: center;
width: 1000px;
height: 500px;
background-image: url(./images/a.jpg);
}
#xbg{
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.inp{
text-align: center;
border: none;
border-bottom:1px solid black;
background-color: transparent;
outline: none;
}
.bt{
border-radius: 12px;
background-color: yellow;
width: 200px;
}
.bt:hover{
background-color: yellowgreen;
}
#lbg{
width: 400px;
height: 450px;
background-color: rgba(231, 222, 222, 0.3);
}
#rbg{
width: 200px;
height: 450px;
background-image: url(./images/i.jpg);
}
.bt1{
border-radius: 12px;
background-color: rgba(240, 228, 228, 0.3);
width: 100px;
margin-top: 250px;
}
</style>
</head>
<body>
<center>
<div id="bg">
<div id="xbg">
<div id="lbg">
<form action="" method="post"></form>
<h2>立即注册</h2><br>
<span>邮箱</span><br>
<input type="text" id="e_m" class="inp"><br>
<span>用户名</span><br>
<input type="text" id="user_name" class="inp" placeholder="用户名长度不超过5"><br>
<span>性别</span><br>
<input type="radio" name="sex"checked>男<input type="radio" name="sex">女<br>
<span>头像</span><br>
<input type="file" class="inp"><br>
<span>密码</span><br>
<input type="password" id="password" class="inp" placeholder="密码长度至少为6位"><br><br>
<span>再次输入密码</span><br>
<input type="password" id="password1" class="inp" placeholder="与上次一致"><br><br>
<input type="button" onclick="get_up()" value="注册" class="bt">
</form>
</div>
<div id="rbg">
<h2>已有账号？</h2>
<span>有账号就登录吧，好久不见了</span><br>
<input type="button" onclick="window.open('sign_in.html')" value="登录" class="bt1">
</div>
</div>
</div>
</center>
</body>
<script>
function get_up(){
var em = document.getElementById("e_m")
var e_mile = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if(!e_mile.test(em.value)) {
alert("邮箱格式不正确")
window.location.reload()
}
else{
var user_yz = /^\w{1,5}$/
var user = document.getElementById("user_name")
if(!user_yz.test(user.value)) {
alert("用户名不符合")
window.location.reload()
}
else{
var pwd = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){6,19}$/
var mm = document.getElementById("password")
if(!pwd.test(mm.value)) {
alert("密码格式不正确")
window.location.reload()
}
else{
var mm1 = document.getElementById("password1")
if(mm.value!=mm1.value){
alert("两次密码不一致！")
window.location.reload()
}
else{
localStorage.setItem("username",em.value)
localStorage.setItem("password",mm.value)
window.location.href="sign_in.html"
}
}
}
}
}
</script>
</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>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-image: url("./images/k.jpg");
;
}
#photo_box{
width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotateX(-5deg) rotateY(0deg);
animation: run 30s linear infinite;
}
#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(45deg) translateZ(500px);
}
#photo_box img:nth-child(3){
transform: rotateY(90deg) translateZ(500px);
}
#photo_box img:nth-child(4){
transform: rotateY(135deg) translateZ(500px);
}
#photo_box img:nth-child(5){
transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(6){
transform: rotateY(225deg) translateZ(500px);
} #photo_box img:nth-child(7){
transform: rotateY(270deg) translateZ(500px);
}#photo_box img:nth-child(8){
transform: rotateY(315deg) translateZ(500px);
}
@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);
}
}
</style>
</head>
<body>
<div id="photo_box">
<img src="./images/c.jpg">
<img src="./images/t.jpg">
<img src="./images/e.jpg">
<img src="./images/f.jpg">
<img src="./images/z.jpg">
<img src="./images/h.jpg">
<img src="./images/w.jpg">
<img src="./images/m.jpg">
</div>
</body>
<script>
</script>
</html>
标签：center,transform,博客,rotateY,周三,background,var,border 来源： https://blog.csdn.net/m0_56426996/article/details/117767675