Las listas son muy útiles en una página web. Se puede utilizar una variedad de contenido, ya que son flexibles y fáciles de administrar. Usamos la clase .w3-ul para la lista. El estilo predeterminado para la lista no tiene bordes, pero podemos usar otras clases para agregar un borde y otros efectos a la lista.
Ejemplo: Agregar una lista en una página web usando W3.CSS.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a List on a page --> <div class="w3-container"> <!-- List --> <ul class="w3-ul"> <!-- List Content --> <li>Data Structure</li> <li>Operating System</li> <li>Algorithm</li> </ul> </div> </body> </html>
Producción:
También podemos agregar bordes usando la clase w3-border en W3.CSS.
Ejemplo: Agregar una lista con borde en una página web usando W3.CSS.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a List on a page --> <div class="w3-container"> <!-- List --> <!-- Adding Border to the list with some border radius --> <ul class="w3-ul w3-border w3-round"> <!-- List Content --> <li>Data Structure</li> <li>Operating System</li> <li>Algorithm</li> </ul> </div> </body> </html>
Producción:
También podemos agregar colores a la lista usando clases de color w3. Estos colores también pueden ser de una clase que se puede desplazar para agregar un efecto de desplazamiento en la lista.
Ejemplo: Agregar una lista con colores en una página web usando W3.CSS.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a List on a page --> <div class="w3-container"> <!-- List --> <!-- Adding Colors to the list --> <ul class="w3-ul"> <!-- List Content --> <li class="w3-pale-blue">Data Structure</li> <li class="w3-pale-red">Operating System</li> <li class="w3-pale-yellow">Algorithm</li> </ul> </div> </body> </html>
Producción:
Incluso podemos cambiar el ancho de la lista usando CSS básico o estilo. La lista tiene el ancho establecido en 100% de forma predeterminada.
Sintaxis:
<div style="width: x%">...</div>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a List on a page --> <div class="w3-container"> <!-- List --> <!-- Setting width of the list to 50% --> <ul class="w3-ul" style="width:50%;"> <!-- List Content --> <li class="w3-pale-blue">Data Structure</li> <li class="w3-pale-red">Operating System</li> <li class="w3-pale-yellow">Algorithm</li> </ul> </div> </body> </html>
Producción:
Las listas también vienen con varios tamaños. Puede establecer el tamaño de la lista de varias clases de tamaño en W3.CSS.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a List on a page --> <div class="w3-container"> <!-- List --> <!-- List with various sizes --> <ul class="w3-ul"> <!-- List Content --> <li class="w3-pale-blue w3-small"> Small Sized List </li> <li class="w3-pale-red w3-large"> Large Sized List </li> <li class="w3-pale-yellow w3-jumbo"> Jumbo Sized List </li> </ul> </div> </body> </html>
Producción:
También puede agregar insignias en la lista. Para agregar una insignia, puede usar la clase w3-badge.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a List on a page --> <div class="w3-container"> <!-- List --> <!-- Adding Badges with the content in the List --> <ul class="w3-ul"> <!-- List Content --> <li class="w3-pale-blue"> Data Structure <span class= "w3-badge w3-blue">1</span> </li> <li class="w3-pale-red"> Operating System <span class= "w3-badge w3-pink">5</span> </li> <li class="w3-pale-yellow"> Algorithm <span class= "w3-badge w3-yellow">0</span> </li> </ul> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA