<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
/* 首先增加背景图 */
background-size: 100% auto; /* 设置背景的大小 */
/* 将背景设置为不重复显示 */
background-image: url("../static/images/background.jpg");
}
#loginDiv {
border: 1px solid blue;
width: 30%;
text-align: center;
margin: 15% auto 0;
background: #00000080;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
box-shadow: 7px 7px 17px rgba(56, 60, 69, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: #ffefef;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(220, 203, 220, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
.button {
border: 0; /* 取消按钮的边界 */
width: 100px; /* 设置合适的按钮的长和宽 */
height: 30px;
margin-top: 18px; /* 设置合适的上部外框的宽度,增加与上面的password框的距离 */
font-size: 18px; /* 修改按钮文字的大小 */
color: white; /* 修改按钮上文字的颜色 */
border-radius: 25px; /* 将按钮的左右边框设置为圆弧 */
background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); /* 为按钮增加渐变颜色 */
}
</style>
<script type="text/javascript">
function checkUser(){
var result = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(result == "" ){
alert("用户名不能为空");
return false;
}
if(password == "" ){
alert("密码不能为空");
return false;
}else{
return true;
}
}
function submitBtnClick(){
document.fileForm.submit();
}
</script>
</head>
<body th:style="'background-image: url(../images/background.jpg)'">
<!--<img th:src="@{/images/background.jpg}" style="position: relative;z-index: -1"/>-->
<div id="loginDiv">
<form id="form" action="/result" method="get" >
<h1 style="text-align: center;color: #eef0f3;">登录</h1>
<p>用户:<input id="username" type="username" placeholder="username" name="username"></p>
<p>密码:<input id="password" type="password" placeholder="password" name="password"></p>
<div style="text-align: center;margin-top: 30px;">
<input type="submit" class="button" value="登录" onclick="return checkUser();">
</div>
</form>
<div style="margin-left: -40px;margin-top: 191px">
<a href="/r">
<button value="注册" class="button" style="height: 32px">注册</button>
</a>
</div>
</div>
</body>
</html>
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。
UP刚刚开始使用Thymeleaf,不是很会用。一开始登录界面想要引入背景图片,使用的是background:url("xxx.jpg")
的方式,结果背景一直显示不出来。我去找了很多方法,结果还是不行。突然想起来我用的是Thymeleaf,然后就尝试像从数据库里拿数据那样来写background,结果就成功了。
这是我拿数据的写法。我把text改成style就行了。
最后想说,写代码的时候一定一定要先想一想用的是什么模板,看看终端自己错在哪里。是在自己没有办法解决的时候再去上网查答案。不然永远不会得到提高。