在網站界面設計中，CSS是一種非常重要的工具。它可以用來美化和改進頁面元素的樣式，使網站具有更好的交互性和視覺感受。下面，我們將通過實例來介紹如何使用CSS來設計一個簡單的在線購物網站頁面。

/* 使用CSS來設置網頁的背景顏色和字體樣式 */
body {
background-color: #F1F1F1;
font-family: Arial, sans-serif;
}
/* 設置header區域的樣式 */
header {
background-color: #FFFFFF;
height: 80px;
border-bottom: 1px solid #DDDDDD;
margin-bottom: 20px;
}
/* 設置網頁中心的布局 */
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
/* 設置導航欄樣式 */
.nav {
display: inline-block;
height: 40px;
margin-top: 20px;
}
/* 設置搜索框和購物車圖標 */
.search {
display: inline-block;
height: 40px;
margin-left: auto;
}
.cart {
display: inline-block;
height: 40px;
}

上面的代碼中，我們使用了CSS來設置網頁的背景顏色和字體樣式。然后，我們設置了header區域的樣式，包括設置背景色、高度、下邊框線和外邊距。接著，我們使用flex布局來設置網頁中心的布局。這里，我們設置了最大寬度為1200px，以及居中對齊。我們使用了flex-wrap屬性來讓元素在一行放不下時自動換行。

在導航欄的樣式設計中，我們使用了display屬性來設置元素的布局方式。我們為導航欄和搜索框等元素設置了高度、外邊距和內邊距的大小。這樣，我們就打造了一個美觀而實用的商城購物網站頁面。