Tecnología

Inicio

Cómo crear verticales fichas de archivo en HTML

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">