計步器（步數計）是一種常見的健康應用，它可以幫助我們追蹤每天的步數和活動量。在計步器的實現過程中，CSS是一個十分重要的角色。下面我們來看一下如何使用CSS來實現計步器。

.step-counter {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
height: 100px;
margin: 20px;
}
.step-counter__number {
font-size: 3rem;
font-weight: bold;
color: #007aff;
margin-right: 20px;
}
.step-counter__label {
font-size: 1.5rem;
color: #666;
}

首先，我們創建了一個名為“step-counter”的CSS類，它用于表示計步器的框架。我們使用flexbox布局來使其居中，并添加了一些樣式以使其看起來更加美觀。

在接下來的代碼中，我們創建了兩個子元素，“step-counter__number”和“step-counter__label”。第一個用于顯示步數，第二個則用于顯示“步”字。

在這些元素上，我們使用了一些樣式來使它們看起來更加優美。例如，“step-counter__number”元素使用粗體字體和藍色文本，在可讀性上更加突出。而“step-counter__label”元素則使用了較小的字體和灰色文本，以便將注意力集中在步數上。

通過這個步驟，我們已經成功地創建了一個基本的計步器。我們可以將其添加到自己的網站中，并根據需要進行更改和定制。