有层级关系的内容线性展示样式概要


回复内容线性展示


同级内容竖线连接,由左向右降级,竖线由下向上递增,级别关系一目了然,一般用于后台导航及大量相关内容的展示比如回复数据的层级关系。


一,一级结构
<ul class="u-wrap">

    <li>

        <div>

            <div class="u-wrap-content"></div>
            ... 

        </div> 

    </li> 

</ul> 

.u-wrap-content {border-left:1px solid #ddd;}


二,二级及多级结构

<ul class="u-wrap">
    <li>
        <div>
            <div class="u-wrap-content"></div>
            ...
        </div>
    </li>
    <li>
        <ul class="u-wrap">
            <li>
                <div>
                    <div class="u-wrap-content"></div>
                    ...
                </div>
            </li>
            <li>
                <ul class="u-wrap">
                    <li>
                        <div>
                            <div class="u-wrap-content"></div>
                            ...
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

.u-wrap-content,.u-wrap .u-wrap,.u-wrap .u-wrap .u-wrap,.u-wrap .u-wrap .u-wrap .u-wrap,.u-wrap .u-wrap .u-wrap .u-wrap .u-wrap {border-left:1px solid #ddd;}

多级左边框有几级就定义几级样式。


ps:这种解决方式没有考虑浏览器兼容问题,如果要深入了解请参考网易NEC(更好的CSS方案)。

相关文档

没有数据

评论0条