个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 15:06:39 25 4
gpt4 key购买 nike

我正在尝试为自己建立一个作品集网站，同时学习 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/

25 4 0
文章推荐： swift - 如何将 Codable 协议(protocol)用于具有其他枚举作为关联值的枚举(嵌套枚举)
文章推荐： ios - 滚动 UITableView 与渐变困惑
文章推荐： swift - 核心数据轻量级迁移 Xcode 崩溃
文章推荐： ios - Coredata 中的关系错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com