472 lines
11 KiB
HTML
472 lines
11 KiB
HTML
<!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%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.ruler2 {
|
|
position: relative;
|
|
width: 14px;
|
|
margin: 20px auto;
|
|
height: 500px;
|
|
}
|
|
|
|
.ruler2 .cm,
|
|
.ruler2 .mm {
|
|
position: absolute;
|
|
border-top: 1px solid #555;
|
|
height: 10%;
|
|
width: 14px;
|
|
}
|
|
|
|
.ruler2 .cm:after {
|
|
position: absolute;
|
|
right: -15px;
|
|
font: 11px/1 sans-serif;
|
|
}
|
|
|
|
.ruler2 .mm {
|
|
width: 5px;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(5) {
|
|
width: 10px;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(1) {
|
|
top: 0%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(1):after {
|
|
content: "0";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(2) {
|
|
top: 10%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(2):after {
|
|
content: "1";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(3) {
|
|
top: 20%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(3):after {
|
|
content: "2";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(4) {
|
|
top: 30%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(4):after {
|
|
content: "3";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(5) {
|
|
top: 40%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(5):after {
|
|
content: "4";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(6) {
|
|
top: 50%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(6):after {
|
|
content: "5";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(7) {
|
|
top: 60%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(7):after {
|
|
content: "6";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(8) {
|
|
top: 70%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(8):after {
|
|
content: "7";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(9) {
|
|
top: 80%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(9):after {
|
|
content: "8";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(10) {
|
|
top: 90%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(10):after {
|
|
content: "9";
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(11) {
|
|
top: 100%;
|
|
}
|
|
|
|
.ruler2 .cm:nth-of-type(11):after {
|
|
content: "10";
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(1) {
|
|
top: 10%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(2) {
|
|
top: 20%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(3) {
|
|
top: 30%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(4) {
|
|
top: 40%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(5) {
|
|
top: 50%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(6) {
|
|
top: 60%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(7) {
|
|
top: 70%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(8) {
|
|
top: 80%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(9) {
|
|
top: 90%;
|
|
}
|
|
|
|
.ruler2 .mm:nth-of-type(10) {
|
|
top: 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>
|
|
|
|
<section class="ruler2">
|
|
<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>
|
|
|
|
</body>
|
|
|
|
</html> |