CSS3寫標(biāo)尺非常簡單，可以讓網(wǎng)頁看起來更加炫酷美觀。下面，我們就來學(xué)習(xí)一下CSS3如何制作標(biāo)尺。

.ruler {
width: 100%;
height: 50px;
background-color: #F7F7F7;
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.ruler span {
position: relative;
bottom: 0;
font-size: 12px;
line-height: 50px;
color: #999;
}
.ruler span:before {
position: absolute;
content: '';
width: 1px;
height: 20px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #CCC;
}
.ruler span:nth-child(10):before {
height: 30px;
}
.ruler span:nth-child(5):before {
height: 40px;
}

以上是CSS3代碼片段，我們可以看到，首先定義了一個(gè)包含標(biāo)尺的容器，其width為100%，height為50px，背景色為#F7F7F7，采用了display:flex，justify-content:space-between的布局方式，以保證每個(gè)標(biāo)尺之間的距離相等。

接著，定義了標(biāo)尺的樣式，采用了相對定位，字體大小為12px，顏色為#999，通過:before偽元素實(shí)現(xiàn)了底部的橫線，高度分別為20px、30px和40px。

最后將標(biāo)尺樣式應(yīng)用到HTML元素中，即可得到一個(gè)炫酷的標(biāo)尺效果。