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

标签 html css overlay

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

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

主要区别在于我试图将用于卡片/图 block 的图像设置为背景(在 CSS 中完成)，而不是通过 HTML 中的图像。我无法弄清楚我做错了什么，希望有任何见解。还有一种方法可以确认您的 CSS 当前已链接到您的 HTML 文件吗？以下是我当前的输出:

enter image description here

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>

最佳答案

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

嵌套 css 规则只有在你使用像 sass/scss 这样的预处理器时才有效(有一些异常(exception)，比如媒体查询)，但只有在你的 CSS 到达之前处理它才有效浏览器。浏览器理解 css，而不是 sass。在您更加熟悉 CSS 和在浏览器中工作之前，避免使用预处理器可能会有所帮助，因为它增加了一层复杂性。

在浏览器的 developer tools 中使用页面检查器(F12) 将帮助您测试您的 css 是否有效，Firefox 甚至有一个网格检查器可以帮助您使用 css 网格并在屏幕上显示网格线 - layout land youtube channel 有一个关于如何使用它的视频。

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

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

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>

关于html - 使用叠加按钮构建网格图 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56186857/

上一篇：html - 带有 flexbox 的响应式导航栏

下一篇：css - 如何使用带有 selenium 网络驱动程序的 python 将数据发送到此复选框

相关文章：

javascript - AngularJS 中的部分 View

javascript - 设置动画持续时间的时刻

iphone - 有没有办法可以在 iPhone SDK 上制作叠加 View ？

Jquery 工具叠加调用 javascript 函数

php - 在 PHP 中按天对 MySQL 数据进行分组

php - tbody 不允许点击

javascript - 具有滑动悬停效果的导航菜单

php - 可以集成到设计中的电子商务软件？

javascript - 我的 jquery 加载覆盖层并不每次都显示

python - Selenium Python 按文本/样式单击页面上的链接

©2024 IT工具网  联系我们