為什么樣式在我的快速應用程式中不起作用？-有解無憂

樣式在這條路線上不起作用：'http://localhost:5000/exams/add-new'

但它正在與其他路線一起使用，例如：

'http://localhost:5000'
'http://localhost:5000/exams'
'http://localhost:5000/about'

我的資產檔案夾中有我的 CSS 檔案： assets/css/styles.css

這是 server.js 檔案：

const express = require('express')
const path = require('path')
const app = express()

app.set('view engine', 'ejs')

app.use('/css', express.static(path.resolve(__dirname, 'assets/css')))

app.use('/', require('./server/routes/router'))

app.listen(5000)

以及views檔案夾中的index.ejs檔案：

<!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" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Home Page</title>
  </head>
  <body>
    <!--Header-->
    <header>
      <div>
        <nav>
          <h1 class="logo">
            <a href="/">B<span>log</span></a>
          </h1>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/exams">Exams</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!--/Header-->
    <br />

    <!-- Main Section -->
    <main>
     <h1>Home Page</h1>
    </main>
    <!-- Main Section -->
  </body>
</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" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Home Page</title>
  </head>
  <body>
    <!--Header-->
    <header>
      <div>
        <nav>
          <h1 class="logo">
            <a href="/">B<span>log</span></a>
          </h1>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/exams">Exams</a></li>
            <li><a href="/">About</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!--/Header-->
    <br />

    <!-- Main Section -->
    <main>
      <!-- Add New Question Button -->
      <div class="addNewQuestionsButton">
        <a href="/exams/add-new-questions">
          <span>Add new questions</span>
        </a>
      </div>
      <!-- Add New Question Button -->
    </main>
    <!-- Main Section -->
  </body>
</html>

為什么會發生這種情況，解決方案是什么？

uj5u.com熱心網友回復：

在您的輸出 HTML 中，確保從路徑加載 CSS：

<link rel="stylesheet" href="/css/styles.css" />

代替

<link rel="stylesheet" href="css/styles.css" />

盡管route您當前的網址是這樣，但這將帶來一致性

uj5u.com熱心網友回復：

在 Html 添加 css 的確切路徑：

assets/css/styles.css

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/436976.html

標籤：css 节点.js 表示 ejs

上一篇：為什么Observable訂閱讓我的班級空了

下一篇：SFENCE屬于什么指令集？