Hvordan lage interaktive Roll Knapper med CSS

March 2

Moderne nettsteder krever så mye bruker interaktivitet som mulig, og legge overgangstilstander til navigasjonsknapper er en av de enkleste måtene å gjøre det. Du trenger ikke å bruke penger for Dreamweaver eller Fyrverkeri; du kan lage interaktive velt med HTML og CSS.

Bruksanvisning

1 Test din webside for å sikre at de grunnleggende HTML-koblinger som fungerer skikkelig. Velt på ødelagte koblinger vil ikke forbedre nettstedet. Hvis koblingene fungerer, åpner websiden HTM-filen i en tekst editor.

2 Legg et stilark erklæringen. Sett markøren inne i <head> -kodene og Type:
<P>
<Style type = "text / css">
</ Style>
</ P>

3 Plasser markøren mellom de nye <style> koder. Legg til et linjeskift og erklære din anker (knapp) stil: "a {}" (linjeskift hjelpe deg følge koden, de påvirker ikke nettleseren).

4 Skriv din stil erklæringen mellom parenteser ({}). Du må ta med "display: block; width: 5em (eller noen annen bredde i" em "mellomrom); background-color: # 000000 (eller en annen verdi, for eksempel, # 85DE59), farge: #AAAAAA (eller en annen verdi ); text-align: center; " i erklæringen. Når du forhåndsvise siden i nettleseren, vil koblingene nå se ut som rektangulære knapper.

5 Definer roll verdien i CSS-stiler avsnittet: "a: hover {}"; i stil definisjon, legge til ulike verdier for "background-color" og "farge".

6 Test bildet i nettleseren din for å være sikker på linkene skifter farge når musepekeren er over knappene. Hvis man koblingen endres, vil de all forandring.

Hint

Du kan også legge til CSS-verdier for linjen høyde, padding, border, tekst-dekorasjon og andre CSS egenskaper for å forbedre utseendet på knappene.
Du kan bruke CSS til å bytte bilder for velt ved å skrive "bakgrunn: # 000000 url (bilde bane og navn) no-repeat venstre-top;" i stedet for den bakgrunnsfarge-definisjon i anker ( "A") stildefinisjoner. Bruk samme erklæringen, men med navnet på rollover bilde i en: hover definisjoner.