Nwlapcug.com


Come creare pulsanti di Rollover interattivi con i CSS

Siti Web moderni richiedono quanto più possibile l'interattività dell'utente, e l'aggiunta di Stati di rollover per i pulsanti di navigazione è uno dei modi più semplici per farlo. Non è necessario spendere soldi per Dreamweaver o fuochi d'artificio; è possibile creare rollover interattivi con HTML e CSS.

Istruzioni

1

Verificare la pagina Web per assicurarsi che i collegamenti HTML base funzionino correttamente. Rollover su collegamenti interrotti non migliorare il tuo sito. Se il tuo link funzionano, è possibile aprire il file HTM della pagina Web in qualsiasi editor di testo.

2

Aggiungere una dichiarazione di foglio di stile. Posizionare il cursore all'interno del tag < head > e tipo:
< p >
< style type = "text/css" >
< / stile >
</p >

3

Posizionare il cursore tra i tag < style > nuovi. Aggiungere un ritorno a capo e dichiarare il tuo stile di ancoraggio (pulsante): "un {}" (ritorni aiuteranno a seguire il codice; non interessano il browser).

4

Digitare la tua dichiarazione di stile tra le parentesi graffe ({}). È necessario includere "display: block; Larghezza: 5em (o qualsiasi altra larghezza in spaziatura "em"); background-color: #000000 (o qualsiasi altro valore, ad esempio, n. 85DE59); colore: #AAAAAA (o qualsiasi altro valore); text-align: center; "nella tua dichiarazione. Quando si visualizza in anteprima la pagina nel browser, il tuo link sarà ora simile pulsanti rettangolari.

5

Definire il valore di attivazione nella sezione stili CSS: "un: hover {}"; nella definizione di stile, aggiungere valori diversi per "background-color" e "colore".

6

Testare l'immagine nel browser per assicurarsi che i collegamenti cambiano colore quando il mouse si trova sopra i pulsanti. Se un collegamento viene modificato, lo faranno tutti i cambiamenti.

Consigli & Avvertenze

  • È inoltre possibile aggiungere valori CSS per l'altezza della riga, imbottitura, bordo, decorazione del testo e altre proprietà CSS per migliorare l'aspetto dei pulsanti.
  • È possibile utilizzare CSS per scambiare immagini per rollover digitando "sfondo: #000000 url (percorso dell'immagine e nome) no-repeat sinistra-alto;" al posto della definizione di colore di sfondo nelle definizioni di stile di ancoraggio ("a"). Utilizzo della stessa dichiarazione ma con il nome dell'immagine di rollover nell'una: hover definizioni.