Question

我正在尝试为自己的工作建立一个投资组合网站，并同时学习HTML，CSS和js。我正在尝试重新创建在此website上找到的投资组合图块列表。

我正在尝试使用CSS网格重新创建它。我正在关注此youtube tutorial。

主要区别是我试图将用于卡片/图块的图像设置为背景（在CSS中完成），而不是通过HTML中的图像。我无法弄清楚自己在做什么错，请多加理解。还有没有办法确认您的CSS当前已链接到HTML文件？以下是我当前的输出：

HTML代码：

body,
html {
  height: 100%;
}

section {
  margin: 100px;
  font-family: "Montserrat";
}

h1 {
  margin: 5rem;
}

.portfolio {
  width: 300px;
  height: 10vh;
  align-items: center;
  margin: 10%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  .AutoFP {
    background: url(http://freeaussiestock.com/free/Victoria/Melbourne/slides/fed_square.jpg) center no-repeat;
    background-size: cover;
  }
  .fpl-1 {
    background: url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat;
    background-size: cover;
  }
  .fpl-3 {
    background: url(https://s0.geograph.org.uk/geophotos/03/25/64/3256477_ec7d83ab.jpg) center no-repeat;
    background-size: cover;
  }
  .fpl-4 {
    background: url(http://freeaussiestock.com/free/Victoria/Melbourne/slides/melbourne_museum_roof.jpg) center no-repeat;
    background-size: cover;
  }
  .card:hover {
    opacity: 0.4;
  }
}

<DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style.scss">

    <title>Portfolio Tiles</title>
  </head>

  <body>
    <!-- Where the tiles will go shocasing work -->
    <section class="portfolio" id="portfolio">
      <!-- Tile 1 -->
      <div class="AutoFP card">
        <h3 class="card-heading">Automated FlightPlanning</h3>
        <span>Electron, Python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>
      <!-- Tile 2 -->
      <div class="fpl-1">
        <h3 class="card-heading card">Flight Plan 1</h3>
        <span>DJIFlightplanner python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>
      <!-- Tile 3 -->
      <div class="fpl-2 card">
        <h3 class="card-heading">Flight Plan 2</h3>
        <span>DJIFlightplanner python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>
      <!-- Tile 4 -->
      <div class="fpl-3 card">
        <h3 class="card-heading">Flight Plan 3</h3>
        <span>DJIFlightplanner python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>

    </section>
  </body>

Answer 1

如@cristian mocanu所述，您的CSS中存在语法错误。

嵌套css规则仅在使用诸如sass / scss之类的预处理器时有效（媒体查询等少数例外），但是仅当您在CSS进入CSS之前进行处理时，该规则才有效浏览器。浏览器了解css，而不了解sass。避免使用预处理程序，直到您对css和在浏览器中更熟悉之前可能会有所帮助，因为这会增加一层复杂性。

在浏览器的developer tools（F12）中使用页面检查器将帮助您测试CSS是否有效，Firefox甚至还具有一个网格检查器，可帮助您使用CSS网格并在屏幕上显示网格线- layout land YouTube频道上有一段有关如何使用它的视频。

您还可以使用开发人员工具的“网络”标签来查看页面上正在加载哪些文件（根据浏览器的不同，名称可能不同，我认为在chrome中，它称为“来源”）。

我对代码进行了一些编辑-使用媒体查询来设置网格中的列数可能比使用自动拟合更简单。 div中不一致地应用了“ card”类，因此不透明性在每个图块上均不起作用。

body,
html {
  height: 100%;
}

section {
  margin: 100px;
  font-family: "Montserrat";
}

h1 {
  margin: 5rem;
}

.portfolio {
  width: 300px;
  height: 10vh;
  align-items: center;
  margin: 10%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  grid-template-columns: 1fr 1fr;
 }
.portfolio .AutoFP {
  background: url(http://freeaussiestock.com/free/Victoria/Melbourne/slides/fed_square.jpg) center no-repeat;
  background-size: cover;
}
.portfolio .fpl-1 {
  background: url(https://media.defense.gov/2013/Jul/16/2000032379/-1/-1/0/130628-F-DQ639-002.JPG) center no-repeat;
  background-size: cover;
}
.portfolio .fpl-3 {
  background: url(https://s0.geograph.org.uk/geophotos/03/25/64/3256477_ec7d83ab.jpg) center no-repeat;
  background-size: cover;
 }
.portfolio .fpl-4 {
  background: url(http://freeaussiestock.com/free/Victoria/Melbourne/slides/melbourne_museum_roof.jpg) center no-repeat;
  background-size: cover;
 }
.portfolio .card:hover {
  opacity: 0.4;
}

 <body>
    <!-- Where the tiles will go shocasing work -->
    <section class="portfolio" id="portfolio">
      <!-- Tile 1 -->
      <div class="AutoFP card">
        <h3 class="card-heading">Automated FlightPlanning</h3>
        <span>Electron, Python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>
      <!-- Tile 2 -->
      <div class="fpl-1 card">
        <h3 class="card-heading">Flight Plan 1</h3>
        <span>DJIFlightplanner python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>
      <!-- Tile 3 -->
      <div class="fpl-2 card">
        <h3 class="card-heading">Flight Plan 2</h3>
        <span>DJIFlightplanner python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>
      <!-- Tile 4 -->
      <div class="fpl-3 card">
        <h3 class="card-heading">Flight Plan 3</h3>
        <span>DJIFlightplanner python</span>
        <button class="card-btn" id="AutoFP">Learn More</button>
      </div>

    </section>
  </body>

Answer 2

在CSS中，必须在开始另一个类之前结束一个类的定义。在CSS的grid-template-columns行之后，您必须使用'}'，并在末尾删除'}'。

使用覆盖按钮构建网格图块

2 个答案: