css縱向尺規如何製作

來源:互聯網
上載者:User


今天我的一位朋友不會寫縱向尺規,我就幫忙了一下忙,現在整理出來了,但是沒有前邊的數字值,還望各位包涵。

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


相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.