Jak korzystać z przesuwnych drzwi w CSS bez kart

Kaskadowe arkusze stylów to rodzaj języka arkusza stylów, który dodaje stylu treści WWW napisanej w języku znaczników, takim jak XML, HTML lub XHTML. Technika przesuwania drzwi w CSS polega na tworzeniu efektu dynamicznego za pomocą dwóch oddzielnych obrazów tła. Górny obraz leży nad dolnym obrazem, aby utworzyć iluzję, bez całkowitego zasłaniania dolnego obrazu. Sztuczką przy wdrażaniu techniki drzwi przesuwnych bez zakładek jest generowanie tekstowych elementów nawigacyjnych za pomocą list zaprojektowanych z CSS.

1.

Zacznij od utworzenia nieuporządkowanej listy elementów nawigacyjnych zawartych w tagu "DIV". Na przykład:

• Strona główna
• Produkty i usługi
• Skontaktuj się z nami

W tym przykładzie lista zawiera znaczniki zakotwiczenia i span. Znaczniki zakotwiczenia używają atrybutu "href" do połączenia z określoną lokalizacją elementów nawigacyjnych. Używa również znacznika do kontrolowania stylu tekstu w elementach nawigacyjnych.

2.

Dodaj elementy stylu do elementów nawigacyjnych, definiując kolor tła, włączając zmienne, określając marginesy, ustawiając przepełnienie do automatycznego i wyłączając styl listy dla elementów listy. Float jest właściwością CSS, która pozwala elementowi przesuwać się poziomo w lewo lub w prawo, aby inne elementy mogły się owijać wokół niego. Właściwość przepełnienia określa zachowanie obiektu, jeśli zawartość rozszerza się poza prostokątne okno. Po ustawieniu przepełnienia na auto przepełnienie zostanie ukryte, ale pasek przewijania może zostać dodany w celu wyświetlenia zawartości przepełnienia.

3.

Zastosuj wybrane obrazy tła do stylów zakotwiczenia i zakresu, aby ukończyć technikę drzwi przesuwnych i wygeneruj efekt zawieszania dla elementów nawigacyjnych.