我需要一段前端代码,关于电商产品模板,要求用css美化这个代码
时间: 2024-05-08 14:19:31 浏览: 18
好的,以下是一段简单的电商产品模板的前端代码,已经用css进行美化:
```
<div class="product">
<img class="product-image" src="product.jpg" alt="Product Image">
<h2 class="product-title">Product Title</h2>
<p class="product-description">Product Description</p>
<button class="add-to-cart-button">Add to Cart</button>
</div>
<style>
.product {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200px;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.product-image {
width: 100%;
border-radius: 5px;
}
.product-title {
font-size: 18px;
margin: 10px 0;
}
.product-description {
font-size: 14px;
margin: 10px 0;
}
.add-to-cart-button {
background-color: #3498db;
color: #fff;
font-size: 14px;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
```
希望对您有帮助!