運行我的 HTML 時，我的 CSS 不會加載。HTML 與 CSS 正確連接，但 express 和 node.js 似乎忽略了它。我無法理解文章和教程或其他堆疊溢位問題，所以我只會發送代碼。
我也收到一條錯誤訊息，指出 MIME 型別是文本/HTML，盡管我已經檢查過多次，但 MIME 型別確實是文本/CSS。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Road</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="infinite">
<div class="shadow"></div>
</div>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#9bdfff, #009be4);
}
.infinite {
position: relative;
width: 800px;
height: 160px;
background: #525252;
transform-origin: bottom;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(30deg);
}
.infinite::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
background-size: 120px;
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: -120px;
}
}
.infinite::after {
content: "";
position: absolute;
width: 100%;
height: 30px;
background: #333;
bottom: -30px;
transform-origin: top;
transform: perspective(500px) rotateX(-25deg)
}
.shadow {
position: absolute;
bottom: -93px;
left: 50%;
transform: translateX(-50%);
width: 95%;
height: 60px;
background: linear-gradient(#000, transparent);
opacity: 0.5;
}
JS：
const path = require('path');
const { readFile } = require('fs');
const app = express();
app.get('/', (request, response) => {
response.sendFile(path.join(__dirname, "index.html"))
});
app.get('/', (request, responseC) => {
responseC.sendFile(path.join(__dirname, "style.css"))
});
app.listen(process.env.PORT || 8080, () => console.log('App availible on http://localhost:8080'))
Stackoverflow 告訴我代碼太多，文本不夠，所以我嘗試添加更多。
uj5u.com熱心網友回復：
更改app.get('/', (request, responseC) => {為app.get('/style.css', (request, responseC) => {
uj5u.com熱心網友回復：
在您的專案根目錄中創建一個名為“public”的檔案夾，并使用以下代碼在名為 public 的目錄中提供影像、CSS 檔案和 JavaScript 檔案：
app.use(express.static('public'));
或者
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')));
如果你做的一切都正確，那么你可以像這樣訪問檔案：
http://localhost:3000/css/style.css
css 鏈接
<link rel="stylesheet" href="/style.css">
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369891.html
標籤：javascript html css 节点.js 表达
上一篇：NodeJS值映射如何加起來為K