div css树视图

下载代码

html

css

分享到微信朋友圈

html

<figure>
 <figcaption>Example DOM structure diagram</figcaption>
 <ul class="tree">
 <li><code>html</code>
 <ul>
 <li><code>head</code>
 <ul>
 <li><code>title</code></li>
 </ul>
 </li>
 <li><code>body</code>
 <ul>
 <li><code>header</code>
 <ul>
 <li><code>h1</code></li>
 <li><code>p</code></li>
 </ul>
 </li>
 <li><code>nav</code>
 <ul>
 <li><code>a</code></li>
 <li><code>a</code></li>
 <li><code>a</code></li>
 <li><code>a</code></li>
 </ul>
 </li>
 <li><code>main</code>
 <ul>
 <li><code>h1</code></li>
 <li><code>article</code>
 <ul>
 <li><code>h2</code></li>
 <li><code>p</code></li>
 <li><code>p</code></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><code>aside</code>
 <ul>
 <li><code>h2</code></li>
 <li><code>p</code></li>
 <li><code>p</code>
 <ul>
 <li><code>a</code></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><code>footer</code>
 <ul>
 <li><code>nav</code>
 <ul>
 <li><code>a</code></li>
 <li><code>a</code></li>
 <li><code>a</code></li>
 <li><code>a</code></li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
</figure>
<figure> 
 <figcaption>Example sitemap</figcaption>
 <ul class="tree">
 <li>Home
 <ul>
 <li>About us
 <ul>
 <li>Our history
 <ul>
 <li>Founder</li>
 </ul>
 </li>
 <li>Our board
 <ul>
 <li>Brad Whiteman</li>
 <li>Cynthia Tolken</li>
 <li>Bobby Founderson</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Our products
 <ul>
 <li>The Widget 2000?
 <ul>
 <li>Order form</li>
 </ul>
 </li>
 <li>The McGuffin V2
 <ul>
 <li>Order form</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Contact us
 <ul>
 <li>Social media
 <ul>
 <li>Facebook</li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
</figure>

css

body {
  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;background-color: #cefff1;
}

/* It's supposed to look like a tree diagram */
.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
    .tree li {
        display: table-cell;
        padding: .5em 0;
        vertical-align: top;
    }
        /* _________ */
        .tree li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree li:first-child:before {left: 50%;}
        .tree li:last-child:before {right: 50%;}

.tree code, .tree span {
            border: solid .1em #666;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .2em .5em;
            position: relative;
        }
        /* If the tree represents DOM structure */
        .tree code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

/* | */
            .tree ul:before,
            .tree code:before,
            .tree span:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
                position: absolute;
            }
            .tree ul:before {
                top: -.5em;
            }
            .tree code:before,
            .tree span:before {
                top: -.55em;
            }

/* The root node doesn't connect upwards */
.tree > li {margin-top: 0;}
    .tree > li:before,
    .tree > li:after,
    .tree > li > code:before,
    .tree > li > span:before {
      outline: none;
    }

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg