网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
使用CSS3网格布局和嵌套HTML列表,创建的响应迅速、外观大气的人员组织树形结构图。
1. 构建HTML组织树结构。
<h1 class="level-1 rectangle">董事长</h1>
<ol class="level-2-wrapper">
<li>
<h2 class="level-2 rectangle">总经理 A</h2>
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">销售中心</h3>
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">成员 A</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 B</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 C</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 D</h4>
</li>
</ol>
</li>
<li>
<h3 class="level-3 rectangle">客服中心</h3>
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">成员 A</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 B</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 C</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 D</h4>
</li>
</ol>
</li>
</ol>
</li>
<li>
<h2 class="level-2 rectangle">总经理 B</h2>
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">技术中心</h3>
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">成员 A</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 B</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 C</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 D</h4>
</li>
</ol>
</li>
<li>
<h3 class="level-3 rectangle">设计中心</h3>
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">成员 A</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 B</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 C</h4>
</li>
<li>
<h4 class="level-4 rectangle">成员 D</h4>
</li>
</ol>
</li>
</ol>
</li>
</ol>
2. 组织结构所需的CSS样式。
<link rel="stylesheet" href="./style.css">
转载请注明来源:响应式css3人员组织结构图特效
本文永久链接地址:https://www.moyouyouw.cn/code/972.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论