How to create css vertical ruler-CSS Tutorial-php.cn

How to create css vertical ruler

一个新手

Release： 2017-09-18 09:38:59

Original

2609 people have browsed it

Today, a friend of mine cannot write the vertical ruler, so I helped him out. Now I have sorted it out, but there is no numerical value in front, so I hope you can bear with me.

    <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">

Copy after login

   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:&#39;1&#39;;
        }*/

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

Copy after login

Rendering:
How to create css vertical ruler

The above is the detailed content of How to create css vertical ruler. For more information, please follow other related articles on the PHP Chinese website!