express.js中CSS未加载，但HTML加载了。

huangapple
go评论120阅读模式
英文:

express.js css not loading but html does

问题

文件夹和文件
server.js 这是我目前创建的内容

  1. //导入包
  2. const express = require('express');
  3. const admin = require('firebase-admin');
  4. const bcrypt = require('bcrypt');
  5. const path = require('path');
  7. //声明静态路径
  8. let staticPath = path.join(__dirname, "js");
  10. //初始化 express.js
  11. const app = express();
  13. //中间件
  14. app.use(express.static(staticPath));
  16. //路由
  17. //主页路由
  18. app.get("/", (req, res) => {
  19.     res.sendFile(path.join(staticPath, "index.html"));
  20. })
  22. //注册路由
  23. app.get("/signup", (req, res) => {
  24.     res.sendFile(path.join(staticPath, "signup.html"));
  25. })
  27. // 404 路由
  28. app.get("/404", (req, res) => {
  29.     res.sendFile(path.join(staticPath, "404.html"));
  30. })
  32. app.use((req, res) => {
  33.     res.redirect('/404');
  34. })
  36. app.listen(3000, () => {
  37.     console.log('listening on port 3000.......');
  38. })

index.html 这是我目前创建的内容

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edga">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Clothing - Best Apparels Online Store</title>
  9.         <link rel="stylesheet" type="text/css" href="../css/home.css">
  10.     </head>
  12.     <body>
  13.         <nav class="navbar"></nav>
  15.         <!-- hero section-->
  17.         <header class="hero-section">
  18.             <div class="content">
  19.                 <img src="../img/light-logo.png" class="logo" alt="">
  20.                 <p class="sub-heading">best fashion collection of all time</p>
  21.             </div>
  22.         </header>
  24.         <!-- card-container-->
  26.         <section class="product">
  27.             <h2 class="product-category">best selling</h2>
  28.             <button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
  29.             <button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
  30.             <div class="product-container">
  31.                 <div class="product-card">
  32.                     <div class="product-image">
  33.                         <span class="discount-tag">50% off</span>
  34.                         <img src="../img/card1.png" class="product-thumb" alt="">
  35.                         <button class="card-btn">add to wishlist</button>
  36.                     </div>
  37.                     <div class="product-info">
  38.                         <h2 class="product-brand">brand</h2>
  39.                         <p class="product-short-des">a short line about the cloth...</p>
  40.                         <span class="price">$20</span><span class="actual-price">$40</span>
  41.                     </div>
  42.                 </div>
  43.                 <!-- 其他产品卡片 -->
  44.             </div>
  45.         </section>
  47.         <!-- 集合 -->
  49.         <section class="collection-container">
  50.             <a href="#" class="collection">
  51.                 <img src="../img/women-collection.png" alt="">
  52.                 <p class="collection-title">women <br> apparels </p>
  53.             </a>
  54.             <!-- 其他集合 -->
  55.         </section>
  56.         
  57.         <!-- card-container-->
  59.         <section class="product">
  60.             <h2 class="product-category">Shirts</h2>
  61.             <button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
  62.             <button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
  63.             <div class="product-container">
  64.                 <div class="product-card">
  65.                     <div class="product-image">
  66.                         <span class="discount-tag">50% off</span>
  67.                         <img src="../img/product image 1.png" class="product-thumb" alt="">
  68.                         <button class="card-btn">add to wishlist</button>
  69.                     </div>
  70.                     <div class="product-info">
  71.                         <h2 class="product-brand">brand</h2>
  72.                         <p class="product-short-des">a short line about the cloth...</p>
  73.                         <span class="price">$20</span><span class="actual-price">$40</span>
  74.                     </div>
  75.                 </div>
  76.                 <!-- 其他产品卡片 -->
  77.             </div>
  78.         </section>
  79.         <!-- card-container-->
  81.         <!-- 其他内容 -->
  82.         <!-- 其他内容 -->
  83.         <!-- 其他内容 -->
  85.         <footer>
  86.             
  87.         </footer>
  89.         <script src="../js/nav.js"></script>
英文:

