Question

当我正常打开它们时链接文件但是当我在localhost中打开它时，.css文件似乎没有任何效果。

以下是代码：

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

我已经尝试将root文件作为localhost，但仍然没有。这里有什么帮助吗？

文件结构为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>

Answer 1

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">

Answer 2

尝试这样

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

Answer 3

这应该有效：

 <!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

HTML文件和CSS文件在localhost中无法链接

3 个答案: