Question

我遇到了一些HTML链接无法在本地工作的问题，但是它们确实可以在Codepen上工作。

我有3页；当我在本地运行它们时，链接在前两个中起作用，但在第三个中不显示。第三页链接确实显示在Codepen中。

我已经尝试了一个多星期，试图找出答案。

这是Codepen：

https://codepen.io/Randy3/pen/oPvQoY?editors=1100

这是代码本身

body {
  background-color: ;
}

#Captain {
  border-radius: 40%;
  width: 150px;
  height: 150px;
  transform: rotate(90deg);
  margin: 0px;
}

/* The navbar itself. */

nav ul {
  float: right;
  display: flex;
}

nav ul li {
  list-style: none;
  margin-right: 20px;
  position: relative;
}

h1 {
  text-align: center;
  font-family: Comic Sans MS;
  color: orange;
}

footer a {
  margin-right: 30px;
  position: relative;
  float: right;
}

.figure-img {
  display: grid;
  height: 100%;
  grid-template-columns: repeat( 3, 1fr);
  grid-gap: 20px;
}

img {
  display: block;
  max-width: 240px;
  max-height: 340px;
  height: auto;
  width: auto;
  border: 30%;
}

<!DOCTYPE html>
<html>
<head>
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="../main.css/main.css">
</head>

<body>
  <nav>
    <ul>
      <li> <a href="../profile.html/profile.html"> Home </a> </li>
      <li> <a href="../profile.html/profile.html"> Profile </a> </li>
      <li> <a href="../gallery.html/gallery.html"> Gallery </a> </li>
    </ul>
  </nav>
  <br>

  <h1> The works </h1>
  <br>

  <!--  <section class="figure-img">
    
        <figure class="photo">
          <img src="https://i.pinimg.com/originals/ce/02/38/ce02382eed1d9b50fa50b4f4ee1f9600.jpg" alt="ying yang fish">
        </figure>
    
        <figure class="photo">
          <img src="https://images.pexels.com/photos/18174/reflection-pad-gaming-gamepad.jpg?auto=compress&cs=tinysrgb&h=350" alt="captain">
        </figure>
    
        <figure class="photo">
          <img src="https://images-na.ssl-images-amazon.com/images/I/61gG0598btL._SX342_.jpg" alt="tophat">
        </figure>
    
        <figure class="photo">    
          <img src="https://img3.stockfresh.com/files/b/beaubelle/m/25/686513_stock-photo-love-bird-with-gift-box-vector.jpg" alt="battlelady">
        </figure>
    
        <figure>
          <img src="https://us.123rf.com/450wm/naum100/naum1001510/naum100151000017/45714786-gear-hand-drawn-icon-vector.jpg?ver=6" alt="wiretree">
        </figure>
    
        <figure>
          <img src="https://thumb1.shutterstock.com/mosaic_250/2645560/1123343060/stock-photo-summer-quote-summer-vibes-1123343060.jpg" alt="fox">
        </figure>
      </section>
    -->
  <footer>
    <a href="https://codepen.io/Randy3/"> Codepen </a>
    <a href="https://www.instagram.com/randy_noms/"> Instagram </a>
  </footer>

</body>
</html>

Ps。如果有帮助，则文件夹如下：

桌面：（该文件夹在我的桌面上）基础（桌面上项目文件夹的名称） Gallery.html（html页面的名称） Gallery.html（html文档的名称）

在Codepen上工作的链接在本地不起作用

0 个答案: