programación0011

Lista de CSS es muy útil y vital en el diseño web. Hay muchos usos de) Lista desordenada (como la navegación horizontal, vertical de navegación, la creación de una caja o cualquier tipo de lista. En este post te mostramos algunos métodos de listas CSS realmente útiles que puede utilizar para crear, lista vertical horizontal o cuadro de lista de CSS. puede descargar todos los métodos utilizados en este blog en un solo archivo comprimido.
Antes de crear cualquier cosa Vamos a ver cómo se utilizan listas de CSS:



 

Por cada lista aquí es el diseño HTML básico

<div id="the name of the id">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
</ul>
</div>

Ahora vamos aplicar algunas propiedades CSS para convertirlo en una lista, 

que se utiliza para la navegación o simplemente una simple lista.

display: inline

La primera propery CSS que vamos a utilizar es en línea.  

Esta es la propiedad CSS display de forma predeterminada y  

generará una caja de línea. 

 No habrá descanso antes o después y fluyó como una caja de 

línea única. En palabras simples, se muestra en una línea, en 

lugar de dos líneas. 
Aquí está la CSS estamos aplicando la creación de la primera 

lista horizontal 

#horizontal_list {
 height: 20px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.45em;
 color: #8e9090;
}
#horizontal_list ul {
 margin: 0;
 padding: 0;

}
#horizontal_list ul li {
 display: inline;
 padding-left: 5px;
}

Así es como debe ser similar después de 

aplicar el id CSS = "horizontal_list" para el código HTML

lista Vertical 

Lista vertical son más fáciles de crear, pero le mostrará dos 

técnicas diferentes que son útiles. En primer lugar vamos a ver  

el resultado y el CSS:

/*-------------------Vertical List 1---------------------*/

#vertical_list_1 {
 margin-left: 30px;
}
#vertical_list_1 ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: normal;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_1 ul li {
 padding-left: 8px;
 margin-left: 0;
 list-style-image: url("bullet_green.png");
}
/*-------------------Vertical List 2---------------------*/

#vertical_list_2 {
 margin-left: 5px;
}
#vertical_list_2 ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: normal;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_2 ul li {
 padding-left: 20px;
 margin-left: 0;
 list-style-image: none;
 list-style-type: none;
 background: url("bullet_orange.png") no-repeat;
 background-position: 0 4px;
}

La diferencia aquí es que la imagen-list-style tiene 

una distancia por defecto de la imagen con el texto de 

lista y no se puede cambiar, además de dentro y fuera 

de valor. Considerando que, con el uso de antecedentes 

y background-position de la imagen puede ser movido de 

izquierda a valor justo (valor x), de arriba a abajo  

(valor de y). También hay algún otro valor, tales como: 

 arriba, abajo y más. Compruebe la especificación W3  

para todo el valor. 
Caja utilizando Lista CSS 

Lista de CSS también son útiles para la caja de la 

creación. Lo más común es la caja CSS se utiliza para 

el pie de página de los sitios web. El truco detrás de  

la creación de una caja está teniendo un ancho 

establecido y la altura de cada elemento <li>. También 

utilizamos desbordamiento: propiedad oculta por lo que

 cualquier texto no va a salir de la caja. Así que aquí está la CSS:

/*-------------- Verticle box -------------------*/
#vertical_list_box {
 margin-left: 5px;
}
#vertical_list_box ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_box ul li {
 display: inline-block;
 clear: none; /* no floating *?
 background: #e7f4f8;
 width: 280px;
 height: 200px;
 overflow: hidden; /* hide if the text is too long *?
 margin-left: 4px;
 padding: 4px;
 list-style-image: none;
 list-style-type: none;
 -moz-border-radius: 5px;
       -webkit-border-radius: 5px;

}

Los estilos adicionales están en el archivo incluido y así es como debe ser similar.

 

Son muchas más las técnicas que se pueden utilizar para crear listas hermosas.