站内搜索:
首页 >> 前端 >> 内容
ulli实现面包导航

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

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


 

  • 上一篇:”交集“选择器和“并集”选择器
  • 下一篇:CSS相对/绝对(relative/absolute)定位系列(三)
  • 返回顶部