Spring Boot + Thymeleaf 项目中登录页 CSS 样式失效问题排查与解决方案

问题现象

编写了一个漂亮的登录页 login.html，引用了 login.css、pear.css 等样式文件，导入了一些漂亮的图片

<link rel="stylesheet" href="../static/admin/css/other/login.css" />

<img class="login-bg-img" src="./admin/images/banner.png" alt="" />

但启动 Spring Boot 应用后，访问登录页（如 http://localhost:8080/login），页面却像这样：

• 没有背景图
• 按钮是浏览器默认样式
• 布局错乱，文字堆叠
• 开发者工具中看不到任何自定义样式

F12 查看元素，发现所有 class 都存在，但 CSS 文件根本没加载！

根本原因：静态资源路径理解错误

解决方案

修改 login.html —— 使用 Thymeleaf 语法引入资源

<!-- ✅ 正确方式：使用 th:href="@{...}" --> <link th:href="@{/admin/css/other/login.css}" rel="stylesheet" />

<img class="login-bg-img" th:src="@{/admin/images/banner.png}" alt="" />

创建 Controller 映射路由

@Controller public class PageController { @GetMapping("/login") public String login() { return "login"; // 返回 templates/login.html } }

现在可以通过 http://localhost:8080/login 正常访问登录页。