首页>组件>导航

导航

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

4.2.1 导航条

鼠标经过状态a:hover，当前选中状态li.current。下拉菜单效果，请参考4.3 下拉菜单。

hui-navbar-black 是黑色导航风格，自己使用时候，可以去掉这个类名，定制自己的风格。

在navbar div上追加 navbar-fixed-top 样式，可以将导航条固定在网页顶部。

HTML SCSS CSS 
<header class="hui-nav-wrapper">
  <div class="hui-nav-bar">
    <div class="hui-layout-content clearfix">
      <a class="hui-logo hidden-xs" href="http://www.h-ui.net/aboutHui.shtml">H-ui前端框架</a>
      <a class="hui-logo visible-xs" href="http://www.h-ui.net/aboutHui.shtml">H-ui</a>
      <span class="hui-logo hui-slogan hidden-xs">简单 &middot; 免费 &middot; 适合中国网站</span>
      <a aria-hidden="false" class="hui-nav-toggle hui-iconfont visible-xs JS-nav-toggle" href="javascript:;">&#xe667;</a>
      <nav class="hui-nav hui-nav-collapse" style="float: left; display: flex; flex: 1 1 0%;">
        <ul class="clearfix">
          <li class="current">
            <a href="http://www.h-ui.net/" target="_blank">首页</a>
          </li>
          <li>
            <a href="http://www.h-ui.net/Hui-overview.shtml" target="_blank">核心</a>
          </li>
          <li>
            <a href="http://www.h-ui.net/lib/jQuery.cookie.js.shtml" target="_blank">脚本</a>
          </li>
          <li class="hui-dropdown hui-dropdown-hover">
            <a href="javascript:;" class="hui-dropdown-link">工具 <i class="hui-iconfont">&#xe6d5;</i></a>
            <ul class="hui-menu hui-dropdown-menu radius box-shadow">
              <li class="hui-menu-item">
                <a href="http://www.h-ui.net/bug.shtml" target="_blank">Bug兼容性汇总</a>
              </li>
              <li class="hui-menu-item">
                <a href="http://www.h-ui.net/websafecolors.shtml" target="_blank">web安全色</a>
              </li>
              <li class="hui-menu-item">
                <a href="http://www.h-ui.net/hui-3.7-hui-iconfont.shtml" target="_blank">hui-iconfont</a>
              </li>
              <li class="hui-menu-item">
                <a href="javascript:;">web工具箱<i class="arrow hui-iconfont">&#xe6d7;</i></a>
                <ul class="hui-menu">
                  <li class="hui-menu-item">
                    <a href="http://www.h-ui.net/tools/jsformat.shtml" target="_blank">JS/HTML格式化工具</a>
                  </li>
                  <li class="hui-menu-item">
                    <a href="http://www.h-ui.net/tools/HTMLtoJS.shtml" target="_blank">HTML/JS转换工具</a>
                  </li>
                  <li class="hui-menu-item">
                    <a href="http://www.h-ui.net/tools/cssformat.shtml" target="_blank">CSS代码格式化工具</a>
                  </li>
                  <li class="hui-menu-item">
                    <a href="http://www.h-ui.net/tools/daxiaoxie.shtml" target="_blank">字母大小写转换工具</a>
                  </li>
                  <li class="hui-menu-item">
                    <a href="http://www.h-ui.net/tools/fantizhuanhuan.shtml" target="_blank">繁体字、火星文转换</a>
                  </li>
                  <li class="hui-menu-item">
                    <a href="javascript:;">三级菜单<i class="arrow hui-iconfont">&#xe6d7;</i></a>
                    <ul class="hui-menu">
                      <li class="hui-menu-item">
                        <a href="javascript:;">四级菜单</a>
                      </li>
                      <li class="hui-menu-item">
                        <a href="javascript:;">四级菜单</a>
                      </li>
                      <li class="hui-menu-item">
                        <a href="javascript:;">四级菜单</a>
                      </li>
                    </ul>
                  </li>
                  <li class="hui-menu-item">
                    <a href="#">三级导航</a>
                  </li>
                </ul>
              </li>
              <li class="hui-menu-item">
                <a href="#">二级导航</a>
              </li>
              <li class="hui-menu-item disabled">
                <a href="javascript:;">二级菜单</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="http://h-ui.net/aboutHui.shtml" target="_blank">联系我们</a>
          </li>
        </ul>
      </nav>
      <nav class="hui-nav hidden-xs" style="float: right">
        <ul class="clearfix">
          <li>
            <a href="#" target="_blank">登录</a>
          </li>
          <li>
            <a href="#" target="_blank">注册</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
