标签：center transform 博客 rotateY 周三 background var border
登录页面效果及其代码（正则表达式）
<!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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。