CÁCH THỨC - Thẻ sản phẩm
Tìm hiểu cách tạo thẻ sản phẩm bằng CSS.
Quần jean được thiết kế riêng
$ 19,99
Một số văn bản về quần jean. Quần jean ăn sáng siêu mỏng và thoải mái. Kiểm tra quần jean ăn sáng denim jeamsun.
Cách tạo thẻ sản phẩm
Bước 1) Thêm HTML:
Thí dụ
<div class="card">
<img src="jeans3.jpg" alt="Denim Jeans"
style="width:100%">
<h1>Tailored Jeans</h1>
<p
class="price">$19.99</p>
<p>Some text about the jeans..</p>
<p><button>Add to Cart</button></p>
</div>
Bước 2) Thêm CSS:
Thí dụ
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.price
{
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color:
white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}