前端:登录页面
2017-05-04 23:04
155 查看
前端:登录页面
login.js
login.css
效果:
代码:
login.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="css/login.css"> <script type="text/javascript" src="js/login.js"></script> </head> <body> <div class="container"> <div class="login-box"> <div class="login-title"> <a>login</a> </div> <div class="login-input"> <p> <a >username:</a> <input type="text" name="username" id="username" value=""> </p> <p> <a >password:</a> <input type="password" name="password" id="password" value=""> </p> </div> <div class="login-btn"> <input type="button" name="login" value="login" id="login"> </div> </div> </div> </body> </html>
login.js
$(function () { $('#login').click(function(){ $.post("http://localhost/index.php", { username:$('#username').val(), password:$('#password').val() }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); });
login.css
body{ background-color: #CC3333; } .container{ position: fixed; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); } .login-box{ background: hsla(0,0%,100%,.3); padding: 60px; border-radius: 20px; } .login-title{ font-size: 40px; text-align: center; margin-left: auto; margin-right: auto; } .login-input{ } .login-input input{ border-left-style: none; border-right-style:none; border-top-style: none; background-color:transparent; } .login-btn{ text-align: center; margin-left: auto; margin-right: auto; } .login-btn input{ width: 200px; height: 20px; border-radius: 6px; background-color: #999999; } .login-btn input:hover{ background-color: #CCCCCC; }
相关文章推荐
- Django 1.11 前端数据异步加载(前端页面单独请求用户登录状态)
- WEB前端登录注册页面的form中使用placeholder占位符
- shiro框架前端ajax无法重定向到登录页面解决方案
- 前端页面用户登录,servlet查询用户失败以后提示登录失败!
- SharePoint 2013 管理中心登录正常,而SharePoint 前端页面反复登录不成功的问题。
- iOS转前端之仿写登录页面
- 2、简单的登录页面与前端交互
- 前端代码整理-迷你登录页面
- 前端之用户登录页面
- 重新登录,页面嵌套问题的解决办法
- web前端优化vue ssr pwa技术突破性能瓶颈让页面飞
- Android登录页面案例(SharedPreferences的使用)
- yii中登录后跳转回登录前请求的页面
- Spring Security默认的用户登录表单 页面源代码
- OWA页面改密码提示成功,但登录不上
- JQuery:常用方法一览(前端页面利用贴片赋值的方法)
- JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)
- web前端优化之reflow(减少页面的回流)
- PC端实现单点登录,同时登录页面跳转位置不对的解释
- spring mvc怎么加入权限控制,在未登录前,任何访问url都跳转到login页面;登录成功后跳转至先前的url