用CSS划一把刻度尺

最新推荐文章于 2025-03-16 08:11:35 发布
转载最新推荐文章于 2025-03-16 08:11:35 发布 · 1.5k 阅读
1 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/616147/blog/740633
文章标签：
#前端 #python #ViewUI
本文介绍了一种使用HTML和CSS创建刻度尺的方法。通过精确布局和定位技术，实现了从0到10厘米的刻度显示，并附带了详细的代码示例。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
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