0
NodeJsアプリケーションで動作しなかったCSSファイルに問題があります。ここに私のフォルダの内容です。NodeJSでCSSが動作しない
+ 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>
devツールの[ネットワーク]タブでコンテンツを読み込むとチェックしましたか？あなたのCSSが読み込まれていますか？ –
app.use（express.static（path.join（__ dirname、 'public'）））;これを試してください –
あなたのHTMLマークアップを投稿してください – Gintoki