Karty CSS są naprawdę świetne do wyświetlania powiązanych informacji w jednym, łatwym w nawigacji miejscu. Zasadniczo wyglądają jak przekładki z zakładkami, które można zobaczyć w pudełku z przepisami lub segregatorze. Przykłady witryn korzystających z kart nawigacji:
Spoglądając na te dwie witryny, zastanów się nad korzyściami płynącymi z zastosowania takiego elementu interfejsu użytkownika w witrynach. Jakie problemy należy rozwiązać? Jaki rodzaj informacji byłyby zakładkami nawigacyjnymi, jest dobrą pracą programistyczną?
Kiedy musisz sięgnąć do drzewa interfejsu użytkownika, które organizuje tekst lub informacje w znaczące komponenty i wyświetla je na ekranie bez zajmując zbyt dużo miejsca, zakładki nawigacyjne to mądry wybór. Porozmawiamy o zakładkach nawigacyjnych bardziej szczegółowo, gdy zaczniemy używać JavaScript, jQuery i / lub Bootstrap, ale jest też formalna praca, której moglibyśmy użyć, która wymaga tylko czystego HTML i CSS. Rzućmy okiem na konfigurację:
Skonfiguruj swój kod HTML:
Śmiało i skonfiguruj swój standardowy kod HTML z kontenerem wewnątrz ciała, który będzie działał jako główny kontener dla projektu . Możesz nazwać go jak chcesz w atrybucie class, ale nazwę go class = "tabs"
. Jak dotąd Twój kod HTML powinien wyglądać tak: