简单的html登录注册页面

先上预览图

login页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><link rel="stylesheet" type="text/css" href="change.css" /><script src="change.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">登录</div><div>注册</div></div><div class="content"><div style="display: block;"><p>账号</p><input type="text" placeholder="username" /><p>密码</p><input type="password" placeholder="password"/><br/><input type="submit" value="登录"/></div></div>
</div>
</body>
</html>

register页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>register</title><link rel="stylesheet" type="text/css" href="change.css" /><script src="change.js"></script>
</head>
<body>
<div class="control"><div class="item"><div>登录</div><div class="active">注册</div></div><div class="content"><div style="display: block;"><p>用户名</p><input type="text" placeholder="username" /><p>密码</p><input type="password" placeholder="password"/><p>邮箱</p><input type="text" placeholder="email" /><br/><input type="submit" value="登录"/></div></div>
</div>
</body>
</html>

CSS代码

*{margin: 0;padding: 0;
}
body{background: #f3f3f3;
}
.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;
}
.item{width: 340px;height: 60px;background: #eeeeee;
}
.item div{width: 170px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;
}
.content{width: 100%;
}
.content div{margin: 20px 30px;display: none;text-align: left;
}
p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;
}
.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: #00dd60;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;
}
.active{background: white;
}
.item div:hover{background: #f6f6f6;
}

js代码

window.onload = function (){var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for (let i=0;i<it.length;i++){it[i].onclick = function(){// for(let j=0;j<it.length;j++){//     it[j].className = '';//     con[j].style.display = 'none'// }// this.className = "active";// it[i].index=i;// con[i].style.display = "block";switch (i){case 0:window.location.href='login.html';break;case 1:window.location.href='register.html';break;default:break;}}}
}window.onload = function (){var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for (let i=0;i<it.length;i++){it[i].onclick = function(){// for(let j=0;j<it.length;j++){//     it[j].className = '';//     con[j].style.display = 'none'// }// this.className = "active";// it[i].index=i;// con[i].style.display = "block";switch (i){case 0:window.location.href='login.html';break;case 1:window.location.href='register.html';break;default:break;}}}
}

简单的html登录注册页面相关推荐

简单的网页登录注册页面
在开发前端的时候我们会使用到网页的登陆注册,加入验证码的效果,代码如下: 其运行结果如下:
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...
【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
做登录/注册页面需考虑哪些问题？
[文章摘要]现在人手一部手机的前提下,手机号登录/注册的方式无疑是最简单直接的方式.而且现在很多其他注册方式,到后面还是会引导用户去绑定手机. 这几天在做登录/注册页面.做之前看了很多其他公司的登录/ ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...

简单的html登录注册页面

简单的html登录注册页面相关推荐

最新文章

热门文章