Question

所以我一直在创建注册页面，但是在本地服务器上运行该页面时，我所有已应用的CSS均未显示。我正在使用引导程序4

当我尝试在浏览器中打开文件时，它显示正确的结果。如果您告诉它发生的原因，将会很有帮助。

注意，我一直在测试，需要帮助，因此我可以继续进行我的项目

我现在不担心收藏夹图标。

这是我的HTML代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Signin Template · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">

    <!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="public/css/sty.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  </head>

  <body class="text-center">
    <form action="/" class="form-signin" methode="post">

      <img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>

      <input type="text" class="form-control a" placeholder="first name" required autofocus>
      <input type="text" class="form-control b" placeholder="last name">
      <input type="email" class="form-control c" placeholder="email" required>

      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
    </form>
</body>

</html>

我的node.js代码

const express    = require("express");
const bodyParser = require("body-parser");


const app        = express();

app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"));

app.get("/",function(req,res){
  res.sendFile(__dirname + "/in.html");
});


app.listen(3000,function(req,res){
  console.log("running");
});

我的结果：

我正在寻找的结果注释：结果不确切，但与此类似

Answer 1

一旦您给了这个：

app.use(express.static("public"));

在这样的路径中不必包含public。

<link href="public/css/sty.css" rel="stylesheet">

尝试

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

Express查找相对于静态目录的文件，因此静态目录的名称不是URL的一部分。 https://expressjs.com/en/starter/static-files.html

否则，您应该使用

app.use('/public', express.static('public'));

使用

<link href="/public/css/sty.css" rel="stylesheet">

请务必签出this。这显示了如何使用相对路径。 /public/和public/不同。

样式表未使用node.js应用于我的本地服务器

1 个答案: