В этой статье демонстрируется пошаговый процесс создания заголовка с использованием HTML и CSS, который будет включать:

• Создание раздела заголовка
• Создание панели навигации
• Применение стилей к элементам панели навигации
• Добавление эффекта наведения к элементам панели навигации

Каков процесс создания заголовка с использованием HTML и CSS?

Заголовок определяет самую важную информацию о сайте. В основном он содержит логотип, название веб-сайта, панель поиска и элементы меню навигации, которые помогают пользователю переходить на другие страницы.

Выполните следующие шаги для создания заголовка:

Шаг 1: Создайте раздел заголовка

В файле HTML « <заголовок> Тег используется для создания раздела для заголовка. “ <дел> ' или ' <раздел> » также можно использовать, но рекомендуется использовать тег « <заголовок> ' ярлык. Затем назначьте « заголовок », чтобы применить стили CSS к заголовку. После этого добавьте «

” пометить его и присвоить ему класс “ заголовок », чтобы отобразить содержимое «Добро пожаловать в Linuxhint!»:

<заголовок сорт '=' 'заголовок' >

< h1 сорт '=' 'заголовок' > Добро пожаловать в Линуксинт! < / h1 >

< / заголовок>

После этого выберите « <заголовок> » пометить класс и назначить следующие стили:

---

---

.заголовок {

фоновое изображение: URL ( '../bg.jpg' ) ;

фон- размер : крышка;

фоновый повтор: без повтора;

цвет : белый дым;

фоновая позиция: вверху;

отступ: 0px 20px 20px 20px;

}

Объяснение приведенного выше кода приведено ниже:

• Сначала установите изображение « bg.jpg ' в качестве фона для раздела заголовка, используя ' изображение на заднем плане ' свойство.
• Далее « размер фона ' и ' фоновый повтор ” используются для установки размера изображения и прекращения повторения изображения соответственно.
• После этого установите цвет текста и положение изображения вверху с помощью « цвет ' и ' фоновое положение ' характеристики.
• В итоге « набивка ” используется для установки пробела между содержимым заголовка и границей.

После выполнения приведенного выше кода веб-страница выглядит так:

Приведенный выше вывод показывает, что раздел заголовка создан и к нему применены стили CSS.

Шаг 2: Создайте панель навигации

Заголовок также может содержать панель навигации в большинстве случаев. Для создания навигационной панели HTML « <нет> ” может быть очень полезным. Вот почему добавьте элементы панели навигации, используя « <а> ” теги и назначить класс “ действовать ”:

После выполнения приведенного выше кода веб-страница выглядит так:

Приведенный выше вывод показывает, что элементы панели навигации « Дом », « Услуги », « О нас », « Связаться с нами ' и ' Новые поступления » были созданы.

Шаг 3. Применение стилей к элементам панели навигации

Чтобы стилизовать элементы панели навигации, выберите « действовать ” и назначьте следующие свойства стилей CSS:

Объяснение приведенного выше кода:

• Во-первых, « украшение текста » установлено значение «none», чтобы удалить предопределенный стиль « <а> ' ярлык.
• Чтобы улучшить видимость текста для пользователя, « белый ' и ' большой » значения предоставляются для « цвет ” и “ размер шрифта ' свойство.
• После этого « отображать ' и ' плавать » свойства помогают « <а> », чтобы они отображались в одной строке.
• В итоге « набивка ' и ' допуск Значения свойств используются для создания пространства между каждым тегом « ».