folder and files
server.js this is what i created so far

  1. //importing packages
  2. const express = require(&#39;express&#39;);
  3. const admin = require(&#39;firebase-admin&#39;);
  4. const bcrypt = require(&#39;bcrypt&#39;);
  5. const path = require(&#39;path&#39;);
  7. //declare static path
  8. let staticPath = path.join(__dirname, &quot;js&quot;);
  10. //intializing express.js
  12. const app = express();
  14. //midlewares
  15. app.use(express.static(staticPath));
  17. //routes
  18. //home route
  19. app.get(&quot;/&quot;, (req, res) =&gt; {
  20.     res.sendFile(path.join(staticPath, &quot;index.html&quot;));
  21. })
  23. //signup route
  24. app.get(&quot;/signup&quot;, (req, res) =&gt; {
  25.     res.sendFile(path.join(staticPath, &quot;signup.html&quot;));
  26. })
  28. // 404 route
  29. app.get(&quot;/404&quot;, (req, res) =&gt; {
  30.     res.sendFile(path.join(staticPath, &quot;404.html&quot;));
  31. })
  33. app.use((req, res) =&gt; {
  34.     res.redirect(&#39;/404&#39;);
  35. })
  37. app.listen(3000, () =&gt; {
  38.     console.log(&#39;listening on port 3000.......&#39;);
  39. })

index.html this is what i created so far

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edga&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;title&gt;Clothing - Best Apparels Online Store&lt;/title&gt;
  8. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../css/home.css&quot;&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;nav class=&quot;navbar&quot;&gt;&lt;/nav&gt;
  12. &lt;!-- hero section--&gt;
  13. &lt;header class=&quot;hero-section&quot;&gt;
  14. &lt;div class=&quot;content&quot;&gt;
  15. &lt;img src=&quot;../img/light-logo.png&quot; class=&quot;logo&quot; alt=&quot;&quot;&gt;
  16. &lt;p class=&quot;sub-heading&quot;&gt;best fashion collection of all time&lt;/p&gt;
  17. &lt;/div&gt;
  18. &lt;/header&gt;
  19. &lt;!-- card-container--&gt;
  20. &lt;section class=&quot;product&quot;&gt;
  21. &lt;h2 class=&quot;product-category&quot;&gt;best selling&lt;/h2&gt;
  22. &lt;button class=&quot;pre-btn&quot;&gt;&lt;img src=&quot;../img/arrow.png&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
  23. &lt;button class=&quot;nxt-btn&quot;&gt;&lt;img src=&quot;../img/arrow.png&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
  24. &lt;div class=&quot;product-container&quot;&gt;
  25. &lt;div class=&quot;product-card&quot;&gt;
  26. &lt;div class=&quot;product-image&quot;&gt;
  27. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  28. &lt;img src=&quot;../img/card1.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  29. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  30. &lt;/div&gt;
  31. &lt;div class=&quot;product-info&quot;&gt;
  32. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  33. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  34. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;div class=&quot;product-card&quot;&gt;
  38. &lt;div class=&quot;product-image&quot;&gt;
  39. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  40. &lt;img src=&quot;../img/card2.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  41. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  42. &lt;/div&gt;
  43. &lt;div class=&quot;product-info&quot;&gt;
  44. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  45. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  46. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  47. &lt;/div&gt;
  48. &lt;/div&gt;
  49. &lt;div class=&quot;product-card&quot;&gt;
  50. &lt;div class=&quot;product-image&quot;&gt;
  51. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  52. &lt;img src=&quot;../img/card3.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  53. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  54. &lt;/div&gt;
  55. &lt;div class=&quot;product-info&quot;&gt;
  56. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  57. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  58. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  59. &lt;/div&gt;
  60. &lt;/div&gt;
  61. &lt;div class=&quot;product-card&quot;&gt;
  62. &lt;div class=&quot;product-image&quot;&gt;
  63. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  64. &lt;img src=&quot;../img/card4.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  65. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  66. &lt;/div&gt;
  67. &lt;div class=&quot;product-info&quot;&gt;
  68. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  69. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  70. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  71. &lt;/div&gt;
  72. &lt;/div&gt;
  73. &lt;div class=&quot;product-card&quot;&gt;
  74. &lt;div class=&quot;product-image&quot;&gt;
  75. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  76. &lt;img src=&quot;../img/card5.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  77. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  78. &lt;/div&gt;
  79. &lt;div class=&quot;product-info&quot;&gt;
  80. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  81. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  82. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  83. &lt;/div&gt;
  84. &lt;/div&gt;
  85. &lt;div class=&quot;product-card&quot;&gt;
  86. &lt;div class=&quot;product-image&quot;&gt;
  87. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  88. &lt;img src=&quot;../img/card6.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  89. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  90. &lt;/div&gt;
  91. &lt;div class=&quot;product-info&quot;&gt;
  92. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  93. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  94. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  95. &lt;/div&gt;
  96. &lt;/div&gt;
  97. &lt;div class=&quot;product-card&quot;&gt;
  98. &lt;div class=&quot;product-image&quot;&gt;
  99. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  100. &lt;img src=&quot;../img/card7.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  101. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  102. &lt;/div&gt;
  103. &lt;div class=&quot;product-info&quot;&gt;
  104. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  105. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  106. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  107. &lt;/div&gt;
  108. &lt;/div&gt;
  109. &lt;div class=&quot;product-card&quot;&gt;
  110. &lt;div class=&quot;product-image&quot;&gt;
  111. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  112. &lt;img src=&quot;../img/card8.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  113. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  114. &lt;/div&gt;
  115. &lt;div class=&quot;product-info&quot;&gt;
  116. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  117. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  118. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  119. &lt;/div&gt;
  120. &lt;/div&gt;
  121. &lt;/div&gt;
  122. &lt;/section&gt;
  123. &lt;!-- collections --&gt;
  124. &lt;section class=&quot;collection-container&quot;&gt;
  125. &lt;a href=&quot;#&quot; class=&quot;collection&quot;&gt;
  126. &lt;img src=&quot;../img/women-collection.png&quot; alt=&quot;&quot;&gt;
  127. &lt;p class=&quot;collection-title&quot;&gt;women &lt;br&gt; apparels &lt;/p&gt;
  128. &lt;/a&gt;
  129. &lt;a href=&quot;#&quot; class=&quot;collection&quot;&gt;
  130. &lt;img src=&quot;../img/men-collection.png&quot; alt=&quot;&quot;&gt;
  131. &lt;p class=&quot;collection-title&quot;&gt;women &lt;br&gt; apparels &lt;/p&gt;
  132. &lt;/a&gt;
  133. &lt;a href=&quot;#&quot; class=&quot;collection&quot;&gt;
  134. &lt;img src=&quot;../img/accessories-collection.png&quot; alt=&quot;&quot;&gt;
  135. &lt;p class=&quot;collection-title&quot;&gt;accessories&lt;/p&gt;
  136. &lt;/a&gt;
  137. &lt;/section&gt;
  138. &lt;!-- card-container--&gt;
  139. &lt;section class=&quot;product&quot;&gt;
  140. &lt;h2 class=&quot;product-category&quot;&gt;Shirts&lt;/h2&gt;
  141. &lt;button class=&quot;pre-btn&quot;&gt;&lt;img src=&quot;../img/arrow.png&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
  142. &lt;button class=&quot;nxt-btn&quot;&gt;&lt;img src=&quot;../img/arrow.png&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
  143. &lt;div class=&quot;product-container&quot;&gt;
  144. &lt;div class=&quot;product-card&quot;&gt;
  145. &lt;div class=&quot;product-image&quot;&gt;
  146. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  147. &lt;img src=&quot;../img/product image 1.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  148. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  149. &lt;/div&gt;
  150. &lt;div class=&quot;product-info&quot;&gt;
  151. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  152. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  153. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  154. &lt;/div&gt;
  155. &lt;/div&gt;
  156. &lt;div class=&quot;product-card&quot;&gt;
  157. &lt;div class=&quot;product-image&quot;&gt;
  158. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  159. &lt;img src=&quot;../img/product image 2.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  160. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  161. &lt;/div&gt;
  162. &lt;div class=&quot;product-info&quot;&gt;
  163. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  164. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  165. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  166. &lt;/div&gt;
  167. &lt;/div&gt;
  168. &lt;div class=&quot;product-card&quot;&gt;
  169. &lt;div class=&quot;product-image&quot;&gt;
  170. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  171. &lt;img src=&quot;../img/product image 3.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  172. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  173. &lt;/div&gt;
  174. &lt;div class=&quot;product-info&quot;&gt;
  175. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  176. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  177. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  178. &lt;/div&gt;
  179. &lt;/div&gt;
  180. &lt;div class=&quot;product-card&quot;&gt;
  181. &lt;div class=&quot;product-image&quot;&gt;
  182. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  183. &lt;img src=&quot;../img/product image 4.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  184. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  185. &lt;/div&gt;
  186. &lt;div class=&quot;product-info&quot;&gt;
  187. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  188. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  189. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  190. &lt;/div&gt;
  191. &lt;/div&gt;
  192. &lt;div class=&quot;product-card&quot;&gt;
  193. &lt;div class=&quot;product-image&quot;&gt;
  194. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  195. &lt;img src=&quot;../img/card5.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  196. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  197. &lt;/div&gt;
  198. &lt;div class=&quot;product-info&quot;&gt;
  199. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  200. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  201. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  202. &lt;/div&gt;
  203. &lt;/div&gt;
  204. &lt;div class=&quot;product-card&quot;&gt;
  205. &lt;div class=&quot;product-image&quot;&gt;
  206. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  207. &lt;img src=&quot;../img/card6.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  208. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  209. &lt;/div&gt;
  210. &lt;div class=&quot;product-info&quot;&gt;
  211. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  212. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  213. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  214. &lt;/div&gt;
  215. &lt;/div&gt;
  216. &lt;div class=&quot;product-card&quot;&gt;
  217. &lt;div class=&quot;product-image&quot;&gt;
  218. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  219. &lt;img src=&quot;../img/card7.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  220. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  221. &lt;/div&gt;
  222. &lt;div class=&quot;product-info&quot;&gt;
  223. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  224. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  225. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  226. &lt;/div&gt;
  227. &lt;/div&gt;
  228. &lt;div class=&quot;product-card&quot;&gt;
  229. &lt;div class=&quot;product-image&quot;&gt;
  230. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  231. &lt;img src=&quot;../img/card8.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  232. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  233. &lt;/div&gt;
  234. &lt;div class=&quot;product-info&quot;&gt;
  235. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  236. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  237. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  238. &lt;/div&gt;
  239. &lt;/div&gt;
  240. &lt;/div&gt;
  241. &lt;/section&gt;
  242. &lt;!-- card-container--&gt;
  243. &lt;section class=&quot;product&quot;&gt;
  244. &lt;h2 class=&quot;product-category&quot;&gt;Shoes&lt;/h2&gt;
  245. &lt;button class=&quot;pre-btn&quot;&gt;&lt;img src=&quot;../img/arrow.png&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
  246. &lt;button class=&quot;nxt-btn&quot;&gt;&lt;img src=&quot;../img/arrow.png&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
  247. &lt;div class=&quot;product-container&quot;&gt;
  248. &lt;div class=&quot;product-card&quot;&gt;
  249. &lt;div class=&quot;product-image&quot;&gt;
  250. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  251. &lt;img src=&quot;../img/card9.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  252. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  253. &lt;/div&gt;
  254. &lt;div class=&quot;product-info&quot;&gt;
  255. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  256. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  257. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  258. &lt;/div&gt;
  259. &lt;/div&gt;
  260. &lt;div class=&quot;product-card&quot;&gt;
  261. &lt;div class=&quot;product-image&quot;&gt;
  262. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  263. &lt;img src=&quot;../img/card10.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  264. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  265. &lt;/div&gt;
  266. &lt;div class=&quot;product-info&quot;&gt;
  267. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  268. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  269. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  270. &lt;/div&gt;
  271. &lt;/div&gt;
  272. &lt;div class=&quot;product-card&quot;&gt;
  273. &lt;div class=&quot;product-image&quot;&gt;
  274. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  275. &lt;img src=&quot;../img/card11.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  276. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  277. &lt;/div&gt;
  278. &lt;div class=&quot;product-info&quot;&gt;
  279. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  280. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  281. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  282. &lt;/div&gt;
  283. &lt;/div&gt;
  284. &lt;div class=&quot;product-card&quot;&gt;
  285. &lt;div class=&quot;product-image&quot;&gt;
  286. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  287. &lt;img src=&quot;../img/card12.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  288. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  289. &lt;/div&gt;
  290. &lt;div class=&quot;product-info&quot;&gt;
  291. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  292. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  293. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  294. &lt;/div&gt;
  295. &lt;/div&gt;
  296. &lt;div class=&quot;product-card&quot;&gt;
  297. &lt;div class=&quot;product-image&quot;&gt;
  298. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  299. &lt;img src=&quot;../img/card5.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  300. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  301. &lt;/div&gt;
  302. &lt;div class=&quot;product-info&quot;&gt;
  303. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  304. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  305. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  306. &lt;/div&gt;
  307. &lt;/div&gt;
  308. &lt;div class=&quot;product-card&quot;&gt;
  309. &lt;div class=&quot;product-image&quot;&gt;
  310. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  311. &lt;img src=&quot;../img/card6.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  312. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  313. &lt;/div&gt;
  314. &lt;div class=&quot;product-info&quot;&gt;
  315. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  316. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  317. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  318. &lt;/div&gt;
  319. &lt;/div&gt;
  320. &lt;div class=&quot;product-card&quot;&gt;
  321. &lt;div class=&quot;product-image&quot;&gt;
  322. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  323. &lt;img src=&quot;../img/card7.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  324. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  325. &lt;/div&gt;
  326. &lt;div class=&quot;product-info&quot;&gt;
  327. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  328. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  329. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  330. &lt;/div&gt;
  331. &lt;/div&gt;
  332. &lt;div class=&quot;product-card&quot;&gt;
  333. &lt;div class=&quot;product-image&quot;&gt;
  334. &lt;span class=&quot;discount-tag&quot;&gt;50% off&lt;/span&gt;
  335. &lt;img src=&quot;../img/card8.png&quot; class=&quot;product-thumb&quot; alt=&quot;&quot;&gt;
  336. &lt;button class=&quot;card-btn&quot;&gt;add to wishlist&lt;/button&gt;
  337. &lt;/div&gt;
  338. &lt;div class=&quot;product-info&quot;&gt;
  339. &lt;h2 class=&quot;product-brand&quot;&gt;brand&lt;/h2&gt;
  340. &lt;p class=&quot;product-short-des&quot;&gt;a short line about the cloth...&lt;/p&gt;
  341. &lt;span class=&quot;price&quot;&gt;$20&lt;/span&gt;&lt;span class=&quot;actual-price&quot;&gt;$40&lt;/span&gt;
  342. &lt;/div&gt;
  343. &lt;/div&gt;
  344. &lt;/div&gt;
  345. &lt;/section&gt;
  346. &lt;footer&gt;
  347. &lt;/footer&gt;
  348. &lt;script src=&quot;../js/nav.js&quot;&gt;&lt;/script&gt;
  349. &lt;script src=&quot;../js/home.js&quot;&gt;&lt;/script&gt;
  350. &lt;script src=&quot;../js/footer.js&quot;&gt;&lt;/script&gt;
  351. &lt;/body&gt;
  352. &lt;/html&gt;

when i run localhost:3000 html does load but css doesnt
what should i do?
i am doing trying to recreate tutorial, but the author doesnt have this problem, nor somebody in the comments, this is the link of the creator https://www.youtube.com/watch?v=yYSfOe0QBOk&amp;list=PLqm86YkewF6S45smPYeNv01aFFKWZSgYD&amp;index=2&amp;ab_channel=ModernWeb

答案1

得分: 1

使用 app.use(express.static(staticPath)); 声明为静态目录的目录不应该是 js 目录。最好创建一个名为 public 的目录，将其中的 css 和 js 目录移动到该目录中。

之后，您的 CSS 文件的 URL 将是 /css/xxxx.css，而您的 JS 文件的 URL 将是 /js/xxxx.js。

请告诉我们 ^^

英文:

The directory that you declare as static with app.use(express.static(staticPath)); shouldn't be the js directory. You'd better create a directory like public in which you move your css and js directories.

After that, your url for your css files will be /css/xxxx.css and for your js files /js/xxxx.js

Let us know ^^

huangapple
  • 本文由 发表于 2023年7月10日 22:06:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76654560.html
  • css
  • express
  • html
  • javascript
  • npm
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定