Sti*_*ijn 0 css node.js express
我想通过 node.js 使用 localhost 访问我的 .html。我为此使用了 express 框架。我的 .html 包含一些 CSS，但这不会加载 html 文件。
代码：
var express = require('express');
var app = express();
app.use(express.static('public'));
app.engine('.html', require('ejs').renderFile);
app.get('/', function(req, res) {
res.render('FrontPage.html');
});
app.listen(3000, function(){
console.log("listening to 3000");
})
HTML：
<head>
<link rel="stylesheet" type="text/css" href="./css/FrontPageCSS.css">
</head>
<body style="background-image:url(./img/bg.jpg)">
<div id="header">
<a href="./frontPage.html"><img src="./img/Logo.png" height="5%" width="5%" alt="logo"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./script/FrontPageJS.js"></script>
</div>
<div id="buttonWrapper">
<div id="first" class="first">
This is my first button
</div>
<div id="second" class="second">
This is my second button
</div>
</div>
CSS：
div#header{
text-align: center;
}
div#buttonWrapper{
text-align: center;
}
div.madeBefore, div.madeNotBefore{
border-radius: 25px;
background: -webkit-linear-gradient(left top, #ffc300 , #ff8300);
background: -o-linear-gradient(bottom right, #ffc300, #ff8300);
background: -moz-linear-gradient(bottom right, #ffc300, #ff8300);
background: linear-gradient(to bottom right, #ffc300 , #ff8300);
width: 500px;
height: 425px;
margin-right: 50px;
padding:50px;
padding-top: 250px;
padding-bottom: 0px;
display: inline-block;
vertical-align: top;
text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2);
color: #B36103;
font-size: 60px;
text-align: center;
}
div.madeNotBefore{
margin-right: 0px;
}
div.madeBefore:hover, div.madeNotBefore:hover{
background: -webkit-linear-gradient(left top, #ff7600 , #e96c00);
background: -o-linear-gradient(bottom right, #ff7600, #e96c00);
background: -moz-linear-gradient(bottom right, #ff7600, #e96c00);
background: linear-gradient(to bottom right, #ff7600 , #e96c00);
}
如何确保 CSS 与 .html 一起发送？
添加这个：
var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
创建文件夹 public，将 css 文件放入你的 html 文件中：
<link rel="stylesheet" type="text/css" href="/FrontPageCSS.css" />