css纵向标尺如何制作

2020-11-27 来源：爱够旅游网

今天我的一位朋友不会写纵向标尺，我就帮忙了一下忙，现在整理出来了，但是没有前边的数字值，还望各位包涵。

 <body>
 <p>
 <!-- <ul> 
 <li class="right1"><b>0</b></li> 
 <li class="right1"><b>1</b></li> 
 <li class="right1"><b>2</b></li> 
 <li class="right1"><b>3</b></li> 
 <li class="right1"><b>4</b></li> 
 </ul> -->
 <ul> 
 <li class="left1">
 <li class="right11">
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 </li>
 </li> 
 <li class="left1">
 <li class="right11">
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 </li>
 </li> 
 <li class="left1">
 <li class="right11">
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 </li>
 </li>
 <!-- <dl class="font">1000</dl> -->
 <li class="left1">
 <li class="right11">
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 </li>
 </li>
 <li class="left1">
 <li class="right11"></li></li>
 <!-- <li class="left1">
 <li class="right11">
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 <li class="mileft1">
 <li class="miright11"></li>
 </li>
 </li>
 </li> -->
 </ul> 
 </p> 

 </body> <link rel="stylesheet" type="text/css" href="style.css">

 ul { 
 list-style: none; 
 } 

 ul .right1 { 
 position: relative; 
 width: 10px; 
 height: 8px; 
 border-bottom: 1px solid gray; 
 border-left: 1px solid transparent; 
 }
 ul .left1 { 
 position: relative; 
 width: 10px; 
 height: 8px; 
 border-bottom: 1px solid gray; 
 border-right: 1px solid gray; 
 } 
 ul .right11 { 
 /*position: relative; */
 width: 10px; 
 margin-left: 10px; 
 margin-top: -1px; 
 /*height: 20px; */
 border-bottom: 1px solid gray; 
 /*border-right: 1px solid gray; */
 }
 .miright11 { 
 /*position: relative; */
 width: 5px; 
 margin-left: 10px; 
 margin-top: -1px; 
 /*height: 20px; */
 border-bottom: 1px solid gray; 
 /*border-right: 1px solid gray; */
 }
 .mileft1 { 
 /*position: relative; */
 width: 5px; 
 height: 8px; 
 margin-left: 5px; 
 border-bottom: 1px solid gray; 
 border-right: 1px solid gray; 
 }
 /*ul > li:before{
 content:'1';
 }*/

 ul > li + li { 
 border-left-color: gray; 
 } 

 ul > li > b { 
 display: block; 
 position: absolute; 
 height: 20px; 
 line-height: 20px; 
 margin-left: 20px; 
 margin-top: 10px; 
 }
 /* ul li:before{
 content:"1";
 }*/

效果图：
这里写图片描述

显示全文

全部栏目

css纵向标尺如何制作