css纵向标尺如何制作-css教程-PHP中文网

css纵向标尺如何制作

一个新手

发布： 2017-09-18 09:38:59

原创

2701人浏览过

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

    <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纵向标尺如何制作的详细内容，更多请关注php中文网其它相关文章！