js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 其它代码

css3实现响应式组织架构图

发布时间:2015-09-06 16:12:12    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

css3实现响应式组织架构图
body{background:#F5EEC9}
.content{font-family:Verdana;font-size:14px;position:relative;max-width:1280px;margin:0 auto}
.content *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.org-chart{display:block;clear:both;margin-bottom:30px;position:relative}
.org-chart.cf:after,.org-chart.cf:before{content:" ";display:table}
.org-chart.cf:after{clear:both}
.org-chart ul{padding:0;margin:0;list-style:none}
.org-chart ul li{position:relative}
.org-chart ul li span{display:block;border:3px solid orange;text-align:center;overflow:hidden;text-decoration:none;color:#000;font-size:12px;box-shadow:4px 4px 9px -4px rgba(0,0,0,.4);-webkit-transition:all linear .1s;-moz-transition:all linear .1s;transition:all linear .1s;background:#92D4A8;padding:4px}
.org-chart .lvl-b{background:green;color:#92D4A8}
.org-chart .board{width:70%;margin:0 auto;display:block;position:relative}
.org-chart .board:before{content:"";display:block;position:absolute;height:600px;width:0;border-left:2px solid orange;margin-left:49%;top:15px}
.org-chart ul.columnOne{height:90px;position:relative;width:100%;display:block;clear:both}
.org-chart ul.columnOne li{width:30%;margin:0 auto;top:20px}
.org-chart ul.columnTwo{position:relative;width:100%;display:block;height:90px;clear:both}
.org-chart ul.columnTwo li:first-child{width:30%;float:left}
.org-chart ul.columnTwo li{width:30%;float:right}
.org-chart ul.columnTwo:before{content:"";display:block;position:relative;width:80%;height:10px;border-top:2px solid orange;margin:0 auto;top:40px}
.org-chart ul.columnThree{position:relative;width:100%;display:block;clear:both}
.org-chart ul.columnThree li:first-child{width:30%;float:left;margin-left:0}
.org-chart ul.columnThree li{width:30%;margin-left:5%;float:left}
.org-chart ul.columnThree li:last-child{width:30%;float:right;margin-left:0}
.org-chart ul.columnThree:before{content:"";display:block;position:relative;width:80%;height:10px;border-top:2px solid orange;margin:0 auto;top:40px}
.org-chart .departments{width:100%;display:block;clear:both}
.org-chart .departments:before{content:"";display:block;width:85%;height:22px;border-top:2px solid orange;border-left:2px solid orange;border-right:2px solid orange;margin:0 auto;top:0}
.org-chart .department{border-left:2px solid orange;width:13.2%;float:left;margin:0 4px}
.org-chart .department:after{content:"";position:absolute;display:block;width:10px;height:22px;border-left:2px solid orange;left:50%;top:-22px}
.org-chart .department:first-child:after{display:none}
.org-chart .department:last-child:after{display:none}
.org-chart .department.central{background:#F5EEC9}
.org-chart .department.central:after{display:none}
.org-chart .department span{border-left:1px solid orange}
.org-chart .department li{padding-left:25px;border-bottom:2px solid orange;height:80px}
.org-chart .department li span{background:#92D4A8;top:38px;position:absolute;z-index:1;width:95%;height:auto;vertical-align:middle;right:0;line-height:14px;border:3px solid orange}
.org-chart .department .sections{margin-top:-20px}
@media all and (max-width:767px){.org-chart .board{margin:0;width:100%}
.org-chart .departments:before{border:none}
.org-chart .department{float:none;width:100%;margin-left:0;background:#F5EEC9;margin-bottom:40px}
.org-chart .department:before{content:"";display:block;position:absolute;width:15px;height:60px;border-left:2px solid orange;z-index:1;top:-45px;left:0;margin-left:-2px}
.org-chart .department:after{display:none}
.org-chart .department:first-child:before{display:none}
}
.responsive-content{width:767px;margin:0 auto}
.responsive-content .org-chart .board{margin:0;width:100%}
.responsive-content .org-chart .departments:before{border:none}
.responsive-content .org-chart .department{float:none;width:100%;margin-left:0;background:#F5EEC9;margin-bottom:40px}
.responsive-content .org-chart .department:before{content:"";display:block;position:absolute;width:15px;height:60px;border-left:2px solid orange;z-index:1;top:-45px;left:0;margin-left:-2px}
.responsive-content .org-chart .department:after{display:none}
.responsive-content .org-chart .department:first-child:before{display:none}



css3 式组织架构

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

Css3鼠标悬停图片高亮特效

css3鼠标滑过栏目图片滑动切换动画特效

css3对话框插件来制作动画弹出表单特效

css3实现网页后台登录界面

css3发蓝光的input输入框样式特效

css3图片特效,利用transform属性制作相册图片墙

css3实现响应式组织架构图

css3猎豹浏览器宽屏banner焦点图切换特效

CSS3实现手风琴叠加图片自动轮播特效

css3实现图标菜单,鼠标滑过图标动画菜单特效

css3旋转动画,制作鼠标经过圆形旋转特效

jquery css3实现黑色酷炫数字时钟特效

js+css3 实现扁平化APP图标黄色时钟,动画特效

纯CSS3实现漂亮的价格表样式特效

css3实现多款实用的网页鼠标滑动按钮动画特效

css3图片切换类似滤镜百叶窗图片切换特效

jQuery+CSS3实现带标题和简介的轮播幻灯片特效代码

纯CSS3实现超酷幻灯片切换图片特效代码

CSS3实现新浪微博模板商店图片抖动特效代码

友荐云推荐
大家说 此评论不代表本站观点