CSS3 垂直树状图——运用 :before 和 :after
2015-12-04 14:15
489 查看
<style> *{ margin:0; padding:0; } .tree ul{ padding-top:20px; position: relative; webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition:all .3s; } .tree li{ float:left; list-style: none; text-align: center; position: relative; padding:20px 5px 0 5px; webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition:all .3s; } /*利用::before,::after作分支线*/ .tree li::before,.tree li::after{ content:""; position: absolute; top:0; right:50%; width:50%; height:20px; border-top:1px solid #ccc; } .tree li:after{ right:auto; left:50%; border-left:1px solid #ccc; } .tree li:first-child::before,.tree li:last-child::after{ border:0 none; } .tree li:last-child::before{ border-right:1px solid #ccc; -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; } .tree li:first-child::after{ -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; } /*删除仅只有一个分支的分支线*/ .tree li:only-child::before,.tree li:only-child::after{ border:none; } .tree li:only-child{ padding-top:0; } /*添加仅只有一个分支的下分支线*/ .tree ul ul::before{ content:""; position: absolute; top:0; left:50%; border-left:1px solid #ccc; width:0; height:20px; } .tree a{ display: inline-block; border:1px solid #ccc; padding: 5px 10px; color:#666; text-decoration: none; padding:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition:all .3s; } /*添加选中状态*/ .tree li a:hover,.tree li a:hover+ul li a{ background-color: #c8e4f8; color: #000; border: 1px solid #94a0b4; } .tree li a:hover+ul li:after,.tree li a:hover+ul li:before,.tree li a:hover+ul::before,.tree li a:hover+ul ul::before{ border-color: #94a0b4; } </style> <div class="tree"> <ul> <li><a href="#">parent</a> <ul> <li><a href="#">child</a> <ul> <li><a href="#">Grant child</a></li> </ul> </li> <li><a href="#">child</a> <ul> <li><a href="#">Grant child</a></li> <li><a href="#">Grant child</a> <ul> <li><a href="#">Great Grant child</a></li> <li><a href="#">Great Grant child</a></li> <li><a href="#">Great Grant child</a></li> </ul> </li> <li><a href="#">Grant child</a></li> </ul> </li> </ul> </li> </ul> </div>
相关文章推荐
- 《CSS3使用指南》读书笔记
- css手势
- CSS里定义body{ }和定义*{ }的区别
- 今天改bug遇到一个ie8样式错乱问题
- css inhert、auto、 *
- css布局之flex
- 初学LESS
- Sublime2配置less2css插件教程
- css3 动画详解
- CSS3学习(十) 细节补充:统一input高度
- html-css控制背景图全屏拉伸不重复显示
- CSS 颜色代码大全
- 关于QAbstractGraphicsShapeItem的一个工程实践
- HTML样式表css
- div+css3中id和class的命名
- dedecms织梦特定条件下,隐藏特定栏目的方法,通过css实现
- HTML静态网页 css样式表
- 在网页中添加样式
- CSS(一)
- 深入CSS,让网页开发少点“坑”