Question

我正在做一个小项目。到目前为止一切进展顺利，但由于某种原因，当我制作第二页时，它只会加载一部分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>

calendar.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;
}

Answer 1

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

HTML不希望在第二个html文件中加载CSS

1 个答案: