HTML 不想在第二个 html 文件中加载 CSS答案

【问题标题】：HTML does not want load CSS in second html fileHTML 不想在第二个 html 文件中加载 CSS
【发布时间】：2018-06-16 00:46:07
【问题描述】：

我正在做一个小项目。到目前为止一切都很顺利，但出于某种原因，当我制作第二页时，它只会加载 CSS 的一部分（直到日历为止）。我尝试将它放在另一个 CSS 文件中，并将这两个文件链接到 HTML 文件，这可行，但我希望将所有 CSS 放在一个文件中。

你能帮帮我吗？

这是我的代码：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MyLoveLifeFamily</title>
    <link rel="icon" href="./assets/pictures/family.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>

    <div class="header">
      <div class="nav">
        <div class="navWrapper">
          <img src="./assets/pictures/family.ico" alt="Family Icon">
          <div class="right">
            <a href="index.html" id="homepage">Thuispagina</a>
            <a href="calendar.html" id="calendar">Kalender</a>
            <a href="photoalbum.html="photoalbum">Foto album</a>
            <a href="lists.html" id="lists">Lijstjes</a>
            <a href="recipes.html" id="recipes">Gerechten</a>
          </div>
        </div>
      </div>

      <div class="headerWrapper">
        <h1>Volg ons leven op deze website!</h1>
      </div>

    </div>

    <div class="timeline" id="timeline">
      <div class="timelineWrapper">
        <h3><a href="#timeline">Tijdlijn</a></h3>
        <div class="timelinegrid">
          <img src="./assets/pictures/family_pic.jpg">
          <p>Zeeland - 2018</p>
          <p>Welkom Tuur in de familie - 11/01/2018</p>
          <img src="./assets/pictures/tuur.jpg">
          <img src="./assets/pictures/verjaardag-marie-2017.jpg">
          <p>Verjaardag Marie - 2017</p>
          <p>Verjaardag Eline - 2016</p>
          <img src="./assets/pictures/verjaardag-eline-2016.jpg">
        </div>
      </div>
    </div>

  </body>
</html>

日历.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MyLoveLifeFamily</title>
    <link rel="icon" href="./assets/pictures/family.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>

  <div class="nav">
    <div class="navWrapper">
      <img src="./assets/pictures/family.ico" alt="Family Icon">
      <div class="right">
        <a href="index.html" id="homepage">Thuispagina</a>
        <a href="calendar.html" id="calendar">Kalender</a>
        <a href="photoalbum.html" id="photoalbum">Foto album</a>
        <a href="lists.html" id="lists">Lijstjes</a>
        <a href="recipes.html" id="recipes">Gerechten</a>
      </div>
    </div>
</div>

<div class="calendar">
  <div class="calendarWrapper">
    <h3>Kalender</h3>
    <div class="cal">
      <!-- CalendarLink -->
    </div>
  </div>
</div>

style.css

@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  font-family: 'Oswald', sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header */

.header {
  background-image: url(assets/pictures/hero_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 90vh;
  max-width: 100%;
}

.nav {
  width: 100%;
  height: 100px;
}

.navWrapper {
  width: 85%;
  margin: auto;
}

.navWrapper img {
  height: 35px;
  padding-top: 32.5px;
}

.right {
  padding-top: 32.5px;
  float: right;
}

#homepage, #calendar, #photoalbum, #lists, #recipes {
  color: #000;
  font-weight: bold;
  font-size: 16px;
  margin-right: 35px;
  letter-spacing: 0.6px;
}

.headerWrapper {
  padding-top: 235px;
}

.headerWrapper h1 {
  font-size: 8vw;
  font-weight: bold;
  color: #4A4A4A;
  text-align: center;
  letter-spacing: 3.33px;
}

/* Timeline */

.timeline {
  width: 100%;
}

.timelineWrapper {
  width: 85%;
  padding-top: 25px;
  margin: auto;
  padding-bottom: 75px;
}

.timelineWrapper h3 {
  font-size: 40px;
  color: #4A4A4A;
  letter-spacing: 2px;
  font-weight: bold;
}

.timelinegrid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 500px 500px;
  grid-auto-rows: auto auto;
  grid-gap: 2%;
  align-items: end;
  justify-content: center;
}

.timelinegrid img {
  width: 100%;
}

.timelinegrid p {
  font-size: 30px;
  color: #4A4A4A;
}

/* Calendar */

.calendar {
  width: 100%;
}

.calendarWrapper {
  width: 85%;
  padding-top: 25px;
  margin: auto;
  padding-bottom: 75px;
}

.calendarWrapper h3 {
  font-size: 40px;
  color: #4A4A4A;
  letter-spacing: 2px;
  font-weight: bold;
}

【问题讨论】：

试试ctrl+f5，可能旧的CSS还在浏览器缓存中
@SebastianSpeitel - ctrl+F5 是什么意思？这在我的电脑上没有任何作用。你的意思是“硬重装”/“强制重装”？（在我的 Mac 上是 Shift+Cmd+R）。诸如“在 xyz 系统/qrs 程序中执行强制重新加载，这是Ctrl+F5”这样的短语更有用。我真的不知道 ctrl+f5 会做什么。
是的，我的意思是强制重新加载，抱歉太不具体了。我认识的每个人都知道组合键
@SebastianSpeitel 非常感谢！成功了！

标签： html css

【解决方案1】：

您的 css 有错误。在 .timelinegrid（第 98 行）中，您将 align-items 设置为结束。如果你解决了这个问题，css 应该完全加载。 https://www.w3schools.com/cssref/css3_pr_align-items.asp

【讨论】：