纯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'>
&
补充:web前端 , HTML/CSS ,
- 更多html/css疑问解答:
- div+css中关于ie浏览器中非啊元素的:hover的实现问题,哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗?
- 用css、jquery做的选项卡效果,有一个小疑问,请高手指点,代码如下:
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用?
- 这个div 的css是如何编写的
- div+css中,div的右边框小于div的高度且居中,除了用背景图片,如何实现?
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势(例子要解释并注释)。
- 我会html css目前正在学js,打算在大三的寒假找个实习,请问应该找哪方面的实习?
- css问题,跪求大大帮忙
- 请教网页设计高手,如下图的这种css代码怎么写?