您现在的位置:首页 >> 前端 >> 内容

ulli实现面包导航

时间:2017/2/15 10:28:38 点击:

  核心提示:p class=head_navul class=nav nav-tabsli class=activea href=#首页/a/lilia href=#资料/a/lili class=disable...
<p class="head_nav">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">资料</a>
        </li>
        <li class="disabled">
            <a href="#">信息</a>
        </li>
        <p class="clear">
        </p>
    </ul>
</p>
.nav-tabs {
  padding: 30px 0 0 50px;
  margin: 0 50px 0 50px;
  list-style:none;
  border-bottom: 1px solid #ddd;
}

.nav-tabs li{
  padding: 0px;
  margin: 0px;
  float: left;
}
.nav-tabs li a{
  margin: 10px;
  color: #4bbd00;
  text-decoration:none;
  font-size: 16px;
  font-weight: bold;
  font-family: 微软雅黑;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
.nav-tabs>li>a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin: 0px;
}

.nav-tabs>li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs>li>a:hover{
  background-color: #eee;
}


 

Tags:UL LL LI I实 
作者:网络 来源:velo的专栏