增加标尺并实现尺子效果
parent
15a3999378
commit
2d529b7e9b
|
|
@ -354,3 +354,4 @@ body {
|
|||
100% {background-size:120%}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,472 @@
|
|||
<!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>
|
||||
|
|
@ -80,6 +80,8 @@
|
|||
<div>
|
||||
<div class="progress-4"></div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div class="box-inner">
|
||||
|
|
|
|||
Loading…
Reference in New Issue