用CSS划一把刻度尺

最新推荐文章于 2024-02-27 16:02:18 发布
weixin_34038293
最新推荐文章于 2024-02-27 16:02:18 发布
阅读量1.4k
点赞数
文章标签：前端 python ViewUI
原文链接：https://my.oschina.net/u/616147/blog/740633
版权
2019独角兽企业重金招聘Python工程师标准>>>
效果预览

刻度尺
代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>刻度尺</title>
    <style type = "text/css">
        .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%;
        }

    </style>
</head>
<body>

    <section class = "ruler">
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm">
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
                <section class = "mm"></section>
        </section>
        <section class = "cm"></section>
    </section>


</body>
</html>
转载于:https://my.oschina.net/u/616147/blog/740633