时间戳

首页 > 解决方案 > 使用叠加按钮构建网格图块

html - 使用叠加按钮构建网格图块

问题描述

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

我正在尝试使用 CSS 网格来重新创建它。我正在关注这个youtube 教程。

主要区别是我试图将用于卡片/平铺的图像设置为背景（在 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>

标签： htmlcssoverlay

解决方案

正如@cristian mocanu 所指出的，您的CSS 中有语法错误。

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

在浏览器的开发者工具(F12) 中使用页面检查器将帮助您测试您的 css 是否有效，Firefox 甚至有一个网格检查器可以帮助您使用 css 网格并在屏幕上显示网格线 -布局土地youtube 频道有一个关于如何使用它的视频。

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

我稍微编辑了您的代码 - 使用媒体查询来设置网格中的列数而不是使用自动调整可能更简单。“卡片”类在您的 div 中的应用不一致，因此不透明度不适用于每个图块。

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>

推荐阅读