Создание плиточного макета с помощью CSS

Development | Amber | Комментировать запись

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

В этом мануале мы создадим плиточный макет для раздела Projects нашего сайта. Для этого нужно оформить восемь HTML-контейнеров <div> с помощью CSS классов. Также мы добавим к этим элементам псевдокласс hover, чтобы они меняли цвет, когда пользователь наводит на них курсор. Всю условную информацию в мануале вы можете свободно заменить своей собственной. Методы, которые использованы здесь, можно применить к к любым другим проектам, разработанным на CSS и HTML.

Читайте также: Селекторы классов в CSS

Требования

Чтобы следовать этому мануалу, нужно подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Добавление и оформление заголовка

Для начала добавьте заголовок Projects как новый раздел на странице (убедитесь, что не удалили добавленный вами контент из предыдущих руководств). В файл index.html добавьте следующий фрагмент кода после последнего закрывающего тега </div>:

. . .

<!--Section 3: Projects-->

  <h2 >Projects</h2>

. . .

Первая строка этого фрагмента – это комментарий для обозначения третьего раздела веб-сайта. Комментарий используется для сохранения примечаний к вашему коду и не отображается браузером (посетители сайта смогут найти его только в исходном коде страницы). Во второй строке находится элемент заголовка <h2>, а в нем – текст заголовка Projects.

Затем нам нужно изменить стиль заголовка, создав класс section-heading. Откройте файл styles.css, скопируйте и вставьте следующий фрагмент кода в конец файла:

. . .

/*  Section 3  */

.section-heading {

  text-align:center;

  color:#102C4E;

  margin-top: 150px;

  margin-bottom:70px;

  font-size: 35px;

}

Этот фрагмент кода определяет стиль класса section-heading.

Читайте также: Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов

Затем мы применим новый класс section-heading к заголовку Projects в файле HTML. Вернитесь в файл index.html и добавьте класс в элемент HTML:

<!--Section 3: Projects—>

  <h2 class="section-heading">Projects</h2>

Сохраните файлы и загрузите вашу страницу в браузере. Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему мануалу Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).

Теперь заголовок должен располагаться по центру страницы, а его размер и цвет должны быть скорректированы согласно стилю сайта.

Добавление и стилизация плиточных блоков

Теперь нужно добавить восемь блоков – каждый для отдельного проекта – под заголовком нового раздела. Для начала создадим CSS класс, который оформит контейнеры <div> таким образом, чтобы четыре из них помещались в ряд.

Вернитесь к файлу styles.css и добавьте следующий фрагмент кода в конец документа:

. . .

/* Sizing for Project Containers  */

.column-4 {

  float: left;

  width: 21%;

  padding: 10px;

  margin:20px;

  height: 250px;

}

В этом фрагменте кода мы определили класс column-4 и указали значения, которые позволяют отображать на странице четыре столбца в ряд:

• Объявление float: left перемещает элемент в левую сторону контейнера, внутри которого он находится, позволяя окружающему контенту (в данном случае другим блокам проекта) обтекать его по правой стороне.
• Объявление width: 21% устанавливает ширину элемента. Она равна 21% ширины контейнера, которым в данном случае является веб-страница. Если вы хотите, чтобы размер элемента изменялся в соответствии с размером контейнера, в котором он расположен, лучше устанавливать размеры (например, ширину) в процентах, а не в пикселях. Обратите внимание: динамическое определение размеров может оказаться сложным процессом – существует несколько методов создания отзывчивых элементов, которые можно реализовать после создания основы в CSS.

Читайте также: Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов

Затем мы создадим класс для каждого из восьми блоков (чтобы мы могли стилизовать их по-разному), а также добавим изображения к первому и последнему блоку. Для начала сохраните одно или два изображения, которые вы хотите использовать на вашем сайте, в папке images.

Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите CTRL и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. В нашем нануале мы условно назовем изображения project-left.jpeg и project-right.jpeg.

Чтобы создать класс для каждого блока, добавьте следующий фрагмент кода в конец файла styles.css:

. . .

/* Color and Images for Project Containers  */

.project-1 {

  background: url('../images/project-left.jpeg');

  background-size: cover;

}

.project-2 {

  background-color:white;

}

.project-3 {

  background-color:#209BFF;

}

.project-4 {

  background-color:#112d4e;

}

.project-5 {

  background-color:#F9F7F7;

}

.project-6 {

  background-color:#209BFF;

}

.project-7 {

    background-color:#ffffff00;

}

.project-8 {

  background: url('../images/project-right.jpeg');

  background-size: cover;

}

Убедитесь, что вы сохранили свои изображения в папке images и указали правильный путь к файлу в наборах правил для класса project-1 и project-8.

Давайте сделаем небольшую паузу, чтобы просмотреть только что написанный код. В наборах правил для классов project-1 и project-8 мы добавили фоновое изображение, указали пути к этим файлам и объявили, что фоновое изображение должно быть подогнано так, чтобы покрыть весь элемент (значение cover).

В наборах правил для блоков 2-7 с помощью цветовых кодов HTML мы указали разные фоновые цвета. Обратите внимание, фон для project-7 мы сделали прозрачным, но вы можете изменить его по своему желанию. В целом вы можете поэкспериментировать с различным фоновыми изображениями и цветами самостоятельно, если хотите.

Затем нам нужно добавить набор правил, который изменяет размер шрифта и расположение текста, который будет добавлен в эти блоки. Вставьте следующий набор правил в конец файла styles.css:

. . .

.project-text {

  text-align:center;

  font-size:50px;

}

Сохраните файл styles.css. Теперь добавьте контейнеры <div> в HTML-документ и стилизуйте их с помощью только что определенных CSS-классов. Вернитесь в файл index.html и вставьте следующий фрагмент кода под заголовком Projects:

. . .

<div class="column-4 project-1">

</div>

<div class="column-4 project-2">

  <h2 class="project-text">WEB <br>DESIGN</h2>

</div>

<div class="column-4 project-3">

  <h2 class="project-text">CHAT <br>BOTS</h2>

</div>

<div class="column-4 project-4">

  <h2 class="project-text">GAME <br> DESIGN</h2>

</div>

<div class="column-4 project-5">

  <h2 class="project-text">TEXT <br> ANALYSIS</h2>

</div>

<div class="column-4 project-6">

  <h2 class="project-text">JAVA <br> SCRIPT</h2>

</div>

<div class="column-4 project-7">

  <h2 class="project-text">DATA <br> PRIVACY</h2>

</div>

<div class="column-4 project-8">

</div>

Сохраните файл index.html и перезагрузите его в браузере. После этого на вашей странице под заголовком Projects появится 8 одинаковых блоков, первый и последний – с изображениями, а остальные – с заголовками (WEB DESIGN, CHAT BOTS и так далее).

Согласно нашим файлам, на странице должно быть две строки по четыре блока, каждый из которых оформлен согласно присвоенным им классам column-4 и project-x. Весь текстовый HTML контент в блоках оформлен согласно присвоенному ему классу project-text.

Мы также добавили элемент разрыва строки HTML (<br>), чтобы создать разрыв между двумя словами в каждом поле. Как мы уже говорили, вы можете изменить этот текст сейчас или позже, если хотите. Вы также можете использовать элемент гиперссылки HTML <a>, чтобы связать этот текст с новыми страницами вашего веб-сайта. Этот элемент мы рассмотрим более подробно в конце этой серии.

Читайте также: Добавление страниц сайта и ссылка на них с помощью HTML

Пора добавить псевдокласс, чтобы блоки меняли цвет, когда пользователь наводит на них курсор.

Изменение цвета элемента при взаимодействии с пользователем

Чтобы блоки в разделе Projects меняли цвет при наведении на них курсора, нужно добавить псевдокласс к каждому из классов данного раздела сайта.

Как вы, возможно, помните (если читали наш мануал по псевдоклассам), чтобы создать псевдокласс, после имени класса, который вы пытаетесь изменить, нужно поставить двоеточие и указать имя псевдокласса. Следовательно, чтобы добавить псевдокласс :hover к нашим классам, нужно вставить следующие наборы правил в конец файла styles.css:

. . .

/* Hover classes for individual project boxes */

.project-2:hover {

  background-color:#FEDE00;

}

.project-3:hover {

   background-color: #FEDE00;

}

.project-4:hover {

   background-color: #FEDE00;

}

.project-5:hover {

   background-color: #FEDE00;

}

.project-6:hover {

   background-color: #FEDE00;

}

.project-7:hover {

   background-color: #FEDE00;

}

В этом фрагменте кода мы создали классы hover для шести из восьми классов project. Класс hover изменяет цвет элемента при наведении на него курсора на цветовой код HTML #FEDE00. Обратите внимание, мы добавили класс hover только в блоки, содержащие текст (блоки с фоновым изображением остались без изменений).

Сохраните файл styles.css и перезагрузите index.html в браузере. Убедитесь, что псевдокласс hover работает, для этого наведите курсор на блоки. При этом они должны менять цвет.

Заключение

Мы добавили на наш тестовый сайт 8 блоков с HTML-контентом с помощью CSS-классов и добавили псевдокласс hover, который изменит их внешний вид при наведении на них курсора. Вы можете самостоятельно поэкспериментировать с этими методами, попробовать изменить объявления стилей в классах или размер и количество блоков в макете страницы.