“消除所有其他因素，而剩下的因素必须是真理。”

Question

我正在开发一个项目，我基本上复制并粘贴了一些我之前知道有用的代码。唯一的区别是现在，index.html和index.css位于不同的文件夹中。正在应用CSS，但底部的ID不是出于某种原因。不过，如果你在这个网站上预览它，那就完全没问了。

/*
font-family: 'Dosis', sans-serif;
font-family: 'Chewy', cursive;

HEX: #fff2df
HEX: #d9ad7c
HEX: #a2836e
HEX: #674d3c
*/

body {
  font-family: 'Dosis', sans-serif;
  background: #fff2df;
}


/* Matan's Website */

h1 {
  font-family: 'Chewy', cursive;
  font-size: 65px;
  text-align: center;
}


/* Line */

hr {
  width: 600px;
  border-style: solid;
  margin-top: -15px;
}


/* All Boxes */

ul {
  overflow: hidden;
  text-align: center;
}

li {
  float: center;
  text-align: center;
  display: inline-block;
}

a {
  background-color: #000;
  border-radius: 20px;
  z-index: 100;
}

.buttons {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.links {
  font-size: 37.5px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}


/* Individual Boxes */

#word {
  background-image: url('Pictures/word.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  padding: 162.75px 119.25px;
  margin: 65px 75px 0px 0px;
  color: #fff;
  transition: all 0.5s ease-out;
}

#word:hover {
  padding: 189.875px 139.125px;
  transition: all 0.5s ease-out;
  opacity: 0.8;
  margin-right: 63.4px;
  margin-left: -28.125px;
  margin-top: 37.875px;
}

#pwpoint {
  background-image: url('Pictures/powerpoint.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 162.75px 69.75px;
  margin: 65px 75px 0px 0px;
  color: #fff;
  transition: all 0.5s ease-out;
}

#pwpoint:hover {
  padding: 189.875px 81.375px;
  transition: all 0.5s ease-out;
  opacity: 0.8;
  margin-right: 63.275px;
  margin-left: -11.5px;
  margin-top: 37.875px;
}

#ptshop {
  background-image: url('../Pictures/photoshop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 162.75px 99px;
  margin: 65px 0px 0px 0px;
  color: #fff;
  transition: all 0.5s ease-out;
}

#ptshop:hover {
  padding: 189.875px 115.5px;
  transition: all 0.5s ease-out;
  opacity: 0.8;
  margin-right: -28.125px;
  margin-left: -4.9px;
  margin-top: 37.875px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="../index.css">
  <link href="https://fonts.googleapis.com/css?family=Chewy|Dosis" rel="stylesheet">
</head>

<body>
  <h1>My Portfolio</h1>
  <hr>
  <div class="allbuttons">
    <ul class="buttons">
      <li><a class="links" id="word" href="Word/index.html">Word</a></li>
      <li><a class="links" id="pwpoint" href="Powerpoint/index.html">Powerpoint</a></li>
      <li><a class="links" id="ptshop" href="Photoshop/index.html">Photoshop</a></li>
      <li><a class="links" id="other" href="Other/index.html">Other</a></li>
    </ul>
  </div>
</body>

</html>

没有ID可用，但CSS文件已正确链接并正确显示。任何想法为什么会这样？

Answer 1

“消除所有其他因素，而剩下的因素必须是真理。”

作为夏洛克·福尔摩斯frequently pointed out，在寻找真相时（在这种情况下，解决方案），我们必须首先消除这种混乱。

Relative vs. Absolute URLs在准确时很方便，但a variety of reasons容易出错。

整洁的工作空间非常宝贵;在编写任何项目时，创建并维护a controlled and suitable space以帮助避免和诊断可能出现的问题。

...

其他温和的光顾陈词滥调可根据要求提供; - ）

我的ID未被应用

1 个答案:

“消除所有其他因素，而剩下的因素必须是真理。”