树形样式

Posted on by longxiang 
<html>
<head>
<style>
/** tree.css zyj 2018.4.21 */
ul,li{list-style-type:none;}
.tree{display:block;position:relative;padding:5px 15px;}
.tree span{display:inline-block;box-sizing:border-box;height:30px;line-height:28px;min-width:60px;text-align:center;color:#888;border:1px solid #ddd;border-radius:5px;padding:0 8px;}
.tree ul{position:relative;padding-left:60px;margin:0;}
.tree ul>li{position:relative;padding:5px 0;}
.tree>ul{padding:0;margin:0;}
/** 水平方向连线 */
.tree>ul ul>li:after{content:' ';position:absolute;top:20px;left:-45px;width:45px;border:none;border-top:1px solid #ddd;}
/** 垂直方向连线 */
.tree ul>li:not(:last-child):before{content:' ';position:absolute;top:0;left:-45px;height:100%;border:none;border-left:1px solid #ddd;}
.tree ul>li:last-child:before{content:' ';position:absolute;top:0;left:-45px;height:20px;border:none;border-left:1px solid #ddd;}
/** 控制鼠标移上去的颜色 */
.tree span:hover, .tree span:hover+ul span{color:#fff;background-color:orange;}
.tree span:hover, .tree span:hover+ul span, .tree span:hover+ul li:before, .tree span:hover+ul li:after{border-color:orange;}
/** 折叠图标 */
.tree .fa:before{margin-right:5px;}
.tree .fa-minus-circle, .tree .fa-plus-circle{cursor:pointer;}
</style>

</head>
<body>
<div class="tree">
    <ul>
        <li>
            <span><i class="fa fa-minus-circle"></i>拉莫小学</span>
            <ul>
                <li>
                    <span><i class="fa fa-minus-circle"></i>一年级</span>
                    <ul>
                        <li><span>一班</span></li><li><span>二班</span></li>
                    </ul>
                </li>
                <li>
                    <span>二年级</span>
                </li>
                <li>
                    <span><i class="fa fa-minus-circle"></i>三年级</span>
                    <ul>
                        <li><span>一班</span></li>
                        <li><span>二班</span></li>
                        <li><span>三班</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
Post Views: 519