20.04.2024
То что я сделал здесь, мне всё равно пришлось потом поменять. Так что просто посмотри на это всё как пример того, как сделать простую шапку для сайта.
Можно считать это заготовкой под шапку.
Каркас шапки в html файле
Пришло время делать шапку для сайта
Сам код
<header>
<div class="header-container">
<h1 class="logo">Логотип</h1>
<nav>
<ul>
<li><a href="№">Блог</a></li>
<li><a href="№">Проекты</a></li>
<li><a href="№">Контент</a></li>
<li><a href="№">О сайте</a></li>
</ul>
</nav>
</div>
</header>
header и nav это семантические теги
№ я использовал чтобы сделать эффект ссылки это называется заглушка
Результат
Приступим к стилизации
Стилизация шапки в CSS файле
Перед тем как писать вид шапки сбросим стандартные отступы на HTML странице делается это этими командами через знак *
В результате всё прилипает к левой стороне окна браузера
Набросал такие стили
Вот сам код если надо
header {
background-color: rgb(176, 0, 0); /* цвет шапки */
backdrop-filter: blur (6px); /* Эфект блюр */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Теневая полоска шапки */
padding: 10px 40px; /* Отступ слева и сверху */
position: sticky; /* Стиль позиционирования */
top: 0; /* индекс сверху */
z-index: 999; /* Индекс по оси Z */
Получилось вот это
Отделил логотип от кнопок
Результат
Отнёс кнопки влево, и сделал их по центру
Код
.header-container {
display: flex; /* Отделил логотип от ссылок */
justify-content: space-between; /* Отнёс кнопки влево */
align-items: center; /* Выравнивание по центру */
}
Результат
Сделал расстояния кнопок
Код
nav ul {
list-style-type: none; /* Убрал точки у кнопок */
margin: 0; /* Убрал внешний отступ у кнопок */ для адаптивности
padding: 0; /* убрал внутренний отступ у кнопок */для адаптивности
}
nav ul li {
display: inline; /* Сделал кнопки в строчку */
margin-left: 20px; /* Расстояние между кнопками слева 20px */
}
Результат
Сделал эффект кнопки
21.04.2024
Сам код этого чюда
nav ul li a {
text-decoration: none; /* Убрал подчёркивания у кнопок */
color: white; /* Цвет текста у кнопок когда не нажимаешь на неё */
transition: .3s; /* Время анимации при наведении курсора */
padding: 10px; /* Отступы кнопок */
border-radius: 10px; /* Скругление кнопок по краям */
}
nav ul li a:hover {
background-color: black; /* фоновый цвет кнопки при наведении курсора */
color: orange; /* Цвет текста кнопки при наведении курсора */
}
Результат без наведения мыши
Когда наводишь мышь
Заменил логотип
Добавил стиль шрифта к кнопкам
font-family: Arial, Helvetica, sans-serif; /* Стиль шрифта у кнопок */
Добавил красоты логотипу
вот код
.logo {
margin: o; /* Отступ у логотипа */
color: wheat; /* Цвет текста логотипа */
font-family: Arial, Helvetica, sans-serif; /* Стиль шрифта у логотипа */
}
Результат
В итоге получилась такая простая красивая шапка для сайта
Пока всё на этом