Как в html css сделать меню плитку

Обновлено: 28.03.2024

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

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

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

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

Требования

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

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

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

:

Projects

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

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

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

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

Projects

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

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

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

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

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

/* Sizing for Project Containers */

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

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

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

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

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

/* Color and Images for Project Containers */

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

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

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

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

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

WEB
DESIGN

CHAT
BOTS

GAME
DESIGN

TEXT
ANALYSIS

JAVA
SCRIPT

DATA
PRIVACY

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

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

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

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

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

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

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


Статья про ремонт квартиры, про эффективное использование графических ресурсов для современных устройств. От смарт часов до телевизоров на стену.

Сказ о том, как вставлять фоновые повторяющиеся изображения страниц, что бы всем было хорошо.

Ну, что готовы поиграть . Тогда погнали

Вводные

Поступила задача на создание страницы сайта с повторяющимся изображением.

Как будем решать ?


Level 1 Банально примитивный

Самый простой способ, которым воспользуется большое количество верстальщиков это забрать фоновую картинку, всю разом (чаще всего png форматом, поскольку он по умолчанию в Figma и Avocode выставлен) и плюхнуть её блоку через background-image;

(* ну, ты ведь не такой, мой юный читатель ?)

Если разработчик немного опытнее, и знает что jpg сжимается, как правило, лучше png, то фон будет формата jpg.


Level 2 Мне не плевать на производительность

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

Если макет был реализован в PhotoShop, то придется обрезать. Потому что там background задается нераздельным элементом

Пример вынимания повторяющегося фона из Avocode


В Figma это реализовано несколько проще. Хотя это будет зависеть, от того как дизайнер вам создавал этот фон.

*Кто желается поиграться, я оставлю свой пример для скачивания.
В примере два варианта с png и svg паттернами о которых пойдет речь дальше.

Ок, теперь вместо одного большого фонового изображения у нас есть повторяющийся элемент плитки (CSS Tiling).

Отлично, мы молодцы. Вот уже вместо (586кБ) пользователь забирает с сервера всего ( ~24кБ); Profit !


Level 3 Сожму тебя по максимуму

Давайте, подумаем, а можно ли это ещё как-то улучшить положение? Хмм, а рисунок то не сложный, может можно его перегнать в вектор?

И тут спрятался демон соблазна.

Когда этого делать не рационально, или вообще нельзя:

  1. У вас сложный повторяющийся рисунок. Его перерисовка займет n часов, а если вы этой задачей ещё и напряжете дизайнера, то карма у вас точно уменьшиться.
  2. В изображении присутствуют тени или элементы с размытием, и вы не согласны от них отказаться.

* Тут надо объяснить

Если вы экспортируете SVG графику предположим из Figma или Illustrator, a не кодите её сами в редакторе, то скорее всего элементы размытия или тени вам будут вставлены в SVG в формате base64 и это ни как не улучшит ваш performance, поскольку такой файл, по факту, может весить больше аналога jpg формата.

Всегда проверяйте, что вам предлагают. Разуметься некоторые из этих элементов можно создать и кодом, при помощи тегов

Хорошо, давайте создадим SVG и посмотрим что у нас получиться.

* Ради чистоты эксперимента приведенные изображения ни как не сжимались сторонними утилитами и сохранялись в 100% качестве при помощи PhotoShop, Illustrator and Avocode.


Ок, да наша svg оказывается меньше jpg/png исходно варианта.

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

Разница между размерами файлов png/jpg кажется не сильно существенной, и она начинает играть роль, только если рисунок большого размера. (Я предпочитаю png, а фоновый цвет задавать свойством background-color)

Меня несколько смутило, что полученные png/jpg созданные из svg по размеру меньше SVG (даже очищенного от системного мусора средствами SVGO)

Но, потом, до меня дошло, что если захочется уменьшить/увеличить размер плитки фона для мобильных или телевизоров, то это потребует подключение новых паттернов (pattern-bg_min) а SVG останется всё тем же (15кБ — всегда), да и размытия изображения не наблюдается

Это является значимым плюсом, особенно если пользователь смотрит страницу с дорогого телефона с хорошим разрешением, а верстальщик в угоду Google Page Speed ужал всю графику до появления шакалов. Вот она экономия =)

Выглядит, довольно привычно.

Ок, усложняем. Предположим что стили, которые в body будут подключать в критический CSS, давайте тогда отдавать вектор прям в стилях. *дабы не захламлять страницу, возьму другой паттерн, поменьше.

Стало довольно много CSS, и он перестал работать.Плохо

Так, необходимо теперь правильно это всё закодировать. Вставку незакодированного SVG поддерживают только браузеры на Webkit. Спасибо, Юлии Бухваловой, за полезный ресурс кодирования, который нам в этом поможет.

От автора: макеты плитки, вероятно, являются наиболее распространенными макетами, которые мы создаем. Особенно для областей контента. И их никогда не было легче создать благодаря новой магии minmax и auto-fit, которая поставляется с CSS Grid. Lemme покажет вам новый и простой способ верстки идеальных, гибких макетов плитки с помощью CSS Grid.

Плитки повсюду

Вы можете узнать некоторые из них. Практически все страницы в Google Music являются макетами плитки:


Замечания не по теме: Это только мне так кажется, или в самом деле сейчас так много новых ужасных релизов? Я имею в виду, что одна из групп буквально называется «Garbage». Во всяком случае, во многих блогах, как и в моем, посты отображаются в формате плитки:



Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вероятно, вы никогда не видели, чтобы страница с моментами Twitter вызывала раздражение, а это также просто макет плитки, в котором некоторые элементы сетки охватывают больше ячеек:


Вы поняли мою мысль. Плиточные макеты повсюду.

Для этого предназначен auto-fit

