Una tarjeta es un contenedor de contenido flexible y extensible. Puede incluir encabezado, pie de página y una amplia variedad de contenido. W3.CSS ayuda a los desarrolladores a agregar efectos de papel a los elementos. Contiene tres tipos de clases:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
tarjeta w3 |
Se utiliza para agregar una sombra de cuadro de 2px al elemento. |
|
2. |
w3-tarjeta-2 |
Es lo mismo que la clase de tarjeta w3. |
|
3. |
w3-tarjeta-4 |
Se utiliza para agregar una sombra de cuadro de 4px al elemento. |
Ejemplo: uso de diferentes clases de tarjetas en la página 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-xlarge sets font size to 16px. --> <h2 class="w3-text-green w3-xlarge"> Welcome To GFG </h2> </div> <h4 class="w3-container w3-text-green"> 1. w3-card Class: </h4> <!-- w3-pink sets the background color pink --> <div class="w3-container w3-card w3-pink w3-margin"> <!-- w3-text-white sets the text color to white. --> <p class="w3-text-white"> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> <h4 class="w3-container w3-text-green"> 2. w3-card-2 Class: </h4> <!-- w3-pink sets the background color orange --> <div class="w3-container w3-card-2 w3-orange w3-margin"> <!-- w3-text-white sets the text colour to white. --> <p class="w3-text-white"> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> <h4 class="w3-container w3-text-green"> 3. w3-card-4 Class: </h4> <!-- w3-pink sets the background colour teal --> <div class="w3-container w3-card-4 w3-teal w3-margin"> <!-- w3-text-white sets the text colour to white. --> <p class="w3-text-white"> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> </body> </html>
Producción:
Ejemplo: Añadir una tarjeta con Encabezado y Pie de página.
<!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-xlarge sets font size to 16px. --> <h2 class="w3-text-green w3-xlarge"> Welcome To GFG </h2> </div> <!-- Creating Card with some Margin --> <div class="w3-card-4 w3-margin"> <!-- Adding header --> <header class="w3-container w3-teal"> <h1>GFF-Header</h1> </header> <!-- Adding Content --> <div class="w3-container"> <p> GeeksforGeeks is a Computer Science portal for geeks. </p> </div> <!-- Adding Footer --> <footer class="w3-container w3-teal"> <h5>GFG-Footer</h5> </footer> </div> </body> </html>
Producción:
Nota: De manera similar, uno puede usar la etiqueta img para insertar una imagen en la tarjeta si lo desea.
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