纯CSS 实现组织架构图,学习
先上张图
Css 代码如下:
div#contain {
width:1000em;
background:#fff;
font-family:verdan;
}
ul#xflow {
float: none;
margin: 0 auto;
}
ul {
clear: left;
margin: 2em 0 0 0;
padding: 0;
background: #fff;
}
ul ul {
border-top: 1px solid #000;
width: auto;
}
ul.solo {
border-top: 0;
}
li {
float: left;
list-style: none;
position: relative;
}
li li {
margin: -1px 0 0 0;
}
#xflow div{
background: url(../img/Flow/vLine.gif) 50% repeat-y;
padding: 2em 5px 0 5px;
margin: 0 .3em -2em 0em;
}
#xflow div.section {
padding: 2em 5px 2em 5px;
}
#xflow div.first {
background: url(../img/Flow/first.gif) 50% repeat-y;
margin-left: 0;
}
#xflow div.last {
background: url(../img/Flow/last.gif) 50% repeat-y;
margin-right:0;
}
.none{border:0px;}
#xflow div.root {
padding-top: 0;
}
#xflow a {
display: block;
background: #fff;
border: 1px solid #000;
padding: .25em .2em .2em .2em;
color: #222;
text-decoration: none;
margin: 0 auto;
width: 10em;
line-height: 2em;
text-align: center;
}
/*IE 6 (when comma-separated, IE6 didn't work, so these are duped for IE7)*/
*html {text-align: center;}
*html a {margin: 0; position: relative;}
/*IE 7*/
*:first-child+html {text-align: center;}
*:first-child+html a {margin: 0; position: relative;}
Html 结构:
<div id="contain">
<ul class="solo" id="xflow">
<li>
<div class='root section'>
<a>总经理</a></div>
<ul class="">
<li>
<div class='first'>
<a>财务总监</a></div>
</li>
<li>
<div class=''>
<a>人力资源总监</a></div>
</li>
<li>
<div class=' section'>
<a>营销总监</a></div>
<ul class="none">
<li>
<div class=' section'>
<a>营销经理</a></div>
<ul class="none">
<li>
<div class=''>
<a>营销助理</a></div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class=' section'>
<a>产品总监</a></div>
<ul class="">
<li>
<div class='first'>
<a>经理</a></div>
</li>
<li>
<div class='last'>
<a>经理</a></div>
</li>
</ul>
</li>
<li>
<div class='last'>
<a>研发总监</a></div>
</li>
</ul>
</li>
</ul>
</div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?