Мы используем новое ключевое слово auto-fit для создания макетов плитки. Он указывает Grid создать столько столбцов заданного размера, сколько может помещаться в пространство контейнера сетки.

Таким образом, предположим, мы хотим разделить нашу сетку на столько столбцов шириною в 200px, сколько может поместиться в доступном пространстве:


В этом div шириною 1400px было достаточно места для создания шести столбцов в 200px с зазором в 15 px между ними.

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

CSS Grid хорошо подготовлен, чтобы помочь нам сделать эту структуру плитки еще лучше.

minmax() прикроет вам спину

Мы можем отрегулировать макет так, чтобы плитки заполняли все пространство в сетке, а не оставляли пустое пространство в конце. Мы делаем это, создавая гибкие столбцы с помощью minmax.


Справа нет лишнего пространства! Как, черт побери, это делается?

minmax(200px, 1fr) задают для колонок минимальный размер 200px. Таким образом, сетка создала столько колонок в 200 пикселей, сколько смогла — шесть. Оставляя примерно 130 пикселей свободного места справа, как и раньше. Но на этот раз затем сетка равномерно распределила это дополнительное пространство на шесть колонок, так как их максимальный размер был установлен в 1fr (1 часть свободного пространства).

Эта комбинация auto-fit и minmax делает нашу структуру плитки гибкой.

Адаптивность

Наилучшее в этом способе то, что такая плитка уже подходит для небольших мобильных экранов.

Каждый раз, когда для одной из колонок в 200px больше нет места, Grid автоматически создает новую строку и смещает элементы в нее. Максимальное значение minmax в 1fr гарантирует, что элементы всегда заполняют всю строку. Это лишь одна из причин, почему CSS Grid настолько хороша для гибких макетов.


Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Еще более крутые макеты с помощью шаблона плитки

Теперь, когда мы рассмотрели теорию, давайте немного поэкспериментируем. Когда мы используем repeat(), мы можем повторить не только один трек, но и шаблон треков.

От автора: выезжающий шаблон – классический подход в адаптивной навигации. Когда вьюпорт сужается и не может уместить меню целиком, оно скрывается за пределы экрана и отображается по нажатию на кнопку. Сегодня мы создадим выезжающее меню, которое будет переключаться с помощью CSS (без JS). Для структурирования страницы возьмем нашего хорошего знакомого Grid.

Полноэкранное демо с конечным результатом.

Базовая структура страницы

Начнем с создания стандартной страницы. Создадим примерно следующее:

Стандартная структура страницы. На маленьких вьюпортах все съезжает в одну колонку, на больших aside отображается сбоку. Для ясности тег nav окрашен в синий цвет. Разметка:


Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

< p >Curabitur orci lacus , auctor ut facilisis nec , ultricies quis nibh . Phasellus id diam sollicitudin , malesuada turpis id , gravida erat . Maecenas placerat elit vel hendrerit convallis . Sed in mauris ut justo vulputate viverra feugiat ac dui . Fusce feugiat arcu in vehicula vehicula . Donec varius justo at nulla aliquet volutpat . < / p >

< p >Ut id rutrum eros . Nulla tristique , magna et mattis vulputate , mi eros suscipit turpis , nec bibendum turpis nunc feugiat sapien . Nunc arcu est , lacinia id diam quis , sagittis euismod neque . Nullam fringilla velit sed porta gravida . Proin eu vulputate libero . Ut a lacinia enim . Etiam venenatis mauris et orci tempor congue . Sed tempor eros et ultricies congue . Aenean sed efficitur orci . Nulla vel tempus mi . < / p >

< p >Ut cursus suscipit augue , id sagittis nibh faucibus eget . Etiam suscipit ipsum eu augue ultricies , at rhoncus mi faucibus . In et tellus vitae leo scelerisque fringilla nec at nunc . < / p >

alt text

3 ответа 3

Есть два способа выстроить два элемента друг за другом:

display: inline; Но на самом деле лучше display: inline-block; необходимую "строчность" элемента вы получите, но так же остануться и некоторые особенности блочности: возможность задавать ширину, пэддинги и т.д.

Обычное обтекание. Этот способ мне нравиться больше. Любой обтекаемый элемент делается блочным. Между блочными элементами не появляются пробелы. Хотя бы по этому я нахожу его более уместным. Но у обтекания больше особенностей. Например то, что обтекание надо сбрасывать. Делается это свойством clear: both; (сразу и левое и правое обтекание). Тег с таким свойством должен идти после последнего обтекаемого элемента. Чтобы не засорять HTML лишними тегами, рекоменду добавить в код класс clearfix (смотрите код) и просто добавлять его родительскому оберточнуму тегу. При помощи псевдоклассов before и after добавляются нужные элементы со сбросом обтекания.

Первый и последний элементы совсем не нужно унифицировать в html. Вы можете использовать псевдоклассы CSS:

Скруглить углы попробуйте при помощи свойства border-radius.

Самим элементам li добавьте ширину в 20%.

Ссылки внутри элементов сделайте блочными (display: block), чтобы они заняли всю ширину элемента.

UPD1:

2) Рекомендую для меню навигации использовать ul / li. А для меню действий использовать menu / li. Навигационному меню принято выставлять класс .nav или .navigation.

3) Когда вы раскидываете несколько компонентов, типа li, с содержимым img, то все, что касается разметки, например margin или размеры, применяйте к li.

4) Фон пропал потому что не сбросили отекание. Добавьте оберточному тегу кмпонентов меню класс clearfix.

5) Если сами меню вы раскидываете при помощи обтекания то их обертке (background) так же добавьте этот clearfix.

6) И побольше логики в коде. Пишите селекторы друг за другом, по смысловому порядку.

Читайте также: