将这段代码美化,最好是蓝白灰配色的
时间: 2024-03-26 20:40:09 浏览: 41
蓝白混合配色通用毕业答辩ppt模板.pptx
好的,这里提供一份美化后的代码,使用了蓝白灰三色配色方案。您可以根据需要进行调整。
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Template</title>
<style>
body {
background-color: #ecf0f1;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: #2980b9;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 10px 0;
}
a {
color: #2c3e50;
text-decoration: none;
}
a:hover {
color: #2980b9;
}
</style>
</head>
<body>
<h1>Thymeleaf Template</h1>
<ul>
<li><a th:href="@{/page1}">Page 1</a></li>
<li><a th:href="@{/page2}">Page 2</a></li>
<li><a th:href="@{/page3}">Page 3</a></li>
</ul>
</body>
</html>
```
在上面的代码中,我们添加了一些 CSS 样式来美化页面。我们使用了蓝白灰三色配色方案,其中蓝色用于标题,灰色用于背景色和文本颜色,白色用于列表项和链接的背景色。我们还将链接的下划线去掉,并在鼠标悬停时更改链接的颜色。
希望这份美化后的代码对您有所帮助。
阅读全文