Построить сетку с наложенными кнопками - PullRequest
Новая
       17

Построить сетку с наложенными кнопками

0 голосов
/ 17 мая 2019

Я пытаюсь создать собственный веб-сайт для своей работы и одновременно изучать HTML, CSS и js.Я пытаюсь воссоздать листинг портфолио, найденный на этом веб-сайте .

Я пытаюсь использовать сетку CSS, чтобы воссоздать это.Я следую этому руководству YouTube .

Основным отличием является то, что я пытаюсь установить изображение, которое будет использоваться для карты / плитки в качестве фона (сделано в 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>

Ответы [ 2 ]

1 голос
/ 17 мая 2019

Как отметил @cristian mocanu, у вас есть синтаксическая ошибка в вашем CSS.

Вложение правил CSS работает только в том случае, если вы используете препроцессор, такой как sass / scss (с некоторыми исключениями, например, медиа-запросы), но это работает только в том случае, если вы обрабатываете свой CSS до того, как он получитв браузер.Браузеры понимают css, а не sass.Может быть полезно избегать препроцессоров, пока вы не освоитесь с css и не будете работать в браузере, поскольку это добавляет уровень сложности.

Использование инспектора страниц в инструментах разработчика вашего браузера (F12) поможет вам проверить, действителен ли ваш css, Firefox даже имеет инспектор сетки, который помогает вам использовать сетку css и показывает линии сетки на экране - на канале layout land youtube есть видео о том, какиспользовать это.

Вы также можете использовать вкладку сети инструментов разработчика, чтобы увидеть, какие файлы загружаются на страницу (это может иметь другое имя в зависимости от браузера, я думаю, в chrome это называется source?).

Я немного отредактировал ваш код - вам может быть проще использовать медиазапросы для задания количества столбцов в вашей сетке, а не работать с автоподгонкой.Класс "карта" был применен непоследовательно в ваших делениях, поэтому непрозрачность не работает на каждой плитке. 

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>
0 голосов
/ 17 мая 2019

В CSS вы должны завершить определение одного класса перед началом другого.В вашем CSS после строки grid-template-columns вы должны использовать '}' и в конце удалить '}'.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...