ubiquitour.com

HTML Tutorial de balas

HTML Tutorial de balas

Generalmente, cuando usted vea "balas" en la web, crees que pequeños puntos sólidos. Si bien es cierto que usando < UL > es la forma más sencilla de hacer una lista con viñetas, no es la única manera. Este artículo le mostrará tres técnicas, incluyendo < UL >, para incluir elementos con viñetas en sus páginas web. No dude en copiar el ejemplo de código en tu página y ver cómo funciona.

Utilizando < UL >

HTML Tutorial de balas

La primera y más común manera de agregar una lista con viñetas es con la etiqueta < UL >. Con un poco de CSS en la página, puede asignar la lista para utilizar una imagen pequeña para balas, en lugar de las formas por defecto: punto, círculo y cuadrado sólido.Ejemplo:estilo de < ><!--incluya esta entre < head > y < / cabeza > >-->UL #myList {lista-estilo-type: none; list-style-image: url(images/arrow.gif)}< / estilo >...< ul id = "myList" ><!--y poner esto en algún lugar después de < >-->< li > una imagen se utiliza para esta bala, en lugar de la forma por defecto. < /li >< li > no dude en sustituir su propia imagen y a ver que pasa. < /li >< /ul >

Utilizando < TABLE > con elementos < IMG >

Otra forma de incluir balas más "anticuado" pero permite mayor flexibilidad si desea agregar JavaScript o rollovers para hacerla más interactiva. Agregar una etiqueta < TABLE > con dos columnas y tantas filas como tienen artículos en su lista con viñetas.Ejemplo:< la mesa estilo = "frontera: none;" ><!--esto hace que las líneas de la tabla--> invisible< tbody >< tr >< td >< img align = "absmiddle" >< /td >< td > ésta aparecerá como la primera lista elemento < /td >< /tr >< tr >< td >< img align = "absmiddle" >< /td >elemento < td > de la lista segunda y así sucesivamente... < /td >< /tr >< / table >

Usando < DIV > con reglas CSS

HTML Tutorial de balas

Más contemporáneo que tablas o listas sin ordenar, se trata de la técnica de "web 2.0", que permite la mayor flexibilidad al aplicar tecnologías avanzadas---como AJAX, Ruby o PHP---a tu página.Ejemplo:estilo de < >{.myBullets}padding-left: 2em;vertical-align: middle;}.myBullets: antes de {}contenido: url(arrow.gif);}< / estilo >...< div clase = "myBullets" > este texto aparece como un elemento con viñetas. < / div >< div clase = "myBullets" > esto parece la segunda bala y así sucesivamente... < / div >