/*logo*/
  .hui-logo {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    &:hover {
      text-decoration: none;
    }
  }
  
  /*导航条*/
  .hui-nav-wrapper {
    height: 45px;
    .hui-nav-bar {
      position: relative;
      z-index: 1030;
      background-color: #fff;
      .hui-layout-content {
        position: relative;
        .hui-nav-userbar {
          right: 0px;
        }
      }
      &.hui-nav-black {
        background-color: #222;
      }
      &.hui-nav-fixed-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
      }
      .hui-logo {
        height: 44px;
        line-height: 44px;
        margin-right: 10px;
        float: left;
        font-size: 16px;
      }
  
      .hui-slogan {
        font-size: 12px;
        cursor: default;
      }
    }
  }
  
  /*导航*/
  .hui-nav {
    z-index: 1;
    > ul {
      font-size: 0;
      line-height: 0;
      >li,
      >li > a {
        line-height: 44px;
        font-size: 14px;
      }
      >li {
        position: relative;
        float: left;
        text-align: center;
        >a {
          display: inline-block;
          text-align: center;
          padding: 0 10px;
        }
        >a:hover,
        &.current>a {
          background-color: rgba(255, 255, 255, 0.2);
          text-decoration: none;
          @include transition(background-color 0.3s ease 0s);
        }
      }
    }
  }
  
  @media (max-width: 767px) {
    .hui-logo {
      margin-right: 0
    }
  
    .hui-nav-wrapper {
      height: 45px!important;
      .hui-nav-bar {
        .hui-logo {
          height: 44px!important;
          line-height: 44px!important;
        }
        .hui-nav {
          display: none !important;
          float: none!important;
          > ul > li {
            width: 100%;
            text-align: left;
            border-bottom: solid 1px #eee;
            >a {
              display: block;
              padding: 0 15px;
              text-align: left;
            }
            &.hui-dropdown.open>.hui-dropdown-menu {
              display: none;
            }
            &.hui-dropdown>.hui-dropdown-link>.hui-iconfont {
              display: none;
            }
          }
          > ul > li,
          > ul > li >a {
            height: 44px!important;
            line-height: 44px!important;
          }
          &.hui-nav-collapse {
            ul,
            ul > li {
              width: 100%;
              display: block;
            }
          }
        }
      }
    }
  
    .js-nav-active .hui-nav-collapse {
      position: absolute;
      display: block;
      float: none;
      clear: both;
      max-height: 0;
      clip: rect(0 0 0 0);
      margin-left: -15px;
      margin-right: -15px;
      overflow: hidden;
      @include transition(max-height 284ms ease 0s);
      &.closed {
        max-height: none;
      }
    }
    .hui-nav-collapse.opened {
      max-height: 9999px;
    }
  }
  
  /*导航条风格-黑色*/
  .hui-nav-black {
    background-color: #222;
    border-bottom: #080808 1px solid;
    @include boxShadow(0 0 4px #333333);
    .hui-logo {
      color: #fff;
      color: #eee;
    }
  
    .navbar-userbar {
      color: #fff;
    }
    .hui-nav{
      > ul > li,
      > ul > li > a{
        color: #fff;
      }
      > ul > li > a:hover,
      > ul > li.current > a {
        color: #fff;
      }
    }
  }
  
  @media (max-width: 767px) {
    .hui-nav-black {
      .hui-nav > ul >li {
        border-bottom: solid 1px #222;
        > a:hover,
        &.current>a {
          background: #777;
        }
      }
    }
  }
  
  /*面包导航*/
  .hui-nav-toggle,
  a.hui-nav-toggle {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 20px;
    color: #999;
    padding: 6px 11px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    &:hover {
      text-decoration: none;
      color: #fff
    }
  }
  
  @media (max-width: 767px) {
    .mainnav>ul>li {
      font-size: 1.125em
    }
  }
  
  @media (max-width: 480px) {
    .mainnav>ul>li {
      text-align: center;
      width: 20%;
      >a {
        padding: 0;
        padding: 0;
        display: block
      }
    }
  }
/*logo*/
  .hui-logo {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
  }
  .hui-logo:hover {
    text-decoration: none;
  }
  
  /*导航条*/
  .hui-nav-wrapper {
    height: 45px;
  }
  .hui-nav-wrapper .hui-nav-bar {
    position: relative;
    z-index: 1030;
    background-color: #fff;
  }
  .hui-nav-wrapper .hui-nav-bar .hui-layout-content {
    position: relative;
  }
  .hui-nav-wrapper .hui-nav-bar .hui-layout-content .hui-nav-userbar {
    right: 0px;
  }
  .hui-nav-wrapper .hui-nav-bar.hui-nav-black {
    background-color: #222;
  }
  .hui-nav-wrapper .hui-nav-bar.hui-nav-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  }
  .hui-nav-wrapper .hui-nav-bar .hui-logo {
    height: 44px;
    line-height: 44px;
    margin-right: 10px;
    float: left;
    font-size: 16px;
  }
  .hui-nav-wrapper .hui-nav-bar .hui-slogan {
    font-size: 12px;
    cursor: default;
  }
  
  /*导航*/
  .hui-nav {
    z-index: 1;
  }
  .hui-nav > ul {
    font-size: 0;
    line-height: 0;
  }
  .hui-nav > ul > li,
  .hui-nav > ul > li > a {
    line-height: 44px;
    font-size: 14px;
  }
  .hui-nav > ul > li {
    position: relative;
    float: left;
    text-align: center;
  }
  .hui-nav > ul > li > a {
    display: inline-block;
    text-align: center;
    padding: 0 10px;
  }
  .hui-nav > ul > li > a:hover, .hui-nav > ul > li.current > a {
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
  }
  
  @media (max-width: 767px) {
    .hui-logo {
      margin-right: 0;
    }
  
    .hui-nav-wrapper {
      height: 45px !important;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-logo {
      height: 44px !important;
      line-height: 44px !important;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav {
      display: none !important;
      float: none !important;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li {
      width: 100%;
      text-align: left;
      border-bottom: solid 1px #eee;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li > a {
      display: block;
      padding: 0 15px;
      text-align: left;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li.hui-dropdown.open > .hui-dropdown-menu {
      display: none;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li.hui-dropdown > .hui-dropdown-link > .hui-iconfont {
      display: none;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li,
    .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li > a {
      height: 44px !important;
      line-height: 44px !important;
    }
    .hui-nav-wrapper .hui-nav-bar .hui-nav.hui-nav-collapse ul,
    .hui-nav-wrapper .hui-nav-bar .hui-nav.hui-nav-collapse ul > li {
      width: 100%;
      display: block;
    }
  
    .js-nav-active .hui-nav-collapse {
      position: absolute;
      display: block;
      float: none;
      clear: both;
      max-height: 0;
      clip: rect(0 0 0 0);
      margin-left: -15px;
      margin-right: -15px;
      overflow: hidden;
      transition: max-height 284ms ease 0s;
    }
    .js-nav-active .hui-nav-collapse.closed {
      max-height: none;
    }
  
    .hui-nav-collapse.opened {
      max-height: 9999px;
    }
  }
  /*导航条风格-黑色*/
  .hui-nav-black {
    background-color: #222;
    border-bottom: #080808 1px solid;
    box-shadow: 0 0 4px #333333;
  }
  .hui-nav-black .hui-logo {
    color: #fff;
    color: #eee;
  }
  .hui-nav-black .navbar-userbar {
    color: #fff;
  }
  .hui-nav-black .hui-nav > ul > li,
  .hui-nav-black .hui-nav > ul > li > a {
    color: #fff;
  }
  .hui-nav-black .hui-nav > ul > li > a:hover,
  .hui-nav-black .hui-nav > ul > li.current > a {
    color: #fff;
  }
  
  @media (max-width: 767px) {
    .hui-nav-black .hui-nav > ul > li {
      border-bottom: solid 1px #222;
    }
    .hui-nav-black .hui-nav > ul > li > a:hover, .hui-nav-black .hui-nav > ul > li.current > a {
      background: #777;
    }
  }
  /*面包导航*/
  .hui-nav-toggle,
  a.hui-nav-toggle {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 20px;
    color: #999;
    padding: 6px 11px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  .hui-nav-toggle:hover,
  a.hui-nav-toggle:hover {
    text-decoration: none;
    color: #fff;
  }
  
  @media (max-width: 767px) {
    .mainnav > ul > li {
      font-size: 1.125em;
    }
  }
  @media (max-width: 480px) {
    .mainnav > ul > li {
      text-align: center;
      width: 20%;
    }
    .mainnav > ul > li > a {
      padding: 0;
      padding: 0;
      display: block;
    }
  }

4.2.2 面包屑导航

首页>组件>导航
HTML SCSS CSS 
<div class="hui-breadcrumb">
  <i class="hui-iconfont">&#xe67f;</i> <a class="maincolor" href="/">首页</a><span class="c-999 en">&gt;</span>组件<span class="c-999 en">&gt;</span><span class="c-666">导航</span>
</div>
.hui-breadcrumb {
  border-bottom: 1px solid #E5E5E5;
  overflow: hidden;
  padding: 10px 0;
  span {
    padding: 0 5px;
  }
}
.hui-breadcrumb {
  border-bottom: 1px solid #E5E5E5;
  overflow: hidden;
  padding: 10px 0;
}
.hui-breadcrumb span {
  padding: 0 5px;
}

4.2.3 翻页导航

使用layPage插件。layPage是一款多功能的国产js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可。（此插件版权归：贤心所有。请在使用过程中不要删除版权注释。）

jump函数返回e是一个object，e.curr即当前页，通过它去向服务端请求相关数据。

更多技术问题请：进入作者官网

引入laypage.js

<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>

调用代码：

$.getJSON('test/demo1.json', {curr: 6}, function(res) {
  //从第6页开始请求。返回的json格式可以任意定义
  laypage({
    cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="page1">&lt;/div>
    pages: res.pages, //通过后台拿到的总页数
    curr: 6, //初始化当前页
    jump: function(e) { //触发分页后的回调
      $.getJSON('test/demo1.json', {curr: e.curr}, function(res){
        e.pages = e.last = res.pages; //重新获取总页数，一般不用写
        //渲染
        var view = document.getElementById('view1'); //你也可以直接使用jquery
        var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示
        view.innerHTML = res.content + demoContent;
      });
    }
  });
});

4.2.4 顶部导航

您好，欢迎来到H-ui！
[ 登录 ]|[ 注册 ]|收藏本站|设为首页
HTML SCSS CSS 
<div class="hui-topnav">
  <div class="clearfix">
    <div class="f-l">您好，欢迎来到H-ui！</div>
    <div class="f-r">
      <span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="hui-pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="hui-pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="hui-pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a>
      </span>
    </div>
  </div>
</div>
.hui-topnav {
  height: 30px;
  line-height: 30px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #EBEBEB;
  font-size: 12px;
  .topbar {
    background-color: #ECECEC;
    border-bottom: 1px solid #ddd;
    a {
      margin-right: 5px;
    }
  }
  .r_nav {
    display: inline-block;
    color: #999;
  }
}
.hui-topnav {
  height: 30px;
  line-height: 30px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #EBEBEB;
  font-size: 12px;
}
.hui-topnav .topbar {
  background-color: #ECECEC;
  border-bottom: 1px solid #ddd;
}
.hui-topnav .topbar a {
  margin-right: 5px;
}
.hui-topnav .r_nav {
  display: inline-block;
  color: #999;
}

4.2.5 导向

第一步
第一步 第二步
第一步 第二步 第三步
第一步 第二步 第三步 第四步
第一步 第二步 第三步 第四步 第五步
HTML SCSS CSS 
<div class="hui-steps four">
  <span class="hui-steps-item">第一步</span>
  <span class="hui-steps-item active">第二步</span>
  <span class="hui-steps-item disabled">第三步</span>
  <span class="hui-steps-item disabled">第四步</span>
</div>
.hui-steps {
  display: inline-block;
  position: relative;
  padding: 1em 2em 1em 3em;
  vertical-align: top;
  background-color: #FFF;
  color: #888;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  @include transition(all .1s ease);
  &:after{
    position: absolute;
    z-index: 2;
    content: '';
    top: 0;
    right: -1.45em;
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid #FFF;
    border-top: 1.5em solid transparent;
    width: 0;
    height: 0;
    @include transition(all .1s ease);
  }
  cursor: pointer;
  font-size: 0;
  @include boxShadow(0 0 0 1px rgba(0, 0, 0, .1));
  border-radius: .3125rem;
  line-height: 1;
  .hui-steps-item {
    display: inline-block;
    position: relative;
    padding: 1em 2em 1em 3em;
    vertical-align: top;
    background-color: #FFF;
    color: #888;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1rem;
    @include transition(all .1s ease);
    &:after{
      position: absolute;
      z-index: 2;
      content: '';
      top: 0;
      right: -1.45em;
      border-bottom: 1.5em solid transparent;
      border-left: 1.5em solid #FFF;
      border-top: 1.5em solid transparent;
      width: 0;
      height: 0;
      @include transition(all .1s ease);
    }
    &:first-child {
      padding-left: 1.35em;
      border-radius: .3125em 0 0 .3125em;
    }
    &:last-child {
      border-radius: 0 .3125em .3125em 0;
      margin-right: 0;
      &:after {
        display: none
      }
    }
    &:only-child {
      border-radius: .3125em
    }
    &:hover,
    &.hover {
      background-color: #F7F7F7;
      color: rgba(0, 0, 0, .8);
      &:after {
        border-left-color: #F7F7F7
      }
    }
    &.down,
    &:active {
      background-color: #F0F0F0;
      &:after{
        border-left-color: #F0F0F0;
      }
    }
    &.active {
      cursor: auto;
      background-color: #428BCA;
      color: #FFF;
      font-weight: 700;
      &:after {
        border-left-color: #428BCA
      }
    }
    &.disabled {
      cursor: auto;
      background-color: #FFF;
      color: #CBCBCB;
      &:after {
        border: 0;
        background-color: #FFF;
        top: .42em;
        right: -1em;
        width: 2.15em;
        height: 2.15em;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-shadow: -1px -1px 0 0 rgba(0, 0, 0, .1) inset
      }
    }
  }
  &.attached {
    margin: 0;
    border-radius: .3125em .3125em 0 0;
    .hui-steps-item {
      &:first-child {
        border-radius: .3125em 0 0;
      }
      &:last-child {
        border-radius: 0 .3125em 0 0;
      }
    }
    &.bottom {
      margin-top: -1px;
      border-radius: 0 0 .3125em .3125em;
      .hui-steps-item {
        &:first-child {
          border-radius: 0 0 0 .3125em;
        }
        &:last-child {
          border-radius: 0 0 .3125em;
        }
      }
    }
  }

  &.one,
  &.two,
  &.three,
  &.four,
  &.six,
  &.seven,
  &.eight {
    display: block;
  }
  &.one {
    > .hui-steps-item {
      width: 100%;
    }
  }
  &.two {
    > .hui-steps-item {
      width: 50%;
    }
  }
  &.three {
    > .hui-steps-item {
      width: 33.333%;
    }
  }
  &.four {
    > .hui-steps-item {
      width: 25%;
    }
  }
  &.five {
    > .hui-steps-item {
      width: 20%;
    }
  }
  &.six {
    > .hui-steps-item {
      width: 16.666%;
    }
  }
  &.seven {
    > .hui-steps-item {
      width: 14.285%;
    }
  }
  &.eight {
    > .hui-steps-item {
      width: 12.5%;
    }
  }
  &.small {
    .hui-steps-item {
      font-size: .8rem
    }
  }
  &.large {
    .hui-steps-item {
      font-size: 1.25rem
    }
  }
}
.hui-steps {
  display: inline-block;
  position: relative;
  padding: 1em 2em 1em 3em;
  vertical-align: top;
  background-color: #FFF;
  color: #888;
  box-sizing: border-box;
  transition: all 0.1s ease;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 0.3125rem;
  line-height: 1;
}
.hui-steps:after {
  position: absolute;
  z-index: 2;
  content: "";
  top: 0;
  right: -1.45em;
  border-bottom: 1.5em solid transparent;
  border-left: 1.5em solid #FFF;
  border-top: 1.5em solid transparent;
  width: 0;
  height: 0;
  transition: all 0.1s ease;
}
.hui-steps .hui-steps-item {
  display: inline-block;
  position: relative;
  padding: 1em 2em 1em 3em;
  vertical-align: top;
  background-color: #FFF;
  color: #888;
  box-sizing: border-box;
  font-size: 1rem;
  transition: all 0.1s ease;
}
.hui-steps .hui-steps-item:after {
  position: absolute;
  z-index: 2;
  content: "";
  top: 0;
  right: -1.45em;
  border-bottom: 1.5em solid transparent;
  border-left: 1.5em solid #FFF;
  border-top: 1.5em solid transparent;
  width: 0;
  height: 0;
  transition: all 0.1s ease;
}
.hui-steps .hui-steps-item:first-child {
  padding-left: 1.35em;
  border-radius: 0.3125em 0 0 0.3125em;
}
.hui-steps .hui-steps-item:last-child {
  border-radius: 0 0.3125em 0.3125em 0;
  margin-right: 0;
}
.hui-steps .hui-steps-item:last-child:after {
  display: none;
}
.hui-steps .hui-steps-item:only-child {
  border-radius: 0.3125em;
}
.hui-steps .hui-steps-item:hover, .hui-steps .hui-steps-item.hover {
  background-color: #F7F7F7;
  color: rgba(0, 0, 0, 0.8);
}
.hui-steps .hui-steps-item:hover:after, .hui-steps .hui-steps-item.hover:after {
  border-left-color: #F7F7F7;
}
.hui-steps .hui-steps-item.down, .hui-steps .hui-steps-item:active {
  background-color: #F0F0F0;
}
.hui-steps .hui-steps-item.down:after, .hui-steps .hui-steps-item:active:after {
  border-left-color: #F0F0F0;
}
.hui-steps .hui-steps-item.active {
  cursor: auto;
  background-color: #428BCA;
  color: #FFF;
  font-weight: 700;
}
.hui-steps .hui-steps-item.active:after {
  border-left-color: #428BCA;
}
.hui-steps .hui-steps-item.disabled {
  cursor: auto;
  background-color: #FFF;
  color: #CBCBCB;
}
.hui-steps .hui-steps-item.disabled:after {
  border: 0;
  background-color: #FFF;
  top: 0.42em;
  right: -1em;
  width: 2.15em;
  height: 2.15em;
  transform: rotate(-45deg);
  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.1) inset;
}
.hui-steps.attached {
  margin: 0;
  border-radius: 0.3125em 0.3125em 0 0;
}
.hui-steps.attached .hui-steps-item:first-child {
  border-radius: 0.3125em 0 0;
}
.hui-steps.attached .hui-steps-item:last-child {
  border-radius: 0 0.3125em 0 0;
}
.hui-steps.attached.bottom {
  margin-top: -1px;
  border-radius: 0 0 0.3125em 0.3125em;
}
.hui-steps.attached.bottom .hui-steps-item:first-child {
  border-radius: 0 0 0 0.3125em;
}
.hui-steps.attached.bottom .hui-steps-item:last-child {
  border-radius: 0 0 0.3125em;
}
.hui-steps.one, .hui-steps.two, .hui-steps.three, .hui-steps.four, .hui-steps.six, .hui-steps.seven, .hui-steps.eight {
  display: block;
}
.hui-steps.one > .hui-steps-item {
  width: 100%;
}
.hui-steps.two > .hui-steps-item {
  width: 50%;
}
.hui-steps.three > .hui-steps-item {
  width: 33.333%;
}
.hui-steps.four > .hui-steps-item {
  width: 25%;
}
.hui-steps.five > .hui-steps-item {
  width: 20%;
}
.hui-steps.six > .hui-steps-item {
  width: 16.666%;
}
.hui-steps.seven > .hui-steps-item {
  width: 14.285%;
}
.hui-steps.eight > .hui-steps-item {
  width: 12.5%;
}
.hui-steps.small .hui-steps-item {
  font-size: 0.8rem;
}
.hui-steps.large .hui-steps-item {
  font-size: 1.25rem;
}

豫ICP备19019279号-1
H-ui只是一个纯web前端的程序，没有后台和数据库，也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有，造成的任何损失、不良影响，H-ui均不承担任何法律责任。
未经允许，禁止转载、抄袭、镜像
用心做站，做不一样的站