导航栏特效 仅供自己学习使用

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   
  * {
  margin: 0;
  padding: 0;
  }
   
  body {
  background-color: moccasin;
  }
   
  .list {
  list-style: none;
  width: 900px;
  margin: 100px auto;
  background-color: powderblue;
  }
   
  .list li {
  float: left;
  padding: 4px 0;
  margin: 0 18px;
  width: 160px;
  line-height: 48px;
  text-align: center;
   
  }
   
  .list a {
  display: block;
  color: #000;
  text-decoration: none;
  font-size: 30px;
  position: relative;
  }
   
  .list span {
  display: block;
  width: 100%;
   
  }
   
  .list span:after {
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  content: "";
  display: block;
  transition: .65s;
  border-bottom: solid 2px transparent;
   
  }
   
  .list a:hover span:after {
  left: 0;
  right: 0;
  border-bottom: solid 2px deeppink;
  }
   
  .clearfix:after, .clearfix:before {
  content: "";
  display: table;
  }
   
  .clearfix:after {
  clear: both;
  }
   
  .clearfix {
  *zoom: 1;
  }
   
  </style>
  </head>
  <body>
  <ul class="list clearfix">
  <li><a href="#" class="title_a move"><span class="T_title">首页</span></a></li>
  <li><a href="#" class="title_a move"><span class="T_title">家庭服务</span></a></li>
  <li><a href="#" class="title_a move"><span class="T_title">企业服务</span></a></li>
  <li><a href="#" class="title_a move"><span class="T_title">收纳服务</span></a></li>
  </ul>
   
  </body>
  </html>
posted @ 2016-05-09 08:15  11个条子  阅读(197)  评论(0)    收藏  举报