Podczas korzystania z witryny lub aplikacji może być konieczne przełączanie różnych stron, dokumentów i opcji. Mówiąc dokładniej, aby przejść do określonych treści, „Tabs”Można użyć. W HTML karty są obszarem klikalnym w dowolnej aplikacji, która pomaga w nawigacji po stronie. Po kliknięciu zakładki wyświetlana jest jej powiązana treść, a inne karty są ukryte.

W tym badaniu opisano procedurę tworzenia i stylizacji zakładek w HTML.

Jak tworzyć zakładki w HTML?

Aby utworzyć zakładki w HTML, postępuj zgodnie z instrukcjami poniżej listy.

Krok 1: Utwórz podstawowy plik HTML

Najpierw dodajemy klasę DIV o nazwie „myhtmltabs”:

Zrobimy trzy zakładki, aby zademonstrować praktyczny przykład:

• Wewnątrz wyżej wymienionych div tworzy trzy kontrole radiowe dla „dom”,„o", I "kontakt”Odpowiednio. Te wejściowe radia są powiązane z elementami etykiet. Element wejściowy „ID„Atrybut powinien być taki sam jak„Do„Atrybut elementu etykiet.
• Przycisk opcji karty domowej jest oznaczony jako „sprawdzony”, Który reprezentuje domyślnie, należy sprawdzić przycisk opcji Home.

DOM

O

KONTAKT

Z powodzeniem utworzyliśmy trzy przyciski opcji, w których domyślnym zaznaczonym przyciskiem jest przycisk Home:

Krok 2: Dodaj treść

Następnie dodaj zawartość do każdego przycisku. W tym celu dodaj trzy Divy poniżej każdego przycisku radiowego. Wewnątrz div dodaliśmy

tag dla nagłówka i

Tag dla akapitu, jak widać w poniższym bloku kodu:

DOM

Dom

Dom to początkowe miejsce marzeń i nadziei!

O

O

jesteśmy drużyną! Pracuj razem dla wspólnej wizji…

KONTAKT

Informacje kontaktowe

komunikujemy się z nimi, z miłością, z odwagą, z uśmiechem!

Przyciski radiowe z powiązaną treścią można zobaczyć na poniższym wyjściu:

Krok 3: Div Style Main/Parent Div

Zrób nowy plik CSS w swoim projekcie i wstaw jego link w pliku HTML, jak podano poniżej:

Podajmy styl powyższej struktury HTML. Możesz zastosować styl CSS zgodnie z preferencjami.

Tutaj element ciała jest stylizowany przez ustawianie koloru tła jako „RGBA (173, 202, 171, 0.849)". Co więcej, rodzina czcionek jest ustalona jako „Sans-Serif”:

ciało
kolor tła: RGBA (173, 202, 171, 0.849);
Font-Family: Sans-Serif;

Następnie „.myhtmltabs”Służy do uzyskania dostępu do Div Div dodany w pliku HTML:

.myhtmltabs

Wyświetlacz: Flex;
Flex-Wrap: Wrap;
maksymalna szerokość: 600px;
Margines: 50px Auto;
Wyściółka: 25px;

Opis wyżej wymienionego kodu opisano tutaj:

• "Wyświetlacz: Flex”Własność jest dodawana do elementu nadrzędnego, aby elementy dziecięce automatycznie dostosowały się do kolumn i wierszy oraz margines.
• "Flex-Wrap: Wrap”Właściwość określa, czy elementy Flex są wstawiane do jednej linii, czy w wielu liniach.
• "Maksymalna szerokość: 600px”Wskazuje, że maksymalna szerokość DIV powinna wynosić 600px.
• "Margines: 50px auto”Daje margines najwyższej jakości jako 50px i lewy w prawo jako automatyczny.
• "Wyściółka: 25px”Daje przestrzeń wewnątrz Div jako 25px.

Nie chcemy, aby przyciski radiowe były widoczne na stronie internetowej. Aby to zrobić, ustaw jego wyświetlacz jako „nic”:

.myhtmltabs wejście [type = „radio”]

Nie wyświetla się;

Krok 4: Etykieta stylowa

Przypisz niektóre właściwości CSS do podpisów lub etykiet TABS, takich jak:

• Ustawienie „wyściółka" Jak "25px"
• "grubość czcionki" Jak "pogrubiony"
• "kolor tła" Jak "RGB (220, 207, 233)"
• "kursor" Jak "wskaźnik„Aby reprezentować ikonę z ręką wskazującą, aby interakcja była lepsza:

.etykieta myhtmltabs
Wyściółka: 25px;
Font-Weight: Bold;
kolor tła: RGB (220, 207, 233);
Kursor: wskaźnik;

Krok 5: Style H1

Poniżej wspomniana sekcja pokazuje rozmiar czcionki

Tag jest ustawiony jako „2em”:

.myhtmltabs .Tab h1
Rozmiar czcionki: 2em;

Krok 6: Style Child Divs

Następnie zastosuj styl na „.patka„Div, który jest dzieckiem div„myhtmltabs„Div. Ten div jest dla obszaru treści. Poniżej ustawimy jego szerokość, wysokość, wyściółkę i kolory tła. Następnie ustaw swoją kolejność jako 1, która ustawi zakładki na górze. Następnie właściwość wyświetlania jest ustawiona jako brak:

.myhtmltabs .patka
szerokość: 100%;
Wysokość: 200px;
Wyściółka: 20px;
kolor tła: RGB (228, 216, 171);
Zamówienie: 1;
Nie wyświetla się;

Można zauważyć, że stylizacja jest z powodzeniem stosowana; Jednak treść wciąż się nie pojawia:

Krok 7: Wyświetl zawartość kart

Element obok znaku Plus (+) pokazuje, że elementy te będą wyświetlane w tej samej kolejności po sprawdzeniu przycisku opcji. Kiedy wejście mają radio typu .Myhtmltabs Div jest sprawdzany, a następnie wyświetl elementy rodzeństwa „etykieta" I ".patka„Klasa Div w bloku (cała) linia:

.MyhtmlTabs Input [type = 'radio']: Sprawdzona + etykieta + .Tab
Blok wyświetlacza;

Krok 8: Karta otwartego stylu

Aby rozróżnić otwartą kartę i inne, kolor tła etykiety jest ustawiony jako „RGB (67, 144, 216)”A kolor tekstu jest ustawiony jako biały:

.myhtmltabs wejście [type = 'radio']: checked + etykieta
Tło: RGB (67, 144, 216);
kolor biały;

Po interpretacji całego kodu opisanego powyżej, zobaczmy wynik!

W ten sposób możesz tworzyć zakładki w HTML.

Wniosek

Karta HTML to obszary klikalne w dowolnej aplikacji, która nawiguje użytkownik do określonej sekcji. Korzystając z kart, użytkownicy mogą łatwo przejść do kilku sekcji aplikacji. W HTML możesz łatwo tworzyć zakładki, ustawiając typ wejściowy jako radio i stosując różne właściwości CSS. W tym poście nauczyliśmy się procedury tworzenia kart w HTML za pomocą praktycznej demonstracji.