gpt4 book ai didi

javascript - CSS 不适用于 NodeJS

转载 作者:太空宇宙 更新时间:2023-11-04 02:33:21 25 4
gpt4 key购买 nike

我的 CSS 文件有问题,它无法在我的 NodeJs 应用程序中运行。这是我的文件夹内容。

 + controllers
+ models
+ node_modules
- public
index.html
style.css
- views
app.js
package.json

下面是我的 app.js 文件

   var express = require('express');
var path = require('path');

var app = express();
app.use(express.static(__dirname + '/views'));
app.use('/static', express.static(__dirname + '/public'));

app.listen(9000)

我是 nodeJS 的新手,有什么地方做错了吗?

编辑:下面是我的 index.html

  <!DOCTYPE html>
<head>
<title>Brandme - Internet Marketing Agency</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic' rel='stylesheet' type='text/css'>

    <nav class="menubar" id="menubar">
<div class="listItems">
<div class="listItem">Personal</div>
<div class="listItem">Business</div>
<div class="listItem">Career</div>
<div class="listItem">Sign In</div>
<div class="listItem">Learn More</div>
<div class="listItem"><span class="glyphicon glyphicon-align-justify"></span></div>
</div>
</nav>
<div id="container">
<div class="untop">
<div id="untop_align">
<div id="div">Gaining global recognition has never been this easy</div>
<div style="font-size: 16px; line-height: 25px; margin-top: 30px; font-weight: 500">Brandme is a digital marketing platform that helps promote your business or skill to a large base</div>
<div class="sign_btn"><button class="btn">Start your journey here</button></div>
</div>
</div>
</div>
<div class="container-cover-cover">
<div class="container-cover">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="sample">
<div class="container">
<div class="row">
<div class="col-md-2"><img src ="" class="imagesfaces" style="display: inline-block;position: relative;"></div>
<div class="col-md-10">
<div class="names-samples"></div>
<div class='positions'></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div id="side">
<div id="sideDescription">

</div>
<div id="sideAuthor">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var collapse = function(){
$(document).ready(function(){
$(window).resize(function(){
var width = $(window).width();
if(width < 700){
$('#menubar').hide();
}
else{
$('#menubar').show();
}
})
})
}

var imageSize = function(){
$(".imagesfaces").width("80");
}
collapse();
imageSize()
</script>

最佳答案

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

只是使一堆静态文件可通过 URL 访问。它不会让浏览器为您请求它们。

您需要显式加载样式表。

<link rel="stylesheet" href="/static/style.css">

关于javascript - CSS 不适用于 NodeJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36127465/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com