帮我优化界面<!DOCTYPE html> <html> <head> <title>Login</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>Login</h1> <form> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="button" id="submit" value="Submit"> </form> <script> $(document).ready(function() { $("#submit").click(function() { var username = $("#username").val(); var password = $("#password").val(); $.ajax({ url: "/login", type: "POST", data: { username: username, password: password }, success: function(response) { if (response == "success") { window.location.href = "/dashboard"; } else { alert("Invalid username or password."); } }, error: function() { alert("Error occurred."); } }); }); }); </script> </body> </html>
时间: 2023-07-19 21:06:12 浏览: 163
以下是一个优化后的界面代码:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
label {
font-size: 18px;
margin-bottom: 5px;
}
input[type=text], input[type=password] {
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
width: 300px;
}
input[type=button] {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 18px;
margin-bottom: 20px;
width: 300px;
}
input[type=button]:hover {
background-color: #3e8e41;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 36px;
}
</style>
</head>
<body>
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="button" id="submit" value="Submit">
</form>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/login",
type: "POST",
data: {
username: username,
password: password },
success: function(response) {
if (response == "success") {
window.location.href = "/dashboard";
} else {
alert("Invalid username or password.");
}
},
error: function() {
alert("Error occurred.");
}
});
});
});
</script>
</body>
</html>
这个优化后的界面代码做了以下改进:
1. 使用 CSS 来美化界面,让它更加美观、易于使用和可读性更高。
2. 将表单元素布局在一个垂直方向上,使界面更加整洁。
3. 对表单元素的大小、间距和样式进行微调,使它们更加一致和易于使用。
4. 将 JavaScript 代码移到一个单独的 <script> 标签中,使它更加易于维护和重用。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
美化界面<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> 注册 <form action="/Register" method="post"> <label for="username">用户名:</label> <input type="text" name="username" id="username" required>
<label for="password">密码:</label> <input type="password" name="password" id="password" required>
<input type="submit" value="注册"> 已注册,去登录 </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
根据这个页面制作一个js完善功能<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="script.js"></script> </head> <body> 欢迎来到我们的网站! 首页 商品 购物车 登录 <main> 购物车
商品1 价格:100元 <form> <label for="quantity1">数量:</label> <input type="number" id="quantity1" min="1" value="1"> <button type="submit">更新</button> </form> <button class="remove">删除</button>
商品2 价格:200元 <form> <label for="quantity2">数量:</label> <input type="number" id="quantity2" min="1" value="1"> <button type="submit">更新</button> </form> <button class="remove">删除</button> 总价:300元 <button id="checkout">结算</button> </main> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)