CSS funktioniert nicht mit NodeJS

Ich habe ein Problem mit der CSS-Datei, die in meiner NodeJs-Anwendung nicht funktioniert hat. Hier ist mein Ordner Inhalt.CSS funktioniert nicht mit NodeJS

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

Und unten ist mein app.js

Datei

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)

gibt es etwas, was ich falsch mache, denn ich zu NodeJS neu bin.

EDIT: Unten Hier ist meine 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>

Quelle

2016-03-21 charles okojie

Haben Sie überprüft, wenn Sie den Inhalt im Netzwerk Registerkarte des Dev-Tools laden? ist dein CSS geladen? –

app.use (express.static (Pfad.join (__ dirname, 'public'))); versuchen Sie diese –

post Ihre HTML Markup bitte – Gintoki

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

nur macht Eine Reihe von statischen Dateien, die über URLs verfügbar sind. Sie werden nicht vom Browser für Sie angefordert.

Sie müssen das Stylesheet explizit laden.

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

Quelle

2016-03-21 10:24:49 Quentin

CSS funktioniert nicht mit NodeJS

Antwort

Verwandte Themen