使用css3怎么实现一个思维导图样式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。html代码<div class="mainBody"&n
使用css3怎么实现一个思维导图样式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
html代码
<div class="mainBody" id="node1"> <h2>node1</h2> <div class="oneBody"> <div class="mainBody"> <h2>node2</h2> <div class="oneBody"> <div class="mainBody"> <h2>node3</h2> <div class="oneBody"> <div class="mainBody"> <h2>node4</h2> </div> <div class="mainBody"> <h2>node4</h2> </div> <div class="mainBody"> <h2>node4</h2> </div> </div> </div> <div class="mainBody"> <h2>node3</h2> </div> <div class="mainBody"> <h2>node3</h2> </div> </div> </div> <div class="mainBody"><h2>node2</h2></div> <div class="mainBody"><h2>node2</h2></div> </div></div>
CSS3代码
.mainBody{ display: -WEBkit-flex; display: flex; flex-direction: row; justify-content: flex-start ;}.sbody{}.oneBody{ display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-around;}#node1{ margin-top: 100px; margin-left: 100px;}h2{ line-height: 100%; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center;}
看完上述内容,你们掌握使用css3怎么实现一个思维导图样式的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!
--结束END--
本文标题: 使用css3怎么实现一个思维导图样式
本文链接: https://www.lsjlt.com/news/252720.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0