在網頁設計中，商品列表是非常常用且重要的部分。通過一個好的商品列表能夠幫助用戶快速準確地了解產品信息，提高用戶體驗。而實現商品列表的關鍵就在于CSS模板的設置。

/* 商品列表框架部分 */
.goods-list{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
/* 商品項部分 */
.goods-item{
width: 31%;
margin-bottom: 20px;
padding: 15px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
transition: all .3s ease;
}
.goods-item:hover {
box-shadow: 0 8px 16px rgba(0,0,0,.2);
transform: translateY(-4px);
}
/* 商品圖片部分 */
.goods-img{
width: 100%;
height: 0;
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
.goods-img img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* 商品標題部分 */
.goods-title{
font-size: 16px;
height: 36px;
line-height: 1.5;
color: #333;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 商品價格部分 */
.goods-price{
color: #cc3333;
font-size: 16px;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
}

以上代碼就是一個簡單的商品列表CSS模板，首先設置了商品列表框架的樣式，然后對每個商品項進行了詳細的設置，包括圖片、標題和價格等。比較重要的是，為了提高用戶的交互體驗和卡片的美觀度，還設置了鼠標滑過效果和邊框陰影等樣式。通過修改顏色、寬度、高度等CSS屬性，可以實現自己所需要的商品列表樣式。