Давайте практически разберем простой и понятный макет для начинающих, только знакомящихся с версткой.
Этот макет сверстаем с помощью flexbox-лейаута, без препроцессоров. Основные правила, которые будем соблюдать:
- Заголовок h1 должно быть один раз на странице
- Высота в процентах не будет работать. Высота задается с помощью контента, внутренним отступам (padding) сверху и снизу и границам (border) сверху и снизу
- Ориентир на резиновый тип макетов, так что по горизонтали мы обязательно будем задавать в %:
- margin-left
- margin-right
- padding-left
- padding-right
Сначала формируем наш HTML-код:
1. Заменим: <title>Sunset</title>
2. Подключим стили перед закрывающим тегом /head
<title>Sunset</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>Сразу создаем файлы стилей – reset.css – для обнуления стилей браузера.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}И файл для своих стилей — style.css
3. В <body> формируем скелет нашего сайта:
Белый наш блок, в котором будут блок-верхушка сайта, главный блок main, и подвал сайта footer.
<body>
<div class="wrapper">
<header class="header">
</header>
<main class="main">
<section class="section section--flx">
<article class="article">
</article>
<aside class="nav-wrap">
</aside>
</section>
<section class="section">
<article class="article">
</article>
</section>
</main>
<footer class="footer">
</footer>
</div>
</body>
</html>Давайте подробнее сформируем каждый из этих блоков с помощью методологии наименования классов БЭМ (блок-элемент-модификатор).
Например, в header:
<div class="wrapper">
<header class="header">
<h1 class="header__heading">
This is <span class="header__heading--spec">sunset</span> page
</h1>
<div class="header__img-wrap">
<img src="./images/sunset.jpg" alt="sunset" />
</div>
</header>
<main class="main">Далее шагаем к следующему блоку main. Внутри есть две секции, первая — со статьей и навигацией:
<section class="section section--flx">
<article class="article">
<h2 class="article__heading">Sunset heading</h2>
<p class="article__item">
</p>
</article>
<div class="nav-wrap">
<h3 class="nav__heading">Menu</h3>
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Link 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Link 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Link 3</a>
</li>
</ul>
</div>
</section>
<section class="section">Следующая секция — без навигации. Обращаем внимание на количество элементов внутри и особенности расположения элементов на этом макете:
/section>
<section class="section">
<article class="article">
<h2 class="article__heading">Sunset heading</h2>
<p class="article__item">
</p>
<p class="article__item">
</p>
</article>
</section>
</main>Далее подвал сайта:
footer class="footer">
<div class="footer__line">
<p class="footer__item">
</p>
</div>
</footer>4. Переходим в reset.css
Для примера будем использовать в этом макете rem и зададим box-sizing-border-box — чтобы паддинги и бордеры входили в ширину блока.
html {
font-size: 16px;
}
body {
font-size: 1rem;
line-height: 1;
}5. Теперь переходим к верстке. Первое, чтобы настроить качественную работу с макетом, выбираем в Figma dev mode (должен быть включен)
Смотрим, какие шрифты вовлечены в работу сайта, подключаем их с помощью Google Fonts (именно для этого сайта) и @import. Следующим шагом добавляем фон для body (это у нас селектор тега, так что комментарием замечаю приоритетность — единичка).
{
box-sizing: border-box;
}5. Теперь переходим к версте. Первое, чтобы настроить качественную работу с макетом, выбираем в Figma dev mode (должен быть включен)
Смотрим, какие шрифты вовлечены в сайт, подключаем их с помощью Google Fonts (именно для этого сайта) и @import. Следующим шагом добавляем фон для body (это у нас селектор тега, так что комментарием замечаю приоритетность — единичка).
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
/* 1 */
body {
background: #b4b4b4 url("../images/bg.png") no-repeat center/cover;
background-attachment: fixed;
font-family: "Roboto", Arial, sans-serif;
font-weight: 400;
}Как высчитать ширину для .wrapper, для того, чтобы она была в процентах:
Ширина макета 1440 пикселей — это 100%, а .wrapper 1280 пикселей — x%. С помощью математической пропорции высчитываем: х = 1280*100% / 1440 = 88,9% округляем до 89%.
Поэтому:
/* 10 */
.wrapper {
width: 89%;
margin: 0 auto;
background-color: #fff;
padding: 0 3%;
}
/* 10 */
.header__heading {
padding-top: 96px;
margin-bottom: 46px;
font-size: 2rem;
color: #a11414;
}
/* 10 */
.header__heading--spec {
font-weight: 700;
text-transform: uppercase;
}
/* 10 */
.header__img-wrap {
padding: 14px 13px;
border: 1px solid #000;
border-radius: 2px;
margin-bottom: 57px;
}
/* 11 -> class 10, tag - 1 */
.header__img-wrap img {
width: 100%;
}margin: auto; — для того, чтобы отцентрировать этот элемент.
Для картинки задаем 100% от родительского элемента, это у нас строчный элемент, высота подстроится, не задаем ее. Обязательно задаем внутренние отступы 14px 13px. 13px можно перевести в проценты тоже с помощью пропорций.
При верстке обращаем внимание на цвет текста, форматирование и отступы от других элементов.
Для начинающих можно сначала писать код, но затем обязательно следует обращать внимание на похожие стили, которые можно между собой сгруппировать. Так как это обучающий макет, то здесь интуитивно простая верстка, но есть некоторые особенности: чтобы два элемента были рядом, мы должны для их родительского элемента задать display: flex;
Рекомендую прочесть интересную статью на эту тему.
Рекомендуем публикацию по теме
Замечаем также, что в макете есть отступление между секцией и боковым элементом в 3 пикселя. Если производить эту работу с помощью препроцессоров, то было бы удобно использовать здесь миксины, переменные для цветов.
/* 10 */
.section--flx {
display: flex;
}
/* 20 -> 2 classes - 10 + 10 */
.section--flx .article {
margin-right: 3px;
}
/* 10 */
.article__heading {
color: #a11414;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
}
/* 10 */
.article__item {
color: #1d1b1b;
text-indent: 40px;
margin-bottom: 31px;
}
/* 10 */
.article__text--spec {
text-transform: uppercase;
}
/* 10 */
.article__text--mod {
color: #a11414;
}
/* 10 */
.article__text--add {
text-decoration: line-through;
}Также нужно обратить внимание, что в HTML коде мы задали span — строчные элементы, в которых были классы с модификаторами.
Это те элементы, где у нас заглавные буквы, либо измененный цвет, либо зачеркнутый текст, либо может быть какая-то другая модификация. В стилях мы это тоже задаем, соблюдая определенную дисциплину и порядок.
Для каждого параграфа мы задали класс text-indent для отступления красной строки. Но в самом HTML мы не злоупотребляем тэгом br и стараемся больше одной br не ставить, для внешних отступов существует именно margin.
Нужно знать разницу о том, как работают margin и padding для строчных и блочных элементов.
Далее высчитываем ширину в % для .nav-wrap 165 пикселей — х%, 1270 пикселей .wrapper — 100%, следовательно: х = 165*100/1270 = 12,9 и округляем до 13%.
/* 10 */
.nav-wrap {
width: 13%;
height: fit-content;
border-radius: 2px 15px;
background: #d7d7d7;
padding: 29px 26px;
font-family: Arial, Helvetica, sans-serif;
flex-shrink: 0;
}
/* 10 */
.nav__heading {
color: #000;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 24px;
}
/* 10 */
.nav__link {
color: #000;
text-decoration: none;
}
/* 20 -> class - 10, :hover - 10 */
.nav__link:hover {
font-weight: 700;
color: #a11414;
text-decoration: underline;
}Можно еще задать fit-content для .nav-wrap
Обращаем внимание на шрифты в этом блоке и на то, как выглядят ссылки при наведении на них. Далее следует стилизация секции без бокового блока, поэтому здесь не нужен класс с модификацией: .section—flx
Последними стили будут для .footer:
/* 10 */
.footer {
width: 85%;
margin-top: 4px;
padding-bottom: 18px;
}
/* 10 */
.footer__line {
background: url("../images/footer-lines.png") no-repeat 0 50%;
background-size: 100%;
}
/* 10 */
.footer__item {
text-align: center;
padding: 7px 0 6px;
color: #403636;
}
/* 10 */
.footer__item--spec {
font-weight: 700;
}Что можно сделать для улучшения кода?
- Сгруппировать похожие стили
- Добавить @media-queries
- Добавить тень для враппера
- Попытаться сделать этот макет при помощи препроцессора
Этот макет предназначен для начинающих, но в нем есть основное для того, чтобы потом брать в работу более интересные макеты.
