html实现登录界面

一、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>login</title><style>* {margin: 0;padding: 0;}html {height: 100%;width: 100%;overflow: hidden;margin: 0;padding: 0;background: url(background.png) no-repeat 0px 0px;background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;}body {display: flex;align-items: center;justify-content: center;height: 100%;}#loginDiv {width: 400px;display: flex;justify-content: center;align-items: center;height: 400px;background-color: rgba(75, 81, 95, 0.3);box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);border-radius: 250px;}p {margin-top: 30px;margin-left: 20px;color: azure;}input {margin-left: 15px;border-radius: 5px;border-style: hidden;height: 30px;width: 140px;background-color: rgba(216, 191, 216, 0.5);outline: none;color: #f0edf3;padding-left: 10px;}.button {border-color: cornsilk;background-color: rgba(100, 149, 237, .7);color: aliceblue;border-style: hidden;border-radius: 5px;width: 100px;height: 31px;font-size: 16px;}</style><style type="text/css">input::-ms-input-placeholder{text-align: center;}input::-webkit-input-placeholder{text-align: center;}</style>
</head><body><div id="loginDiv"><form action="" id="form"><h1 style="text-align: center;color: aliceblue;">立即登录</h1><p>邮箱:<input id="email" type="text"></p><p>密码:<input id="password" type="password" placeholder="密码长度至少为6位"></p><p style="text-align: center;color: darkgray;"><a href="#">忘记密码?</a></p><div style="text-align: center;margin-top: 30px;"><input type="button" class="button" value="登录" onclick="login_click()"><input type="button" class="button" value="注册" onclick="register_click()"></div></form><script>//获取注册时存储在localStorage中的值var sex=localStorage.getItem("sex");var password=localStorage.getItem("password");var email=localStorage.getItem("email");var username=localStorage.getItem("username");//注册按钮跳转function register_click(){window.location.href="register.html";}//判断登录是否成功function login_click(){//获取用户输入的信息var email1=document.getElementById("email").value;var password1=document.getElementById("password").value;//判断输入的信息和注册的信息是否一致if(email1!='' && password1!=''){if (email1==email && password==password1){window.location.href="My_Album.html";}else{alert("邮箱或密码错误，请重新输入！");}}else{alert("邮箱或密码不能为空！");}}</script></div></body>
</html>

二、结果

html实现登录界面相关推荐

linux系统一直循环登录界面,Ubuntu 14.04解决登录界面无限循环的方法
在Ubuntu下配置Android的环境时,想像在Windows中那样在终端中直接启动adb,以为Linux和Windows一样,将adb的路径添加到环境变量中,于是将adb的路径也export到/e ...
Pretty Login便携版：Windows 7登录界面修改器
Pretty Login是由chnable开发的一个美化小工具,用来辅助修改Widnows 7登陆界面的背景图片,除此之外,它也能定制欢迎界面上的文本.按钮样式,如设置阴影.半透明效果. 由于Wind ...
注册表----修改Win7登录界面
在进行操作前,需要准备好背景图片.对背景图片的要求有三点: (1)图片必须是JPG格式: (2)必须将图片命名为backgroundDefault; (3)图片的体积必须小于256KB. 按下[Win ...
win7 登录界面---管理员账户禁用与显示
当 win7 管理员账户被禁用或者注册表里设置了"显示除 Administrator 外的所有本地用户名" 而标准用户的权限又不够,不能修改标准用户密码.打开组策略管理器及其它系统 ...
登录界面的滑动_电脑同时登录两个微信，原来这么简单？3步搞定！
关注我?发送[模板],送海量精选 PPT 模板! 作者:小斯策划:视频小分队编辑:小胖 Hey hey,what's up? what's up! 这里是小斯,AKA差一点玩转PPT,也要给你分享 ...
Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
FineReport中如何自定义登录界面
在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. ...
finereport 登录界面的代码文件_Confluence 6 自定义登录界面
这个页面将会给你一些如何对 Confluence 登录界面进行自定义的一些建议和知道.这个将不会自定义用户的登录过程,只是对用户看到的登录界面进行自定义. 备注: 自定义过后的 Confluence ...
linux 新用户界面登录,如何在Linux系统登录界面加入个性化提示信息
如何在Linux系统登录界面加入个性化提示信息 Linux字符界面看久了容易乏味,如果在登录时加点个性化显示看着也比较舒服,下面小编就给大家介绍下如何在Linux系统登录界面加入个性化提示信息,一起来 ...
ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）...
开始搭建登录界面登录界面效果图: 步骤开始: 设置辅助窗口的位置在下方快捷键option,然后拖拽复制之后: 这里就直接省去了将背景颜色改为经典黑了. 到这里QQ空间的登录界面搭建完毕. 下面进行 ...

html实现登录界面

一、代码

二、结果

html实现登录界面相关推荐

最新文章

热门文章