Hvordan lage hyperlenker inn XHTML Velt
Imponer dine besøkende ved å legge rollover effekter på dine nettsider. Cascading Style Sheets tillate deg å endre en hyperkobling utseende uten å bruke Javascript-kode. Mange Internett-surfere er kjent med "Understreket" effekt. Understrek effekten oppstår når nettleseren understreker en hyperlink som du beveger musen over det. Ved hjelp av CSS, kan du legge til flere rollover effekter til XHTML websider.
Bruksanvisning
1 Åpne XMTL dokument med Notepad eller en HTML-editor.
2 Legg denne koden til "kroppen" delen av dokumentet:
<a href= "http://www.abc.com" class="underline"> Understreket Roll Effect </a>
<a href="http://www.xyz.com" class="highlight"> Uthevet Roll Effect </a>
Dette skaper to hyperkoblinger. Hver hyperkobling refererer til en annen CSS-klasse.
3 Legg denne koden til "hodet" -delen av dokumentet:
STYLE TYPE = "text / css">
a.underline: link {text-decoration: none}
a.underline: active {background-color: transparent; text-decoration: none}
a.underline: visited {background-color: transparent; text-decoration: none}
a.underline: hover {background-color: transparent; text-decoration: underline}
Denne CSS-kode definerer visningsegenskaper for alle hyperkoblinger som refererer til "underline" klasse. Den siste linjen definerer "sveve" -klassen. Egenskaper som du setter for denne klassen bestemme hvordan en hyperkobling ser ut når en musepekeren svever over hyperkoblingen. I dette eksemplet er "text-decoration" eiendom "understrek."
4 Legg til følgende CSS koden under koden vist i forrige trinn:
a.highlight: link {background-color: transparent; text-decoration: none}
a.highlight: active {background-color: transparent; text-decoration: none}
a.highlight: visited {background-color: transparent; text-decoration: none}
a.highlight: hover {background-color: Gul; text-decoration: none}
</ Style>
Navnet på denne klassen er "høydepunkt". Merk at "sveve" tag er "background-color" verdi "Yellow". Dette vil føre til en hyperkobling bakgrunnsfarge for å skifte til gult når en musepekeren beveger seg over hyperkoblingen.
5 Lagre XHTML dokumentet og åpne den i nettleseren din. Flytt musepekeren over den første hyperkobling. Nettleseren vil understreke hyperkobling.
6 Flytt markøren over andre hyperkobling. Nettleseren vil markere hyperkobling.
Hint
- Ved å definere egenskaper i CSS "sveve" klasse, kan du lage en rekke rollover effekter. Du kan selv endre font farge og stil ved å bruke ekstra CSS font egenskaper. (Se Resources)