February 21
Il file system verticale viene comunemente utilizzato per memorizzare molti documenti cartacei in modo compatto. I documenti sono tenute verticalmente e front-to-back impilati, ciascuno con una scheda esposta che può essere tirato per spostare altri file allontanato per accedervi. Imitare questo meccanismo di archiviazione sulla tua pagina web in HTML sfruttando il "hover" pseudo-classe in un foglio di stile CSS interno (CSS) per rivelare i file quando il mouse si muove dell'utente sulla linguetta corrispondente.
1 Inserire il seguente codice CSS tra i tag "testa" del documento HTML:
<Style type = "text / css">
corpo{
margin: 0px;
padding: 0px;
background-color: khaki;
}
.tabwrapper {
background-color: white;
border-bottom: 1px grigio solido;
Altezza: 30px;
padding-top: 5px;
padding-right: 5px;
}
.tab {
display: inline-block;
Altezza: 19px;
font-size: 16px;
padding: 5px 5px 10px 10px;
margin-left: 5px;
border: 1px grigio solido;
background-color: khaki;
}
.tab: hover {
border-bottom: 1px kaki solido;
}
.file{
display: none;
}
.tab: hover {.FILE
display: inline-block;
position: absolute;
padding-left: 5px;
padding-top: 5px;
sinistra: 0px;
top: 34px;
}
</ Style>
2 Aggiungere il seguente codice al corpo del documento HTML:
<Div class = "tabwrapper">
<Div class = "tab"> File 1 <div class = "file"> File 1 Sommario </ div> </ div>
<Div class = "scheda"> File 2 <div class = "file"> File 2 Indice </ div> </ div>
<Div class = "scheda"> File 3 <div class = "file"> File 3 Indice </ div> </ div>
<Div class = "scheda"> File 4 <div class = "file"> File 4 Indice </ div> </ div>
</ Div>
Posizionare il titolo di ogni file all'interno degli elementi div "tab", e il contenuto di ogni file all'interno delle nidificate div "File".
3 Salvare la pagina e caricare in un browser Web. Muovi il mouse sulle schede in alto a rivelare il loro contenuto. È possibile aggiungere schede copiando e incollando la quinta riga del codice dal punto 2, ma dovrebbe evitare di aggiungere così tanti che superano la larghezza di una tipica finestra del browser.