css纵向标尺如何制作

来源：懂视网责编：小采时间：2020-11-27 18:50:08

css纵向标尺如何制作

css纵向标尺如何制作:今天我的一位朋友不会写纵向标尺，我就帮忙了一下忙，现在整理出来了，但是没有前边的数字值，还望各位包涵。 <body> <!-- <ul> <li class="right1">0</

推荐度：

点击下载本文 文档为doc格式

导读css纵向标尺如何制作:今天我的一位朋友不会写纵向标尺，我就帮忙了一下忙，现在整理出来了，但是没有前边的数字值，还望各位包涵。 <body> <!-- <ul> <li class="right1">0</

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

 <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纵向标尺如何制作

推荐度：

点击下载本文 文档为doc格式

标签：制作竖向纵向

热门焦点

css纵向标尺如何制作

css纵向标尺如何制作

css纵向标尺如何制作

最新推荐

猜你喜欢

热门推荐