隨著智能手機的普及，手機商城成為人們購買手機的主要途徑。而優秀的手機商城網站需要具備良好的用戶體驗和美觀的頁面設計。其中，CSS樣式的運用為頁面設計提供了無限可能。

/* 網站頭部樣式 */
header{
background-color: #333;
height: 70px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
/* 網站底部樣式 */
footer{
background-color: #f6f6f6;
height: 80px;
color: #999;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
/* 常用按鈕樣式 */
.button{
background-color: #f60;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
/* 商品列表樣式 */
.product-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product{
width: 25%;
margin-bottom: 50px;
}
.product img{
width: 100%;
}
.product-name{
margin-top: 10px;
font-size: 14px;
color: #333;
}
.product-price{
margin-top: 5px;
font-size: 16px;
color: #f60;
font-weight: bold;
}

以上是手機商城網站中常用的CSS樣式，通過合理運用，可以為用戶帶來良好的視覺效果和使用體驗。同時，注意網站的響應式設計，確保在不同設備上展示效果一致。