Question

我在这里链接的代码可以使用，但不能在我的Atom计算机上运行。是因为我将它链接到本地而不是服务器？

我制作了两个单独的页面，并在顶部添加了链接以在它们之间翻转。在这两个页面上，我使用的是我复制和粘贴的相同CSS，但是在索引页面上链接不起作用，而服务页面它们工作得很好？

.header{
  display: block;
  background-image:  url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-filter: brightness(130%);
  min-height: 70vh;
  overflow: hidden;
}

.menu{
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.header ul li a:hover{
    background: white;
    color: gray;
}


.header ul li{
  float: left;
  list-style: none;
  padding: 10px 10px;
}

.menu ul li a{
  text-decoration: none;
  padding: 10px 10px;
  margin: 0;
  text-align: center;
  font-size: 50px;
  display: flex;
  transition: all .5s ease;
  border-radius: 4px;
  color: Blue;
}

.title{
  clear: both;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: auto;
}

.title h1{
  background: -webkit-linear-gradient(left, #0d78f7,navy);
  font-size: 40px;
 background: -webkit-linear-gradient(left, #0d78f7, navy);
 background: -o-linear-gradient(left, #0d78f7, navy);
 background: -moz-linear-gradient(left, #0d78f7, navy);
 background: linear-gradient(left, #0d78f7, navy);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display:flex;
justify-content: center;

}

<div class="header">
      <ul class="menu">
        <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/index.html">Home</a></li>
        <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/services.html">Services</a></li>
        <li>Contact</li>
      </ul>
      <div class="title">
        <h1>ONLOOKER DESIGNS</h1>
      </div>
    </div>

Answer 1

试试这个：

<div class="header">
      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li>Contact</li>
      </ul>
      <div class="title">
        <h1>ONLOOKER DESIGNS</h1>
      </div>
</div>

，如果您将所有三个文件放在同一目录中。

Answer 2

你应该这样试试：

＆＃13;

.header{
  display: block;
  background-image:  url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-filter: brightness(130%);
  min-height: 70vh;
  overflow: hidden;
}

.menu{
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.header ul li a:hover{
    background: white;
    color: gray;
}


.header ul li{
  float: left;
  list-style: none;
  padding: 10px 10px;
}

.menu ul li a{
  text-decoration: none;
  padding: 10px 10px;
  margin: 0;
  text-align: center;
  font-size: 50px;
  display: flex;
  transition: all .5s ease;
  border-radius: 4px;
  color: Blue;
}

.title{
  clear: both;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: auto;
}

.title h1{
  background: -webkit-linear-gradient(left, #0d78f7,navy);
  font-size: 40px;
 background: -webkit-linear-gradient(left, #0d78f7, navy);
 background: -o-linear-gradient(left, #0d78f7, navy);
 background: -moz-linear-gradient(left, #0d78f7, navy);
 background: linear-gradient(left, #0d78f7, navy);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display:flex;
justify-content: center;

}

＆＃13;

<div class="header">
      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li>Contact</li>
      </ul>
      <div class="title">
        <h1>ONLOOKER DESIGNS</h1>
      </div>
    </div>

＆＃13;

Answer 3

您的href属性包含一个使用“文件”协议的链接，更具体地说，它指向您自己的本地硬盘。

其他人将无法访问您的本地文件。

现在，如果您希望文件在本地访问您的文件的每台计算机上都能正常工作，我建议您使用相对文件路径而不是绝对路径。

理想情况下如下：

<a href="index.html">

我的菜单栏链接无法在我的索引页面上运行

3 个答案: