HTMLファイルとCSSファイルはローカルホストでリンクされません

通常開いたときにファイルがリンクされますが、ローカルホストで開いたときに.cssファイルは効果がないようです。ここでHTMLファイルとCSSファイルはローカルホストでリンクされません

はコードです：

<link rel="stylesheet" type="text/css"> 
<link rel="stylesheet" href="bootstrap.min.css"> 
<link rel="stylesheet" href="random.css">

私はあまりにも、まだ何もローカルホストとしてファイルのルートを試してみました。どんな助け？

ファイル構造は、C：/Users/Kieran/Desktop/xampp/htdocs/portfolio/random.css ファイル構造は、C：/Users/Kieran/Desktop/xampp/htdocs/portfolio/random.html

HTMLファイルは同じ場所にあります。

全体のHTMLコード：

<!DOCTYPE html> 
<html> 
<head> 
<title>My Website</title> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="random.css"> 
</head> 

<body> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="main.html">Kieran Lythgoe Portfolio</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="main.html">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 


<div class="panel panel-primary" id="panel1" style="width: 15%";> 
     <div class="panel-heading">Image Split</div> 
     <div class="panel-body">An image split into difference sections with different links</div> 
     <div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='imagesplit.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div> 

    </div> 

<div class="panel panel-primary" id="panel2" style="width: 15%";> 
     <div class="panel-heading">Boolean</div> 
     <div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div> 
     <div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='boolean.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div> 

    </div> 

<div class="panel panel-primary" id="panel3" style="width: 15%";> 
     <div class="panel-heading">Random</div> 
     <div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div> 
     <div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='other.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div> 

    </div> 

</body> 

</html>

出典

2017-10-29 Kieran Lythgoe

あなたは完全なファイル構造をしてください追加することはできますか？ – Edric

ファイルはサーバーから正常に取得されていますか？ –

type="text/css"属性は<link>要素の一部である必要があります：

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="random.css">

そして、最初の行を削除<link rel="stylesheet" type="text/css">

出典

2017-10-29 14:03:19

この

ようにそれを試してみてください

<link rel="stylesheet" type="text/css" href="mystyle.css">

出典

2017-10-29 14:04:22

これらの方法のどれも残念ながら働いていません。私のCSSファイルの前に '/'を置くと変更されますが、それでも私のCSSには対応しません。 –

これは動作するはずです：

<!DOCTYPE html> 
<html> 
<head> 
<title>My Website</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="random.css"> 
</head> 

<body> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="main.html">Kieran Lythgoe Portfolio</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="main.html">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 


<div class="panel panel-primary" id="panel1" style="width: 15%";> 
     <div class="panel-heading">Image Split</div> 
     <div class="panel-body">An image split into difference sections with different links</div> 
     <div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='imagesplit.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div> 

    </div> 

<div class="panel panel-primary" id="panel2" style="width: 15%";> 
     <div class="panel-heading">Boolean</div> 
     <div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div> 
     <div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='boolean.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div> 

    </div> 

<div class="panel panel-primary" id="panel3" style="width: 15%";> 
     <div class="panel-heading">Random</div> 
     <div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div> 
     <div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='other.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div> 

    </div> 

</body> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</html>

ここrandom.cssせずに結果である： https://i.imgur.com/eaTi03U.png

出典

2017-10-29 14:52:49

これはどちらもうまくいきませんでしたが、私はそれがxamppと何か関係するかもしれないと思います。 –

コードをそのままコピーして、同じフォルダに入れて、index.htmlという名前を付けてダブルクリックしてください。 –

@KieranLythgoeブートストラップのバージョンに問題があると思います。コードを編集してからもう一度やり直してください。 –

HTMLファイルとCSSファイルはローカルホストでリンクされません

答えて

関連する問題