[css] 用css畫出一把刻度尺

<div class='ruler'><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'></div> </div> <div id="mentionme">by <a href="https://www.linkedin.com/in/artur-arsalanov-ab3a6895" target="_blank" title="Find me in LinkedIn!">ArturArsalanov</a> </div> .ruler {position: relative;width: 70%;margin: 20px auto;height: 14px; } .ruler .cm, .ruler .mm {position: absolute;border-left: 1px solid #555;height: 14px;width: 10%; } .ruler .cm:after {position: absolute;bottom: -15px;font: 11px/1 sans-serif; } .ruler .mm {height: 5px; } .ruler .mm:nth-of-type(5) {height: 10px; } .ruler .cm:nth-of-type(1) {left: 0%; } .ruler .cm:nth-of-type(1):after {content: "0"; } .ruler .cm:nth-of-type(2) {left: 10%; } .ruler .cm:nth-of-type(2):after {content: "1"; } .ruler .cm:nth-of-type(3) {left: 20%; } .ruler .cm:nth-of-type(3):after {content: "2"; } .ruler .cm:nth-of-type(4) {left: 30%; } .ruler .cm:nth-of-type(4):after {content: "3"; } .ruler .cm:nth-of-type(5) {left: 40%; } .ruler .cm:nth-of-type(5):after {content: "4"; } .ruler .cm:nth-of-type(6) {left: 50%; } .ruler .cm:nth-of-type(6):after {content: "5"; } .ruler .cm:nth-of-type(7) {left: 60%; } .ruler .cm:nth-of-type(7):after {content: "6"; } .ruler .cm:nth-of-type(8) {left: 70%; } .ruler .cm:nth-of-type(8):after {content: "7"; } .ruler .cm:nth-of-type(9) {left: 80%; } .ruler .cm:nth-of-type(9):after {content: "8"; } .ruler .cm:nth-of-type(10) {left: 90%; } .ruler .cm:nth-of-type(10):after {content: "9"; } .ruler .cm:nth-of-type(11) {left: 100%; } .ruler .cm:nth-of-type(11):after {content: "10"; } .ruler .mm:nth-of-type(1) {left: 10%; } .ruler .mm:nth-of-type(2) {left: 20%; } .ruler .mm:nth-of-type(3) {left: 30%; } .ruler .mm:nth-of-type(4) {left: 40%; } .ruler .mm:nth-of-type(5) {left: 50%; } .ruler .mm:nth-of-type(6) {left: 60%; } .ruler .mm:nth-of-type(7) {left: 70%; } .ruler .mm:nth-of-type(8) {left: 80%; } .ruler .mm:nth-of-type(9) {left: 90%; } .ruler .mm:nth-of-type(10) {left: 100%; } #mentionme{ text-align:center;margin-top:10%; }

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 用css画出一把刻度尺的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。