今天做了一个小小项目,一个个人相册展示网页,我会把代码和效果图粘上。
login.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>Document</title>
<link rel="stylesheet" href="login.css">
<script src="login.js"></script>
</head>
<body>
<div class="box">
<div class="f1">
<table class="tb">
<tr><th style="font-size: 23px;">立即登录</th></tr>
<tr></tr>
<tr><td>邮箱</td></tr>
<tr><td><input type="email" name="email" id="em" class="in"></td></tr>
<tr><td>密码</td></tr>
<tr><td><input type="password" name="key" id="pw" class="in" placeholder="密码长度至少为6位"></td></tr>
<tr><td><u>忘记密码?</u></td></tr>
<tr><td><button id="bu1" class="bu" onclick="dl()">登录</button> <button id="bu2" class="bu" onclick="window.location = 'register.html'">注册</button></td></tr>
</table>
</div>
</div>
</body>
</html>
login.css部分代码:
body{
background-image: url("login.png");
background-size:cover;
background-repeat:no-repeat;
}
.f1{
width: 465px;
height: 465px;
position: relative;
top: 80px;
left: 30%;
background-color: rgb(243, 240, 240);
border-radius: 50%;
opacity: 0.6;
}
.tb{
width: 250px;
height: 250px;
position: relative;
left: 23%;
top: 25%;
text-align: center;
}
.in{
text-align: center;
font-size: 16px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid;
border-bottom-width: 1.99px;
background-color: rgb(243, 240, 240);
opacity: 0.6;
}
.bu{
width: 80px;
height: 26px;
background-color: rgb(231, 115, 33);
font-size: 15px;
color: ivory;
}
login.js部分代码:
function dl(){
var email = document.getElementById("em").value;
// var phone = document.getElementById("phone").value;
var password = document.getElementById("pw").value;
// var password2 = document.getElementById("password2").value;
// var yz = document.getElementById("in2").value;
if(!/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a