Cómo crear: Tarjeta de producto

Aprende a usar CSS para crear una tarjeta de producto.

Jeans
Jeans Personalizados

$19.99

Alguno de texto sobre los vaqueros. Super delgados y cómodos lorem ipsum lorem vaquerosum. Lorem vaquerosun denim lorem vaquerosum.

亲自试一试

Cómo crear una tarjeta de producto

Primer paso - Añadir HTML：

<div class="tarjeta">
  <img src="jeans3.jpg" alt="Jeans" style="ancho:100%">
  <h1>Jeans Personalizados</h1>
  <p class="precio">$19.99</p>
  <p>Alguno de texto sobre los vaqueros..</p>
  <p><botón>Añadir al carrito</botón></p>
</div>

Segundo paso - Añadir CSS：

.tarjeta {
  sombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  ancho Máximo: 300px;
  margen: auto;
  alineación_de_texto: centro;
  família_de_letras: arial;
}
.precio {
  color: gris;
  tamaño_de_letra: 22px;
}
.botón de tarjeta {
  borde: none;
  borde: 0;
  rejilla: 12px;
  color: blanco;
  color_de_fondo: #000;
  alineación_de_texto: centro;
  cursor: puntero;
  ancho: 100%;
  tamaño_de_letra: 18px;
}
.botón de tarjeta:hover {
  opacidad: 0.7;
}

亲自试一试