Spring Boot中CSS样式无法显示的几种情况攻略
在Spring Boot项目中，CSS文件负责控制网页样式，让网页更加美观。然而，有时候我们会发现CSS样式无法显示，导致网页效果很奇怪，这是因为以下几种情况：
1. 路径问题
当CSS文件没有被正确地加载时，可能是因为路径设置不正确。在Spring Boot项目中，我们一般将CSS文件放在src/main/resources/static目录下。如果我们使用相对路径，则在HTML文件中引用该CSS文件需要使用相对于HTML文件的路径。如：
<link rel="stylesheet" href="./css/style.css">
如果我们使用绝对路径，则需要使用项目根路径。如：
<link rel="stylesheet" href="/css/style.css">
2. 缓存问题
Web浏览器会缓存网页的CSS和JS文件。如果文件被缓存后修改过了，但是浏览器缓存的却是原来的文件，就会导致CSS和JS文件无法正确显示。可以尝试以下解决方法：
- 在CSS文件名或CSS文件和html文件同路径文件夹中添加版本号或时间戳等随机字符串，避免缓存。
- 使用强制刷新，可在浏览器中按下Ctrl+F5来进行强制刷新。
<link rel="stylesheet" href="/css/style.css?v=1.0.0">
示例说明
以下为一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spring Boot CSS Demo</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>Spring Boot CSS Demo</h1>
<h2>CSS Style Test</h2>
<p>这是一段测试文本。</p>
</body>
</html>
其中，href 属性中的 ./css/style.css 表示相对于HTML文件的路径。如果 style.css 文件不在该路径下，则无法加载到CSS样式。
以下是一个通过时间戳避免缓存的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spring Boot CSS Demo</title>
<link rel="stylesheet" href="./css/style.css?v=1.0.0">
</head>
<body>
<h1>Spring Boot CSS Demo</h1>
<h2>CSS Style Test</h2>
<p>这是一段测试文本。</p>
</body>
</html>
其中，v=1.0.0 中的随机字符串可以是版本号、时间戳等，每次更新CSS文件时修改，避免浏览器缓存文件。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：springboot中的css样式显示不出了的几种情况 - Python技术站
微信扫一扫 
支付宝扫一扫 