div+css实现树形结构图效果代码-html代码-BFW代码库

div+css实现树形结构图效果代码

代码语言：html

代码描述：div+css实现树形结构图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        @charset "utf-8";
    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;
    }
    
.........完整代码请登录后点击上方下载按钮下载查看