Guies

Com desfer-se de pics a CSS

Per defecte, quan un navegador web mostra una llista no ordenada en una pàgina web, cada element de la llista té una vinyeta anterior. Aquest comportament no sempre és desitjable i pot ser que no s’adapti al disseny general de la pàgina. Amb CSS, podeu crear una classe per eliminar les vinyetes de llistes específiques de la vostra pàgina o podeu orientar directament l'etiqueta HTML "ul" per eliminar les vinyetes de totes les llistes de la pàgina.

1

Creeu una nova pàgina HTML en un editor de text o una aplicació de desenvolupament web.

2

Creeu una llista senzilla sense ordenar afegint l'HTML següent al cos de la pàgina:

  • Tema 1
  • Tema 2
  • Tema 3

Deseu la pàgina i visualitzeu-la en un navegador web. Veureu que el navegador mostra una vinyeta al costat de cada element de la llista.

3

Afegiu el codi següent a la secció de la pàgina:

Això elimina les vinyetes de qualsevol llista mitjançant la classe "myList". Deseu la pàgina i torneu a carregar-la al navegador web per veure els canvis.

4

Canvieu la regla CSS:

.myList {list-style-type: none;}

Per a:

ul {list-style-type: none; }

Això s'orienta a l'etiqueta HTML "ul" i elimina les vinyetes de totes les llistes no ordenades de la vostra pàgina. Afegiu una segona llista d'exemple i visualitzeu la pàgina al navegador web per verificar que les dues llistes es mostrin sense vinyetes.