Как изменить шапку сайта (часть 1)
На фриланс-биржах, заказчики часто просят, изменить дизайн какого-нибудь фрагмента сайта, например шапки. Самый простой способ изменить шапку сайта, так это создать её с нуля. Почему я так считаю? Пожалуйста, будут и аргументы.
Когда я открываю исходный код чужого сайта, то за редким исключением, вижу неструктурированный HTML код, непоследовательно написанный CSS и почти нет комментариев. Ориентироваться в таком хаосе, очень сложно и я понимаю, что мне быстрее сделать все заново.
Такой бардак происходит на сайтах, сделанных непрофессионально, поэтому и обращается заказчик с такими шедеврами к фрилансерам. Грамотно сделанные сайты, редко переделывают, потому вероятность наткнуться на плохо сделанный сайт, очень высока.
Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.
У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.
Что бы я изменил в дизайне?
- Шрифт и цвет у логотипа
- Размер и цвет остального шрифта
- Убрать зеленую полосу
- Блок с контактами разместить на верхней панели
Между тегами head в HTML файле:
//прописываем мета тег для адаптивности
<meta name="viewport" content="width=device-width, initial-scale=1">
//подключаем другие шрифты
<link href="https://fonts.googleapis.com/css?family=Forum|Roboto+Slab:400,700" rel="stylesheet">
//подключаем библиотеку Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
//подключаем внешний файл стилей, сюда будем писать стили
<link rel="stylesheet" href="style.css">
//скачиваем и подключаем файл нормализации стилей
<link rel="stylesheet" href="normalize.css">
Делать верстку мы будем на flexbox.
Первый ряд – панель с контактами (top header).
HTML разметка
В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.
<div class="top-header">
<p>Массажный салон для вашего здоровья и красоты</p>
<p><span class="green">Tel.</span> (+372) 5514704, 58079045</p>
<p><span class="green">Инфо и запись:</span> ежедневно с 9:00 до 21:00</p>
</div>
CSS стили
/* Общие стили для шапки */
body {
font-family: 'Forum', cursive;
color: #777;
background-color: #fff;
}
Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.
/* Флекс контейнер для верхних инфо-блоков */
.top-header {
display: flex;
justify-content: space-around;
padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
}
Выделим некоторые слова зеленым цветом.
/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
color: #b2db41;
font-weight: bold;
}
Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.
Второй ряд – шапка (header)
Слева направо, первым идет логотип, а затем навигационное меню.
HTML код
Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.
<header>
<div class="wrap-logo">
<a href="#" id="logo">Massaaži<span>Maailm</span></a>
</div> ...
CSS код
/* Флекс контейнер для шапки */
header {
display: flex;
justify-content: space-around;
padding: 5px;
border-bottom: 5px solid #b2db41;
}
/* Стили для всех ссылок внутри флекс контейнера */
header a {
display: block;
color: #212121;
padding: 12px;
text-decoration: none; /* убирает подчеркивание */
font-size: 100%;
text-shadow: 0 1px 0 #fff;
border-radius: 4px;
}
Здесь мы указываем относительную ширину блока под логотип, значит остальные 70%, будет занимать навигация. Задавая проценты, можно точнее распределять детей-элементов в контейнере-родителе.
/* Ширина дочернего блока под логотип */
.wrap-logo {
width: 30%;
}
Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.
/* Стилизация логотипа */
.wrap-logo #logo {
font-family: 'Roboto Slab', serif;
font-size: 200%;
font-weight: bold;
}
Логотип смотрится свежее, если его сделать двухцветным.
/* Зеленый цвет у части логотипа */
.wrap-logo span {
color: #b2db41;
}
Продолжение следует.
-
Создано 08.04.2019 10:20:30
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.