目录
题目
html代码
index
login
register
css代码
base
index
login
register
效果展示
index
login
register
题目
实现一个登录页面、实现一个注册页面；实现一个主页
- 登录页面：`login.html`
- 注册页面：`register.html`
- 主页：`index.html`
要求如下：
- 主页中，可以点击 **注册**或者**登录**能直接在新窗口跳转到对应的页面
- 登录页面中，输入账号、密码可以点击登录-自动跳转到主页
- 注册页面中，输入账号、密码、确认密码、昵称，点击注册，注册后自动跳转到登录页面
html代码
index
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="container"><h3>有位大能注意到了你，并向你发出邀请</h3><div class="nav"><div class="login"><ul><li><a href="./login.html">进入宗门</a><a href="./login.html" target="_blank">好好修炼</a></li></ul></div><div class="register"><ul><li><a href="./register.html">加入宗门</a><a href="./register.html" target="_blank">老祖的青睐</a></li></ul></div></div></div>
</body>
</html>login
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/login.css">
</head>
<body><div class="container"><div class="body"><h3>请核实身份</h3><p><span>身份：</span><input type="text" id="account" placeholder="此处填写账号"></p><p><span>密码：</span><input type="password" id="passwd" placeholder="此处填写密码"></p></div><div class="nav"><div class="index"><ul><li><a href="./index.html">完成核实</a><a href="./index.html">老祖的认可</a></li></ul></div></div></div>
</body>
</html>register
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>register</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/register.css">
</head>
<body><div class="container"><div class="body"><h3>请登记身份</h3><form action=""><p><span>身份：</span><input type="text" id="account" placeholder="此处填写账号"></p><p><span>密码：</span><input type="password" id="passwd" placeholder="此处填写账号密码"></p><p><span>确认密码：</span><input type="password" id="confirm_password" placeholder="确认密码"></p><p><span>仙号：</span><input type="text" id="name" placeholder="此处填写昵称"></p><p class="reset"><span></span><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></p></form></div><div class="nav"><div class="login"><ul><li><a href="./login.html">完成登记</a><a href="./login.html">前往核实</a></li></ul></div></div></div>
</body>
</html>css代码
base
* {padding: 0;margin: 0;box-sizing: border-box;list-style: none;
}@font-face {font-family: ziti1;src: url(../font/字魂剑气手书.ttf);
}@font-face {font-family: ziti2;src: url(../font/MD.ttf);
}body {background-color: #f5f5f5;
}.container{/* border: 1px red solid; */margin: 20px auto;width: 1200px;height: 600px;
}.nav {/* border: 1px blue solid; */margin: 20px auto;width: 1200px;height: 400px;display: flex;
}ul {display: flex;
}/* 导航 */
li {/* border: 1px black solid; *//* 对li与a定位 */position: relative;width: 200px;height: 200px;line-height: 200px;/* 3d实现 *//* transform: rotateX(-20deg) rotateY(30deg);transform: scale3d(1,1.1,1.1); */transform-style: preserve-3d;transition: all 0.5s;
}li:hover {transform: rotateX(-90deg);
}a {text-decoration: none;/* 定位 */position: absolute;display: block;width: 200px;height: 200px;border-radius: 8%;font-family: ziti1;font-size: 20px;text-align: center;
}/*每个面都有独立的轴，互不影响 */
a:first-child {background-color: white;color: black;transform: translateZ(103px);
}a:last-child {background-color: black;color: white;/* 调整旋转度数和a的轴距离 */transform: rotateX(90deg) translateZ(103px);
}index
.login {/* border: 1px rebeccapurple solid; */width: 300px;height: 100px;margin-top: 300px;margin-left: 300px;display: block;
}.register {/* border: 1px black solid; */width: 300px;height: 100px;margin: 300px 0px 0px 200px;display: block;
}h3 {font-size: 60px;text-align: center;padding-top: 50px;font-family: ziti2;color: rgb(215, 190, 160);
}.container {background-image: url(../imges/下载4.jpg);background-repeat: no-repeat;background-size: cover;
}li {margin-top: 20px;width: 300px;height: 100px;line-height: 100px;
}a {width: 300px;height: 100px;
}a:first-child {background-color: brown;transform: translateZ(50px);
}a:last-child {background-color: rgb(215, 190, 160);transform: rotateX(90deg) translateZ(50px);
}login
.body {/* border: 1px black solid; */margin: 0 auto;width: 600px;height: 300px;margin-top: 30px;font-family: '楷体';
}h3 {font-family: ziti2;font-size: 40px;color: aquamarine;text-align: center;margin: 16px 0;
}p {height: 80px; margin-top: 30px;
}span {display: inline-block;text-align: right;width: 85px;margin-left: 100px;margin-right: 20px;font-size: 25px;
}input {height: 50px;color: #d9e2eb;vertical-align: middle;resize: none;border-radius: 5px;
}.index {width: 500px;height: 200px;margin: 0 auto;
}li {margin-top: 20px;width: 500px;height: 100px;line-height: 100px;
}a {width: 500px;height: 100px;
}a:first-child {transform: translateZ(50px);
}a:last-child {background-color: #ace7fa;transform:rotateX(90deg) translateZ(50px);
}.container {background-image: url(../imges/下载2.jpg);background-repeat: no-repeat;background-size: cover;
}register
.body {/* border: 1px black solid; */width: 800px;height: 400px;margin: 0 auto;
}form {width: 60%;height: 300px;font-family: "楷体";font-weight: bold;margin: 20px auto;border-radius: 15%;
}h3 {font-family: ziti2;font-size: 40px;text-align: center;margin: 16px 0;
}p {height: 50px; margin-top: 16px;
}span {display: inline-block;text-align: right;width: 100px;margin-left: 20px;margin-right: 20px;font-size: 20px;
}input {height: 30px;color: #d9e2eb;vertical-align: middle;resize: none;border-radius: 5px;
}.reset {height: 28px;
}.btn {width: 100px;height: 28px;border-radius: 5px;color: black;
}.login {width: 500px;height: 200px;margin: 0 auto;
}li {margin-top: 20px;width: 500px;height: 100px;line-height: 100px;
}a {width: 500px;height: 100px;
}a:first-child {transform: translateZ(50px);
}a:last-child {transform:rotateX(90deg) translateZ(50px);
}.container {background-image: url(../imges/下载.jpg);background-repeat: no-repeat;background-size: cover;
}效果展示
index
login
register
