用thymeleaf写一个好看的登录界面
时间: 2023-07-18 17:17:11 浏览: 41
好的,以下是一个使用Thymeleaf编写的简单但时尚的登录页面示例:
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
background: #fafafa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background: #fff;
border-radius: 5px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
padding: 30px;
width: 400px;
max-width: 100%;
text-align: center;
}
h2 {
font-weight: 700;
margin-bottom: 30px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
background: #eee;
}
input[type="submit"] {
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #04AA6D;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="card">
<h2>Login</h2>
<form th:action="@{/login}" method="post">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
```
该登录页面使用了Montserrat字体,具有圆角和盒子阴影的卡片式布局,以及绿色的提交按钮。使用Thymeleaf,我们将表单的提交操作指向了/login路径,并设置了用户名和密码输入框的必填属性。你可以根据自己的需求和偏好进行修改和调整。