December 24
menu rollover sono un metodo efficiente per organizzare i contenuti del sito, rendendo il sito più facile per gli utenti di navigare. software di progettazione Web di solito comprende strumenti per fare i menu di ribaltamento, ma questi menu possono anche essere creati utilizzando un semplice editor di testo e il metodo fogli di stile CSS o il metodo tabelle.
1 Impostare la struttura di base del documento HTML:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
2 Inserire il codice seguente tra i tag <head> e </ head> tag:
<Link href = "rollovers.css" type = "text / css" rel = "stylesheet">
3 Creare il foglio di stile con la creazione di un nuovo documento di testo intitolato "rollovers.css."
4 Digitare il seguente codice HTML per creare lo spazio per contenere il menu e definire la larghezza del menu:
<Div id = "lista-menu">
</ Div>
list-menu {
width: 132px;
}
5 Creare i link del menu in una lista HTML non ordinata:
<Ul>
<Li> <a href="#"> Articolo </a> </ li>
<Li> <a href="#"> Articolo </a> </ li>
<Li> <a href="#"> Articolo </a> </ li>
</ Ul>
6 Rimuovere i trattini e proiettili di default:
ul-lista del menu {
margin: 0;
padding: 0;
list-style-type: none;
}
7 Definire gli stili di testo aggiungendo il seguente codice al di sopra CSS:
font-family: Verdana, Arial, sanf-serif;
font-size: 12px;
8 Creare stili per i collegamenti nel menu:
list-menu a {
blocco di visualizzazione;
width: 120px;
padding: 2px 2px 2px 10px;
border: 1px solid # 000000;
sfondo: #dcdcdc;
text-decoration: none;
}
Modificare i valori di larghezza, padding, bordo, sfondo e decorazione testo di conseguenza, a seconda delle preferenze.
9 Creare l'effetto rollover definendo gli stati visitati, attivi e librarsi per i collegamenti:
list-menù a: link, # list-menù a: active, # list-menù a: visited {
color: # 000000;
}
list-menù a: hover {
border: 1px solid # 000000;
background: # 333333;
colore: #FFFFFF;
}
10 Creare i collegamenti con ogni link contenuto in una cella di tabella:
<Div class = "menu">
<Summary table = "" cellpadding = "1" cellspacing = "1" class = "menu">
<Tr>
<Td> <a href="#" onfocus="this.blur()"> collegamento 1 </a> </ td>
</ Tr>
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 2 </a> </ td>
</ Tr>
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 3 </a> </ td>
</ Tr>
<Tr>
</ Table>
</ Div>
11 Specifica uno stile per la tavola con la larghezza desiderata:
table.menu un {
width: 125px;
border: 1px solid # 333333;
blocco di visualizzazione;
}
12 Specificare lo stile di base per la "div" classe Menu:
div.menu un {
color: # 333333;
sfondo: #FFFFFF;
text-decoration: none;
font-size: 11px;
line-height: 16px;
font-family: Tahoma, Verdana, sans-serif;
padding: 2px 5px;
}
Cambiare il colore, sfondo, decorazione del testo, dimensione del carattere, altezza della linea, famiglia di caratteri e valori imbottitura di conseguenza, a seconda delle preferenze.
13 Specificare i colori dei link e gli stili hover per creare l'effetto di evidenziazione:
div.menu a: link {
color: # 333333;
background: # CCCC99;
}
div.menu a: active {
color: # 000000;
background: # CCCC99;
}
div.menu a: visited {
color: # 333333;
background: # CCCC99;
}
div.menu a: hover {
colore: #eeeeee;
background: # 333333;
border: 1px solid # 000000;
}