css纵向标尺_css纵向刻度尺-CSDN博客

本文链接：https://blog.csdn.net/qq_33734225/article/details/78013135

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

    <body>
        <div>
            <!-- <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>       
        </div> 

    </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";
            }*/