В этой статье демонстрируется пошаговый процесс создания заголовка с использованием HTML и CSS, который будет включать:
- Создание раздела заголовка
- Создание панели навигации
- Применение стилей к элементам панели навигации
- Добавление эффекта наведения к элементам панели навигации
Каков процесс создания заголовка с использованием HTML и CSS?
Заголовок определяет самую важную информацию о сайте. В основном он содержит логотип, название веб-сайта, панель поиска и элементы меню навигации, которые помогают пользователю переходить на другие страницы.
Выполните следующие шаги для создания заголовка:
Шаг 1: Создайте раздел заголовка
В файле HTML « <заголовок> Тег используется для создания раздела для заголовка. “ <дел> ' или ' <раздел> » также можно использовать, но рекомендуется использовать тег « <заголовок> ' ярлык. Затем назначьте « заголовок », чтобы применить стили CSS к заголовку. После этого добавьте « ” пометить его и присвоить ему класс “ заголовок », чтобы отобразить содержимое «Добро пожаловать в Linuxhint!»:
<заголовок сорт '=' 'заголовок' >
< h1 сорт '=' 'заголовок' > Добро пожаловать в Линуксинт! < / h1 >
< / заголовок>
После этого выберите « <заголовок> » пометить класс и назначить следующие стили:
.заголовок {
фоновое изображение: URL ( '../bg.jpg' ) ;
фон- размер : крышка;
фоновый повтор: без повтора;
цвет : белый дым;
фоновая позиция: вверху;
отступ: 0px 20px 20px 20px;
}
Объяснение приведенного выше кода приведено ниже:
- Сначала установите изображение « bg.jpg ' в качестве фона для раздела заголовка, используя ' изображение на заднем плане ' свойство.
- Далее « размер фона ' и ' фоновый повтор ” используются для установки размера изображения и прекращения повторения изображения соответственно.
- После этого установите цвет текста и положение изображения вверху с помощью « цвет ' и ' фоновое положение ' характеристики.
- В итоге « набивка ” используется для установки пробела между содержимым заголовка и границей.
После выполнения приведенного выше кода веб-страница выглядит так:
Приведенный выше вывод показывает, что раздел заголовка создан и к нему применены стили CSS.
Шаг 2: Создайте панель навигации
Заголовок также может содержать панель навигации в большинстве случаев. Для создания навигационной панели HTML « <нет> ” может быть очень полезным. Вот почему добавьте элементы панели навигации, используя « <а> ” теги и назначить класс “ действовать ”:
<заголовок сорт '=' 'заголовок' ><нет>
< а сорт '=' 'действовать' href '=' '#' >Главная< / а >
< а сорт '=' 'действовать' href '=' '#' >Услуги< / а >
< а сорт '=' 'действовать' href '=' '#' >О нас< / а >
< а сорт '=' 'действовать' href '=' '#' >Свяжитесь с нами< / а >
< а сорт '=' 'действовать' href '=' '#' >Новые поступления< / а >
< / нет>
< бр >< бр >
< h1 сорт '=' 'заголовок' > Добро пожаловать в Linuxhint! < / h1 >
< / заголовок>
После выполнения приведенного выше кода веб-страница выглядит так:
Приведенный выше вывод показывает, что элементы панели навигации « Дом », « Услуги », « О нас », « Связаться с нами ' и ' Новые поступления » были созданы.
Шаг 3. Применение стилей к элементам панели навигации
Чтобы стилизовать элементы панели навигации, выберите « действовать ” и назначьте следующие свойства стилей CSS:
.действовать {текстовое оформление: нет;
цвет : белый;
дисплей: блок;
отступ: 15 пикселей;
шрифт- размер : большой;
плыть налево;
поля: 0px 20px;
}
Объяснение приведенного выше кода:
- Во-первых, « украшение текста » установлено значение «none», чтобы удалить предопределенный стиль « <а> ' ярлык.
- Чтобы улучшить видимость текста для пользователя, « белый ' и ' большой » значения предоставляются для « цвет ” и “ размер шрифта ' свойство.
- После этого « отображать ' и ' плавать » свойства помогают « <а> », чтобы они отображались в одной строке.
- В итоге « набивка ' и ' допуск Значения свойств используются для создания пространства между каждым тегом « ».
После выполнения приведенного выше кода веб-страница выглядит так:
Приведенный выше вывод показывает, что элементы панели навигации теперь стилизованы.
Шаг 4: добавьте эффект наведения к элементам панели навигации
Как и в приведенном выше выводе, эффект наведения недоступен для элемента панели навигации. Чтобы добавить оба, выберите « заголовок ”, который присвоен “ ' ярлык. После этого добавьте « :наведите » с помощью « действовать », чтобы применить эффект наведения к элементам панели навигации:
.акт: наведите {граница : 2 пикселя сплошного белого цвета;
цвет : сине-фиолетовый;
}
.заголовок {
текст- выровнять : центр;
допуск: 18 % 0 пикселей;
}
Объяснение приведенного выше кода приведено ниже:
- Сначала установите « граница ” твердого тела типа 2px и назначьте белый “ цвет ». Вместе с ним установите « сине-фиолетовый ” только тогда, когда пользователь наводит указатель мыши на элементы панели навигации.
- Далее выберите « заголовок » и установите его выравнивание на « центр ” и обеспечьте некоторый запас, чтобы раздел выглядел больше.
После выполнения приведенного выше кода окончательный вид заголовка выглядит следующим образом:
Приведенный выше вывод показывает, что заголовок создан с использованием HTML и CSS.
Заключение
В файле HTML тег «