当前位置: 首页 > Web前端 > HTML

css实现“pin”字形分级图

时间:2023-04-02 13:23:18 HTML

以下内容纯属个人一点点或不成熟的思考。如果您发现任何问题或更好的想法,请指出。谢谢你!一开始,在一个阳光明媚的下午,有小伙伴问我应该用什么样的思路来实现下面的分形图。看到这张图我愣了2秒,然后脑子里蹦出一个词——定位,没错就是定位。然后,又过了2秒,不知所措的定位。是最好的解决方案吗?然后就兴高采烈的决定写写怎么用定位来实现这个效果(我不是想找其他更好的解决方案吗。。。啊喂),认真的敲了敲代码面(哎,气死我了,我装我什么也听不见)。效果图:感谢brook提醒加在线预览地址:方法一:css+jq实现效果方法二:flex实现效果tips:本例仅适用于固定1转2的模式,示例蓝色框架的宽度和高度是固定的。思路:以一个字符为单位,然后考虑如何将它们连接起来,使用.box-line这个伪类来显示线条。主体html:

1级
2级2级3级3级3级Level3方法一:css+jq实现(兼容IE9+,低版本未测试)考虑到兼容性,该方法在css中采用float,通过jq计算每个item的宽度CSS:.mind-map-column{高度:160px;}.box{背景:#0092ff;宽度:200px;高度:100px;颜色:#fff;文本对齐:居中;行高:100px;位置:绝对;左:50%;左边距:-100px;}.box-wrap{边距:30px自动;位置:相对;高度:100px;向左飘浮;}.box-line:before{内容:'';宽度:1px;背景:#ccc;位置:绝对;顶部:-30px;左:50%;底部:-30px;左边距:-1px;}.box-line:after{内容:'';高度:1px;背景:#ccc;位置:绝对;顶部:130px;左:25%;宽度:50%;}.noborder-top.box-line:before{top:0;}.noborder-bottom.box-line:before{底部:0;}.noborder-bottom.box-line:after{height:0;}jq:<抄写ptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">方法二:flex布局(兼容IE11+)ifadvanced浏览器只是“嘿嘿”,flex马上就走了css:.mind-map-column{display:-webkit-box;显示:-webkit-flex;显示:弹性;}.box{背景:#0092ff;宽度:200px;高度:100px;颜色:#fff;文本对齐:居中;行高:100px;位置:绝对;左:50%;左边距:-100px;}.box-wrap{边距:30px自动;高度:100px;宽度:0%;-webkit-box-flex:1;-webkit-flex:1;弹性:1;位置:相对;}.box-line:before{内容:'';宽度:1px;背景:#ccc;位置:绝对;顶部:-30px;左:50%;底部:-30px;左边距:-1px;}.box-line:after{内容:'';高度:1px;背景:#ccc;位置:绝对;顶部:130px;左:25%;宽度:50%;}.mind-map-column:first-child.box-line:before{顶部:0;}.mind-map-column:last-child.box-line:before{bottom:0;}.mind-map-column:last-child.box-line:after{height:0;}写在最后的话:这是我第一次发表文章。不知道有没有说清楚自己想说什么(一头雾水),然后发现自己写东西的时候看的少了。本来想对个别属性进行说明,结果发现没有我说不出来(说不出来就不查官方文档多看)。这份文档对某些人来说可能不切实际,毫无价值,但毕竟想了想,想了想,也花了时间。我还想记录下来。也许如果我幸运的话,我可以帮助一两个人。非常感谢您的阅读!如果大家发现问题或者更好的想法,请指出,谢谢!