List-style {Variedades}

Cuando hacemos un "menu" o "lista" el código común seria:
<ul>
<li><a href="URL" target="_blank"> TITLE </a></li>
<li><a href="URL" target="_blank"> TITLE </a></li>
<li><a href="URL" target="_blank"> TITLE </a></li>
<li><a href="URL" target="_blank"> TITLE </a></li>
</ul>
& nos aparecerá como:
1.- ESTILO LISTA
  • TITLE
  • TITLE
  • TITLE
  • TITLE
2.- ESTILO NUMERAL
  • TITLE
  • TITLE
  • TITLE
  • TITLE
Hoy veremos como modificar los "puntos & números" que aparecen predeterminados:
Vamos a Plantilla / Personalizar / Añadir CSS, donde pegaremos:
ul li {
list-style: TIPO;
} li {
list-style: TIPO;
}
Donde nos indica "TIPO" es donde ira el tipo de lista {numeral o lista} que deseamos.
Las variedades que se pueden elegir son:

Estilos Listas:
  • list-style: circle;
  • list-style: disc;
  • list-style: square;
  • list-style: url(URLDETUIMAGEN);

Estilos Numerales:
  • list-style: armenian;
  • list-style: cjk-ideographic;
  • list-style: decimal-leading-zero;
  • list-style: georgian;
  • list-style: hebrew;
  • list-style: hiragana;
  • list-style: hiragana-iroha;
  • list-style: katakana;
  • list-style: katakana-iroha;
  • list-style: lower-alpha;
  • list-style: lower-greek;
  • list-style: lower-latin;
  • list-style: lower-roman;
  • list-style: upper-alpha;
  • list-style: upper-latin;
  • list-style: upper-roman;
  • list-style: decimal;
  • list-style: none;

8 comentarios:

  1. ¡Muchas gracias por el aporte! :D

    ResponderEliminar
  2. buen tutorial :DDDD gracias por el aporte

    ResponderEliminar
  3. por cierto he estado mirando tus afiliados y no me veo entre ellos D: y pense que me habias aceptado T-T

    ResponderEliminar
  4. ¡Hola!:D Espero que estés bien♥
    Te dejé un premio en mi blog ^^
    Saludos y feliz año x3

    ResponderEliminar
  5. ¡Hola! Tienes un premio en mi blog. ^^
    http://b1a4-fanclub-spain.blogspot.com.es/2013/01/premios-el-que-se-concedan-este-premio.html

    ResponderEliminar
  6. no entendi la entrada soy una burra xD

    ResponderEliminar
  7. Hola Mello!
    Y si en vez de una imagen quiero poner un triángulo? Como éste: ▼?
    Tengo que cambiar "TIPO" por el triángulo?
    Saludos <3

    ResponderEliminar