1、准备好需要用到的图标。
2、新建html文档。
4、书写css代码。body { font-family: 'Helvetica Neue'稆糨孝汶;, Helvetica, 'Segoe UI', Arial, freesans; }#div_tree { font: 10px Verdana, sans-serif; display: inline-block; width: 300px; }#div_log { width: 400px; height: 400px; overflow: scroll; padding: 10px; vertical-align: top; display: inline-block; border: 1px solid gray; font: 10px Verdana, sans-serif; line-height: 16px; }ul.tree, ul.tree ul { list-style-type: none; background: url(vline.png) repeat-y; margin: 0; padding: 0; padding-left: 7px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: default; }li.last { background-image: 'url("css/lastnode.png")'; background-repeat: no-repeat; }ul.tree ul { padding-left: 7px; }ul.tree li { margin: 0; padding: 0 12px; line-height: 22px; background: url(node.png) no-repeat; }ul.tree li.last { background: #fff url(lastnode.png) no-repeat; }img.exp_col { position: absolute; margin-top: 4px; margin-left: -20px; vertical-align: sub; }img.exp_col_empty { position: absolute; margin-top: 4px; margin-left: -20px; vertical-align: sub; width: 16px; }img.icon_tree { vertical-align: middle; padding-left: 3px; margin-top: -3px; }a.node { padding: 2px; }span.node a { padding-left: 3px; }span.node { margin-left: -1px; padding-right: 3px; padding-top: 4px; padding-bottom: 4px; }span.node:hover { margin-left: -1px; padding-right: 3px; padding-top: 4px; padding-bottom: 4px; background-color: #DCEDFF; border-radius: 2px; }span.node_selected { margin-left: -2px; padding-right: 3px; padding-top: 4px; padding-bottom: 4px; background-color: #CEFFCE; border: 1px solid #8AE88A; border-radius: 2px; }span.node_selected a { padding-left: 3px; }.menu, .sub-menu { margin: 0; padding: 0; font: 10px Verdana, sans-serif; }.menu, .sub-menu { list-style: none; background: #000; }.sub-menu { background: #F1F1F1; }.menu a { text-decoration: none; display: inline-block; padding: 8px; }.menu span { position: absolute; width: 100%; height: 100%; }.menu div { position: absolute; right: 4px; top: 0px; padding: 8px; }.menu .menu_img { vertical-align: middle; }.menu img { text-decoration: none; display: inline-block; vertical-align: sub; padding-left: 5px; }.menu li { position: relative; }.menu li:hover { background: aquamarine; cursor: pointer; }.sub-menu li:hover { background: aquamarine; }.menu li:hover > .sub-menu { display: block; }.menu { width: 150px; position: absolute; background: #F1F1F1; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ cursor: default; box-shadow: 2px 2px 3px #BDBDBD; }.sub-menu { display: none; position: absolute; min-width: 150px; box-shadow: 2px 2px 3px #BDBDBD; }.menu .sub-menu { top: 0; left: 100%; }
6、代码整体结构。
