Vanligtvis används grafiska pilar på webbplatser för att organisera navigering. När du klickar på en sådan pekare går du till en annan sida eller till ett annat avsnitt på den aktuella sidan. Ibland är vissa åtgärder knutna till dem - markerar innehållet i taggfältet, startar ett JavaScript-skript etc. För att betona att den här pilen är ett aktivt element, använd "markera" -effekten, dvs. förändringar i utseende vid muspekaren.
Nödvändig
Grundläggande kunskaper i HTML- och CSS-språk
Instruktioner
Steg 1
Bestäm vilken mekanism för att implementera pilmarkeringen som är bäst för dig. Det finns flera av dem, två enkla ges i de efterföljande stegen i denna instruktion. De använder båda pseudoklassen CSS. När muspekaren är över ett grafiskt element (pil) tillämpas stilen som beskrivs i denna pseudoklass på den, och resten av tiden är stilen inte aktiv. För båda alternativen som beskrivs nedan kan du använda samma HTML kod, men olika stilbeskrivningar. Pilkoden i sidkällan kan skrivas enligt följande: Id-attributet anger länkidentifieraren (pilA), genom vilken webbläsaren bestämmer vilken av stilbeskrivningarna som ska tillämpas på den.
Steg 2
Det första alternativet kräver att du förbereder två pilbilder - med och utan bakgrundsbelysning. Spara dem i filer med namn som arrON.
en # pilA, en # pilA: besökt {
display: blockera;
höjd: 30px;
bredd: 100px;
bakgrund: url (arrOFF.gif) no-repeat;
gräns: 0;
}
a # pilA: sväva {
bakgrund: url (arrON.gif) no-repeat;
gräns: 0;
}
Det första blocket innehåller dimensionerna på pilen (höjd: 30 pixlar; bredd: 100 pixlar;) - ersätt dem med dimensionerna på de förberedda pilbilderna.
Steg 3
Det andra alternativet låter dig klara dig med bara en bildfil. Du måste placera båda bilderna av pilen i den - både markerade och inaktiva. Du kan placera dem sida vid sida, du kan placera varandra ovanför varandra. I exempelkoden antar vi att den markerade pilen placeras under den inaktiva och att filen heter arr.
en # pilA, en # pilA: besökt {
display: blockera;
bredd: 100px;
höjd: 30px;
bakgrund: url (arr.gif) no-repeat;
gräns: 0;
}
a # pilA: sväva {
bakgrund: url (arr.gif) no-repeat 31px;
gräns: 0;
}
Glöm inte att ändra storlek här också.
