你的位置:首页 > 网页设计

[网页设计]CSS3 垂直树状图——运用 :before 和 :after


直接上图(原网址),自己CSS3练习demo。

 【demo】

【HTML】

<div >    <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】

*{
  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;
}