-
Cómo crear verticales fichas de archivo en HTML
-
El sistema de archivos vertical se utiliza comúnmente para almacenar muchos documentos en papel en una forma compacta. Los documentos están en posición vertical y frontal con espalda apilados, cada uno con una pestaña expuesta que se pueda tirar para mover los otros archivos fuera del camino para acceder a ella. Imitar este mecanismo de presentación en su página web en HTML mediante la explotación del "flotar" pseudo-clase en una hoja de estilo en cascada interna (CSS) para revelar los archivos cuando el usuario del ratón se mueve sobre la pestaña correspondiente.Instrucciones
1 Inserte el siguiente código CSS entre las etiquetas "cabeza" de su documento HTML:
<Style type = "text / css">
cuerpo{
margen: 0px;
padding: 0px;
background-color: color caqui;
}
.tabwrapper {
background-color: blanco;
border-bottom: 1px sólido de color gris;
altura: 30px;
padding-top: 5px;
padding-right: 5px;
}
.lengüeta{
display: inline-block;
altura: 19px;
font-size: 16px;
padding: 5px 5px 10px 10px;
margin-left: 5px;
frontera: 1px sólido de color gris;
background-color: color caqui;
}
.tab: hover {
border-bottom: 1px de color caqui sólido;
}
.archivo{
display: none;
}
.tab: hover {.FILE
display: inline-block;
position: absolute;
padding-left: 5px;
padding-top: 5px;
left: 0px;
top: 34px;
}
</ Style>
2 Agregue el código siguiente en el cuerpo del documento HTML:
<Div class = "tabwrapper">
<Div class = "pestaña"> Archivo 1 <div class = "archivo"> Archivo 1 Contenido </ div> </ div>
<Div class = "pestaña"> Archivo 2 <div class = "archivo"> Archivo 2 Contenido </ div> </ div>
<Div class = "pestaña"> Archivo 3 <div class = "archivo"> Archivo 3 Contenido </ div> </ div>
<Div class = "pestaña"> Archivo 4 <div class = "archivo"> Archivo 4 Contenido </ div> </ div>
</ Div>
Coloque el título de cada archivo dentro de la "pestaña" elementos div, y el contenido de cada archivo dentro de los divs anidados "archivo".
3 Guarde la página y lo carga en un navegador Web. Mueva su ratón sobre las pestañas en la parte superior para revelar su contenido. Puede añadir pestañas copiando y pegando la quinta línea del código de la Etapa 2, pero debe evitar la adición de tantos que exceden el ancho de una ventana típica navegador.
Consejos y advertencias
- Agregue la siguiente línea al principio del documento HTML para garantizar un comportamiento correcto de la página en Internet Explorer:
- <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">