前端：登录页面

来源：互联网发布：linux中du命令编辑：程序博客网时间：2024/06/05 22:38

前端：登录页面

效果：

这里写图片描述

代码：

<!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>

$(function () {  $('#login').click(function(){    $.post("http://localhost/index.php",    {        username:$('#username').val(),        password:$('#password').val()    },        function(data,status){        alert("数据: \n" + data + "\n状态: " + status);    });    });});

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;}

0 0