石青淘宝推广工具,电商关键字优化,绿色农产品网站,软件开发流程工具目录 题目
html代码
index
login
register
css代码
base
index
login
register
效果展示
index login
register 题目
实现一个登录页面、实现一个注册页面#xff1b;实现一个主页 - 登录页面#xff1a;login.html - 注册页面#xff1a;register.html - 主页…目录 题目
html代码
index
login
register
css代码
base
index
login
register
效果展示
index login
register 题目
实现一个登录页面、实现一个注册页面实现一个主页 - 登录页面login.html - 注册页面register.html - 主页index.html 要求如下 - 主页中可以点击 **注册**或者**登录**能直接在新窗口跳转到对应的页面 - 登录页面中输入账号、密码可以点击登录-自动跳转到主页 - 注册页面中输入账号、密码、确认密码、昵称点击注册注册后自动跳转到登录页面
html代码
index
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleindex/titlelink relstylesheet href./css/base.csslink relstylesheet href./css/index.css
/head
bodydiv classcontainerh3有位大能注意到了你并向你发出邀请/h3div classnavdiv classloginullia href./login.html进入宗门/aa href./login.html target_blank好好修炼/a/li/ul/divdiv classregisterullia href./register.html加入宗门/aa href./register.html target_blank老祖的青睐/a/li/ul/div/div/div
/body
/html
login
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlelogin/titlelink relstylesheet href./css/base.csslink relstylesheet href./css/login.css
/head
bodydiv classcontainerdiv classbodyh3请核实身份/h3pspan身份/spaninput typetext idaccount placeholder此处填写账号/ppspan密码/spaninput typepassword idpasswd placeholder此处填写密码/p/divdiv classnavdiv classindexullia href./index.html完成核实/aa href./index.html老祖的认可/a/li/ul/div/div/div
/body
/html
register
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleregister/titlelink relstylesheet href./css/base.csslink relstylesheet href./css/register.css
/head
bodydiv classcontainerdiv classbodyh3请登记身份/h3form actionpspan身份/spaninput typetext idaccount placeholder此处填写账号/ppspan密码/spaninput typepassword idpasswd placeholder此处填写账号密码/ppspan确认密码/spaninput typepassword idconfirm_password placeholder确认密码/ppspan仙号/spaninput typetext idname placeholder此处填写昵称/pp classresetspan/spaninput typesubmit value提交 classbtninput typereset value重置 classbtn/p/form/divdiv classnavdiv classloginullia href./login.html完成登记/aa 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
