Ten artykuł przedstawia krok po kroku proces tworzenia nagłówka przy użyciu HTML i CSS, który obejmuje:

• Tworzenie sekcji nagłówka
• Tworzenie paska nawigacji
• Stosowanie stylów do elementów paska nawigacyjnego
• Dodanie efektu najechania kursorem do elementów paska nawigacyjnego

Jaki jest proces tworzenia nagłówka przy użyciu HTML i CSS?

Nagłówek definiuje zawiera najważniejsze informacje o stronie. Zawiera głównie logo, tytuł strony internetowej, pasek wyszukiwania i elementy menu nawigacyjnego, które pomagają użytkownikowi przechodzić do innych stron.

Wykonaj poniższe kroki, aby utworzyć nagłówek:

Krok 1: Utwórz sekcję nagłówka

W pliku HTML „ ” służy do tworzenia sekcji dla nagłówka. „ ' Lub ' ” można również wykorzystać, ale dobrą praktyką jest użycie tagów „ ”znacznik. Następnie przypisz „ nagłówek ”, aby zastosować style CSS w sekcji nagłówka. Następnie dodaj „

” oznaczyć w nim i przypisać mu klasę „ nagłówek ”, aby wyświetlić treść „Witamy w Linuxhint!”:

klasa = 'nagłówek' >

< h1 klasa = 'nagłówek' > Witamy w Linuxhint! < / h1 >

< / nagłówek>

Następnie wybierz „ ” oznaczyć klasę i przypisać następujące style:

---

---

.nagłówek {

obraz tła: url ( „../bg.jpg” ) ;

tło- rozmiar : okładka;

powtórzenie w tle: brak powtórzeń;

kolor : biały dym;

pozycja w tle: góra;

dopełnienie: 0px 20px 20px 20px;

}

Wyjaśnienie powyższego kodu znajduje się poniżej:

• Najpierw ustaw obraz „ bg.jpg ” jako tło dla sekcji nagłówka za pomocą „ zdjęcie w tle ' nieruchomość.
• Następnie „ rozmiar tła ' I ' powtarzanie tła ” służą odpowiednio do ustawiania rozmiaru obrazu i zatrzymywania powtarzania obrazu.
• Następnie ustaw kolor tekstu i pozycję obrazu na górę za pomocą „ kolor ' I ' pozycja w tle ' nieruchomości.
• W końcu „ wyściółka ” służy do ustawienia odstępu między treścią nagłówka a obramowaniem.

Po wykonaniu powyższego kodu strona wygląda tak:

Powyższe dane wyjściowe pokazują, że utworzono sekcję nagłówka i zastosowano do niej style CSS.

Krok 2: Utwórz pasek nawigacji

W większości przypadków nagłówek może również zawierać pasek nawigacyjny. Do utworzenia paska nawigacyjnego kod HTML „ Znacznik ” może być bardzo przydatny. Dlatego dodaj elementy paska nawigacyjnego za pomocą „ ” oznacza i przypisuje klasę „ działać ”:

Po wykonaniu powyższego kodu strona wygląda tak:

Powyższe dane wyjściowe pokazują, że elementy paska nawigacyjnego „ Dom ”, „ Usługi ”, „ O nas ”, „ Skontaktuj się z nami ' I ' Nowości ' zostało stworzone.

Krok 3: Zastosuj style do elementów paska nawigacyjnego

Aby nadać styl elementom paska nawigacyjnego, wybierz „ działać ” i przypisz następujące właściwości stylów CSS:

Wyjaśnienie powyższego kodu to:

• Po pierwsze ' dekoracja tekstu ” jest ustawiona na „none”, aby usunąć predefiniowany styl „ ”znacznik.
• Aby poprawić widoczność tekstu dla użytkownika, „ biały ' I ' duży ” wartości są dostarczane do „ kolor ” i „ rozmiar czcionki ' nieruchomość.
• Następnie „ wyświetlacz ' I ' platforma ” właściwości pomagają „ ”, aby pojawiały się w tej samej linii.
• W końcu „ wyściółka ' I ' margines Wartości właściwości ” są używane do tworzenia odstępów między każdym znacznikiem „ ”.