商品展示頁面的CSS代碼非常重要，它不僅可以為頁面增添美觀的外觀，還可以改善頁面的用戶體驗。下面是一些關于商品展示頁面的CSS代碼。

/* 商品展示頁面的整體設置 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #F5F5F5;
}
/* 商品容器設置 */
.product-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items:center;
padding: 20px;
margin: 0 auto;
max-width: 1200px;
}
/* 商品卡片設置 */
.product-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #FFF;
border: 1px solid #EBEBEB;
border-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
width: 250px;
margin: 20px;
}
.product-card:hover {
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
/* 商品圖像設置 */
.product-image {
width: 100%;
}
/* 商品信息設置 */
.product-info {
width: 100%;
padding: 10px;
}
.product-info h3 {
margin-top: 0;
font-size: 22px;
}
.product-info p {
margin: 0;
font-size: 18px;
}
/* 商品按鈕設置 */
.product-button {
margin-bottom: 20px;
width: 100%;
padding: 10px;
background-color: #D32F2F;
color: #FFF;
text-align: center;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
}
.product-button:hover {
background-color: #BA2727;
transition: all 0.3s ease-in-out;
}

這些CSS代碼可以輕松地為商品展示頁面增加美觀、易用性的效果。它們也可以為用戶提供一個更愉快的購物體驗。