今天我們來學習如何使用CSS創建一個仿歌單頁面的手機版。以下是示例頁面的截圖：

首先，我們需要為頁面添加一些樣式。以下是示例CSS代碼：

body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 500px;  /* 頁面最大寬度 */
margin: 0 auto;  /* 居中 */
}
.header {
text-align: center;  /* 文字居中 */
padding: 20px 0;  /* 上下各20像素的內邊距 */
background-color: #fff;  /* 白色背景色 */
margin-bottom: 20px;  /* 底部留出20像素的空隙 */
}
.title {
font-size: 24px;  /* 標題字號 */
font-weight: bold;  /* 粗體 */
color: #333;  /* 標題顏色 */
}
.content {
background-color: #fff;  /* 白色背景色 */
padding: 20px;  /* 內邊距20像素 */
border-radius: 5px;  /* 圓角 */
}
.list {
margin: 0;  /* 去掉列表默認的外邊距 */
padding: 0;  /* 去掉列表默認的內邊距 */
list-style: none;  /* 去掉列表默認的符號 */
}
.item {
display: flex;  /* 使用 Flexbox 布局 */
margin-bottom: 10px;  /* 底部留出10像素的空隙 */
align-items: center;  /* 垂直居中 */
}
.item img {
width: 60px;  /* 縮略圖寬度 */
height: 60px;  /* 縮略圖高度 */
border-radius: 50%;  /* 圓形 */
margin-right: 10px;  /* 右側留出10像素的空隙 */
}
.item .name {
font-size: 18px;  /* 歌曲名字體大小 */
font-weight: bold;  /* 粗體 */
color: #333;  /* 歌曲名稱顏色 */
}
.item .artist {
font-size: 14px;  /* 歌手名字號 */
color: #666;  /* 歌手名稱顏色 */
}
.item .play {
margin-left: auto;  /* 保持右側對齊 */
color: #f00;  /* 紅色播放符號 */
font-size: 20px;  /* 播放符號字號 */
}

接下來，讓我們使用 HTML 和 CSS 創建示例頁面：

如您所見，我們創建了一個包含歌曲縮略圖、歌曲名稱、歌手名和播放圖標的簡單歌單頁面。您可以根據自己的需要定制和修改此示例。