首页jquery 登录页面好看的

jquery 登录页面好看的

时间: 2023-09-02 12:15:55 浏览: 37

以下是一个简单的基于 jQuery 的登录页面示例： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div class="login"> <h2>Login Form</h2> <form> <label>Username</label> <input type="text" id="username" placeholder="Enter Username"> <label>Password</label> <input type="password" id="password" placeholder="Enter Password"> <input type="button" value="Login" id="login"> </form> </div> </body> </html> ``` CSS 文件（style.css）： ```css body { background-color: #f1f1f1; } .login { background-color: #ffffff; margin: 10% auto; padding: 20px; width: 400px; text-align: center; border-radius: 5px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); } h2 { margin-top: 0px; } form { text-align: left; } label { display: block; margin-top: 10px; } input[type=text], input[type=password] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-top: 5px; margin-bottom: 15px; } input[type=button] { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } input[type=button]:hover { background-color: #45a049; } ``` jQuery 文件（script.js）： ```javascript $(document).ready(function() { $('#login').click(function() { var username = $('#username').val(); var password = $('#password').val(); if (username == '') { alert('Please enter your username'); return false; } if (password == '') { alert('Please enter your password'); return false; } }); }); ``` 这个示例包括一个简单的登录表单，具有美观的样式和基本的客户端验证。您可以根据自己的需要进行修改和定制。