Il sistema di file verticali è comunemente utilizzato per archiviare molti documenti cartacei in modo compatto. I documenti sono in posizione verticale e impilati front-to-back, ciascuno con una linguetta sporgente che può essere tirato per spostare altri file fuori del modo di accedervi. Imitare questo meccanismo di archiviazione sulla tua pagina Web in HTML, sfruttando la pseudo-classe "hover" in un interno CSS Cascading Style Sheet () per mostrare i file quando mouse dell'utente si sposta sopra la scheda corrispondente.

Istruzioni

1

Inserire il seguente codice CSS tra i tag di "head" del documento HTML:

< style type = "text/css" >

corpo () {

margin: 0px;

padding: 0px;

sfondo-colore: kaki;

}

.tabwrapper () {

sfondo-colore: bianco;

border-bottom: 1px gray tinta;

Altezza: 30px;

padding-top: 5px;

imbottitura-destra: 5px;

}

{Tab

display: inline-block;

Altezza: 19px;

font-size: 16px;

padding: 5px 10px 5px 10px;

margin-left: 5px;

border: 1px gray tinta;

sfondo-colore: kaki;

}

.Tab:hover () {

border-bottom: 1px kaki solida;

}

.file () {

display: none;

}

.Tab:hover .file () {

display: inline-block;

Posizione: absolute;

padding-left: 5px;

padding-top: 5px;

Left: 0px;

Top: 34px;

}

< / stile >

2

Aggiungere il seguente codice al corpo del documento HTML:

< div class = "tabwrapper" >

< div class = "scheda" > File 1 < div class = "file" > contenuto del File 1 < / div >< / div >

< div class = "scheda" > File 2 < div class = "file" > contenuto 2 File < / div >< / div >

< div class = "scheda" > File 3 < div class = "file" > contenuto 3 File < / div >< / div >

< div class = "scheda" > File 4 < div class = "file" > contenuto 4 File < / div >< / div >

< / div >

Inserire il titolo di ogni file all'interno degli elementi div "scheda" e il contenuto di ogni file all'interno del div annidati "file".

3

Salvare la pagina e caricarlo in un browser Web. Muovi il mouse sopra le linguette in alto per rivelare il loro contenuto. È possibile aggiungere schede copiando e incollando la quinta riga del codice dal passaggio 2, ma evitare di aggiungere così tanti che superano la larghezza di una finestra di browser tipico.

Consigli & Avvertenze

• Aggiungere la seguente riga all'inizio del documento HTML per assicurare il corretto funzionamento della pagina in Internet Explorer:
• <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN" "l'http://www.w3.org/TR/html4/strict.dtd" >