logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

目录

Tabbar


tab样式组件,使用 flex 实现,只兼容 IE 10+ 及其他现代浏览器

基本样式

tab布局在tabbar-bd(内容展示区)和tabbar-menu(tab标签栏)外嵌套tabbar-boxtabbar

<div class="tabbar-box">
<div class="tabbar">
    <div class="tabbar-bd">                              
        <div id="panl1" class="fill-height" style="display:none;width:100%">
                    通讯录 内容
        </div>
        <div id="panl2" class="fill-height" style="display:none;width:100%">
                    发现 内容
        </div>
        <div id="panl3" class="fill-height" style="display:none;width:100%">
                    我 内容
        </div>
   </div>
   <div class="tabbar-menu">                                              
        <a href="#" class="tabbar-item" for="panl1">
            <span class="tabbar-icon">
                <i class="fc fc-attendance-m"></i>
            </span>
            <p class="tabbar-text">通讯录</p>
        </a>
        <a href="#" class="tabbar-item" for="panl2">
            <span class="tabbar-icon">
                <i class="fc fc-attendance-m"></i>
            </span>
            <p class="tabbar-text">发现</p>
        </a>
        <a href="#" class="tabbar-item" for="panl3">
            <span class="tabbar-icon">
                <i class="fc fc-attendance-m"></i>
            </span>
            <p class="tabbar-text">我</p>
        </a>
   </div>
  </div>
</div>                  
        
侧栏导航