HTML+CSS自定义树状图

最新推荐文章于 2024-11-28 19:30:34 发布

靠着蓝色背景幻想

最新推荐文章于 2024-11-28 19:30:34 发布

阅读量853

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_45594156/article/details/128629674

版权

HTML+CSS自定义树状图

- - 主体部分
  - css部分

主体部分

  <div class="test">
    <ul class="domtree">
      <li>
        1级菜单
        <ul>
          <li>2级菜单</li>
          <li>
            2级菜单
            <ul>
              <li>3级菜单
                <ul>
                  <li>4级菜单</li>
                </ul>
              </li>
              <li>3级菜单</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

css部分

.test {
  width: 100%;
  border: 1px solid red;
}

.test .domtree {
  margin: 20% 0 0 20%;
}
ul.domtree,
ul.domtree ul {
  margin: 0;
  padding: 0 0 0 2em;
}

ul.domtree li {
  list-style: none;
  position: relative;
}

ul.domtree > li:first-child:before {
  border-style: none none solid none;
  border-color: #fff;
}

ul.domtree li:before {
  position: absolute;
  content: "";
  top: -0.01em;
  left: -0.7em;
  width: 0.5em;
  height: 0.615em;
  border-style: none none solid solid;
  border-width: 0.05em;
  border-color: blue;
}

ul.domtree li:not(:last-child):after {
  position: absolute;
  content: "";
  top: 0.7em;
  left: -0.7em;
  bottom: 0;
  border-style: none none none solid;
  border-width: 0.05em;
  border-color: red;
}