Существует довольно много шаблонов и учебных пособий для создания целевых страниц. Однако большинство из них имеют тенденцию слишком усложнять код или добавлять тяжелый дизайн (например, несколько страниц, форм и т. д.). К тому же, в большинстве случаев требуется очень простой и компактный дизайн. Кроме того, мы покажем вам, как использовать в основном CSS (Grid и Flex) для создания адаптивного UI вместо использования старых CSS-библиотек (таких как bootstrap). Итак, давайте приступим!
Мы собираемся создать базовый макет целевой страницы, ориентируясь на основные принципы, чтобы вы могли перенести его на желаемую целевую страницу. Вот пример результата:
Страница будет состоять из четырех основных компонентов: панель меню, изображение главной, сетка карточек и, наконец, footer.
index.html довольно прост. Он содержит в основном теги div и общую структуру страницы:
<!DOCTYPE html>
<html>
<head>
<title>Basic LP Layout</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<nav class="zone blue sticky">
<ul class="main-nav">
<li><a href="">About</a></li>
<li><a href="">Products</a></li>
<li><a href="">Our Team</a></li>
<li class="push"><a href="">Contact</a></li>
</ul>
</nav>
<div class="container">
<img class="cover" src="img/cover.jpg">
<div class="coverText"><h1>Making the world a better place</h1></div>
</div>
<div class="zone blue grid-wrapper">
<div class="card zone">
<img src="./img/startup1.jpg">
<div class="text">
<h1>Team play</h1>
<p>We work together to create impact</p>
<button>Learn more</button>
</div>
</div>
<div class="card zone"><img src="./img/startup2.jpg">
<div class="text">
<h1>Strategy</h1>
<p>Every goal is part of our strategy</p>
<button>Learn more</button>
</div>
</div>
<div class="card zone"><img src="./img/startup3.jpg">
<div class="text">
<h1>Innovation</h1>
<p>We're focused on thinking different</p>
<button>Learn more</button>
</div>
</div>
</div>
<footer class="zone"><p>2019 Assaf Elovic All right reserved. For more articles visit <a href="www.assafelovic.com">www.assafelovic.com</a></p></footer>
</div>
</body>
</html>
Поэтому мы сосредоточимся исключительно на стилизации (CSS).
Стили макетов с помощью сетки и Flex
Основное правило: используйте Grid, когда вам нужен дизайн в виде сеток, такие как таблицы, открытки, обложки альбомов (как в Instagram). Во всех других случаях используйте Flex.
Панель меню
Мы будем использовать Flex, поэтому для нашей панели меню у нас будет строка в одном направлении. Поскольку мы используем тег <nav>, удалим точки списка (стиль списка). Наконец, удалим все поля по умолчанию, установленные браузером, поэтому мы сбрасываем значение margin: 0.
.main-nav {
display: flex;
list-style: none;
margin: 0;
font-size: 0.7em;
}
При изменении ширины нашего браузера мы видим, что часть навигационной панели вырезана, поэтому нам нужно изменить ее внешний вид при изменении ширины браузера:
@media only screen and (max-width: 600px) {
.main-nav {
font-size: 0.5em;
padding: 0;
}
}
Для того чтобы опция «Contact» была прикреплена вправо установим margin-left: auto. Это автоматически установит максимальный запас слева от гиперссылки:
.push {
margin-left: auto;
}
Наконец, нам бы хотелось, чтобы навигационная панель оставалась прикрепленной кверху страницы. Кроме того, необходимо чтобы он отображался над всеми другими элементами (z-index):
.sticky {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
}
Cover
Мы используем Flex, поскольку стремимся к простоте (просто центрируем контент). После настройки нашего дисплея на адаптивность, нам нужно выровнить содержимое по центру по горизонтали внутри контейнера (ось X) и центрировать элементы по вертикали (ось Y). Мы хотим, чтобы изображение занимало весь экран, поэтому мы устанавливаем высоту 100vh, что означает 100% высоты просмотра:
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Кроме того, мы хотели бы, чтобы текст обложки отображался над изображением и в центре:
.coverText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
Полную таблицу стилей CSS можно посмотреть по этой ссылке.
Сетка карточек
Как описано выше, мы хотим создать сетку карточек, поэтому на этот раз мы будем использовать Grid. grid-template-columns устанавливает стиль каждого столбца (или div). К вашему сведению: если бы мы просто установили 1fr, мы бы увидели только один блок в одном столбце. Таким образом, мы настроили его на повторение (точно так же, как при вводе 1fr 1fr…) и автоматическое заполнение дисплея с минимальным значением 350px на весь экран (1fr). Наконец, мы устанавливаем grid-gap (отступ между объектами сетки) равным 20px:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 10px;
}
Далее стилизуем каждую карточку в сетке. Ниже приведен довольно простой способ установки поля для карточки и цвета фона:
.card {
background-color: #444;
margin: 50px;
}
Необходимо сделать так, чтобы на каждой карточке было изображение, занимающее всю верхнюю область, а под ним - заголовок и абзац, а также кнопка «Learn more». Кроме того, изображения, заголовки и абзацы в карточке должны меняться в масштабе при изменении браузера, поэтому мы установим следующие значения:
.card > img {
max-width: 100%;
height: auto;
}
.card h1 {
font-size: 1.5rem;
}
.card p {
font-size: 1rem;
}
Хотя изображение занимает 100% ширины карточки, добавим несколько приятных отступов в текстовую область карточки:
.card > .text {
padding: 0 20px 20px;
}
Наконец, стилизуем дизайн кнопки, который находится внутри каждой карточки. Установим border: 0 (поскольку по умолчанию карточка отображается с рамкой) и добавим некоторые отступы, цвет и т. д.
button {
cursor: pointer;
background: gray;
border: 0;
font-size: 1rem;
color: white;
padding: 10px;
width: 100%;
}
button:hover {
background-color: #e0d27b;
}
Footer
И последнее, но не менее важное: наш footer. Сделаем размер внутреннего текста меньше, чем по умолчанию, и зальем footer цветом:
footer {
text-align: center;
padding: 3px;
background-color: #30336b;
}
footer p {
font-size: 1rem;
}
Следуя этой простой адаптивной компоновке, вы можете создать практически любую целевую страницу, какую пожелаете. Чтобы поднять этот макет на новый уровень, можете воспользоваться некоторыми библиотеками анимации:
- Sweet Alert - позволяет добавить стильные оповещения.
- Typed.js - этот плагин для jQuery позволяет эмулировать эффект печатной машинки.
- Owl Carousel - позволяет создать красивый адаптивный слайдер в виде карусели
- Animate.css - добавляет анимацию стиля при загрузке элементов.
Чтобы скачать полный исходный код, нажмите здесь!
Источник: www.assafelovic.com.
