在現代的電商市場中，頁面設計至關重要。使用CSS來創建頁面布局和樣式是一個非常流行的選擇。下面是一個簡單的CSS代碼示例，用于創建一個基本的電子商務頁面。

/* 為整個頁面設置基本的字體和字號 */
body{
font-family: Arial, sans-serif;
font-size: 16px;
}
/* 為頁面標題設置字體、顏色和大小 */
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 28px;
color: #333;
}
/* 為導航鏈接設置樣式 */
.nav-link{
font-size: 18px;
color: #666;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
background-color: #f5f5f5;
}
/* 為主要內容區域創建網格布局 */
.main-wrapper{
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
/* 為商品列表創建樣式 */
.product{
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
padding: 15px;
margin-bottom: 20px;
}
/* 為商品圖片設置樣式 */
.product img{
display: block;
margin: 0 auto;
max-width: 100%;
}
/* 為商品標題設置樣式 */
.product h2{
font-size: 24px;
color: #333;
margin: 10px 0;
}
/* 為商品價格設置樣式 */
.product .price{
font-size: 22px;
color: #f60;
margin-bottom: 10px;
}
/* 為購物車按鈕設置樣式 */
.cart-btn{
display: block;
width: 100%;
background-color: #f60;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
}
/* 為頁腳創建樣式 */
footer{
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
/* 為頁腳鏈接設置樣式 */
footer a{
color: #fff;
text-decoration: none;
}

以上CSS代碼只是一個示例，并且在實際項目中可能需要進行修改以適應特定需求。但是，通過使用類似于上面的CSS代碼，您可以創建一個美觀、現代的電商頁面，使您的用戶更容易瀏覽您的網站并購買您的產品。