Как сделать шапку сайта с помощью HTML и CSS

Шапка сайта – это один из самых важных элементов веб-дизайна. Она формирует первое впечатление о вашем ресурсе, задает ему стиль и помогает пользователям ориентироваться. В этой статье мы рассмотрим, как сделать шапку сайта html css, чтобы она была не только красивой, но и функциональной.

Структура HTML

Для начала создадим базовую структуру шапки с использованием HTML. Вот пример кода:

    

        
Название Сайта
    
    

Стилизация с помощью CSS

Теперь давайте добавим стили, чтобы сделать нашу шапку более привлекательной. Пример CSS-кода:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

.logo h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #ff6347;
}

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

Важно, чтобы шапка сайта была адаптивной. Используйте медиа-запросы для изменения стилей на мобильных устройствах:

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
}

Заключение

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