网站通过Live Server正常运行，直接打开浏览器无法加载style.css

核心原因 #

你用了绝对路径（以/开头）加载资源，比如/css/style.css。在Live Server的HTTP环境下，/指向项目根目录，但直接用浏览器打开本地文件时（file://协议），/指向的是你的系统根目录（比如Windows的C:\或Linux的/），自然找不到项目里的文件。

解决方案 #

把所有资源路径改成相对路径（去掉开头的/），路径是相对于当前index.html所在的位置：

修正后的index.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/style.css" />
    <!-- 二选一即可，无需同时引入完整版和压缩版 -->
    <link
      rel="stylesheet"
      href="bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"
    />
    <title>Web Projekat</title>
  </head>
  <body>
    <nav class="navbackgroundcolor navbar navbar-expand-lg navbar-dark">
      <div class="container-fluid">
        <!-- Bootstrap 5用data-bs-toggle，不是data-mdb-toggle -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarCenteredExample"
          aria-controls="navbarCenteredExample"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="fas fa-bars"></i>
        </button>
        <div
          class="collapse navbar-collapse justify-content-center"
          id="navbarCenteredExample"
        >
          <ul class="navbar-nav mb-2 mb-lg-0">
            <li class="nav-item pe-5 fs-4">
              <!-- 相对路径指向html文件夹下的文件 -->
              <a class="nav-link" href="html/gallery.html">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="index.html"
                ><img
                  class="skate"
                  src="media/icons8-skateboard-64 white.png"
                  alt="Home"
              /></a>
            </li>
            <li class="nav-item ps-5 fs-4">
              <a class="nav-link" href="html/shop.html">Shop</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 同样改为相对路径，且只引入一个bootstrap.js即可 -->
    <script src="bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
  </body>
</html>

额外注意事项 #

• 不要同时引入Bootstrap的完整版（bootstrap.css/bootstrap.js）和压缩版（bootstrap.min.css/bootstrap.min.js），压缩版体积更小，选它就行。
• Bootstrap 5的折叠按钮属性是data-bs-toggle，不是data-mdb-toggle，后者是MD Bootstrap的属性，会导致按钮功能失效。
• 确认你的文件结构和路径完全匹配，比如css/style.css确实在index.html的同级css文件夹下。

内容的提问来源于stack exchange，提问作者Morlozono