Hur man använder skjutdörrar i CSS utan flikar

Cascading Style Sheets är en typ av stilbordspråk som lägger till stil för webbinnehåll som skrivs i ett uppmärkningsspråk som XML, HTML eller XHTML. Skjutdörrtekniken i CSS handlar om att skapa en dynamisk effekt med två separata bakgrundsbilder. Den översta bilden ligger över bottenbilden för att skapa en illusion utan att fullborda den nedre bilden. Tricket att implementera skjutdörrtekniken utan flikar är att generera textbaserade navigeringselement med listor som är utformade med CSS.

1.

Börja med att skapa en oordnad lista över dina navigeringselement som bifogas "DIV" -taggen. Till exempel:

• Hemsida
• produkter
• Kontakta oss

I det här exemplet innehåller listan ankare och spårstaggar. Ankarkoderna använder attributet "href" för att länka till den specifika platsen för navigeringselementen. Den använder också taggen för att styra textens stil i navigationselementen.

2.

Lägg till någon styling i navigeringselementen genom att definiera bakgrundsfärgen, möjliggöra float, specificera marginaler, inställning av överflöde till auto och inaktivera listestilen för listobjekt. Float är en CSS-egenskap som gör det möjligt för ett element att flytta horisontellt åt vänster eller höger så att andra element kan vikas runt det. Överflödesegenskapen definierar hur ett objekt ska uppträda om innehållet expanderar bortom sin rektangulära lådan. Genom att ställa in överflöde till auto kommer överflödet att döljas men en rullningsfält kan läggas till för att se överflödesinnehållet.

3.

Applicera valda bakgrundsbilder till ankar- och spänningsstilarna för att slutföra skjutdörrtekniken och ge en svängningseffekt för navigeringselementen.