v3首页
核心
实例
资源
关于
v1.0

Header 自适应头部

基本用法

本框架制作了自适应的页面头部，左右两侧的图标以ax-open命名，仅给手机端使用，PC端默认隐藏。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-open ax-iconfont ax-icon-menu"></a><a href="###" class="ax-open ax-iconfont ax-icon-cart"></a><span class="ax-open"></span>
        <div class="ax-col"><a href="###" class="ax-logo"><img src="https://src.axui.cn/v2.0/public/images/ax-logo.png" /></a></div>
        <div class="ax-nav">

            <div class="ax-item"><a href="###" class="ax-text">首页</a><span class="ax-line"></span></div>
            <div class="ax-item ax-selected"><a href="###" class="ax-text">新闻动态</a><span class="ax-line"></span></div>
            <div class="ax-item"><a href="###" class="ax-text">产品中心</a><span class="ax-line"></span></div>
            <div class="ax-item "><a href="###" class="ax-text">关于</a><span class="ax-line"></span></div>

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a><a href="###" class="ax-iconfont ax-icon-person-f"></a><a href="###" class="ax-iconfont ax-icon-down" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg);"></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-bell-f"><span class="ax-badge">2</span></a><a href="###" class="ax-open ax-iconfont ax-icon-person"><span class="ax-dot"></span></a><a href="###" class="ax-open ax-iconfont ax-icon-search"></a>
    </div>
</header>
<div class="ax-space-header"></div>

使用简单菜单

对自适应头部的ax-nav导航可使用简单的Grade无限层级菜单，具体用法见这里。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-image" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg);"></a><a href="###" class="ax-open ax-iconfont ax-icon-cart"></a><span class="ax-open"></span>
        <div class="ax-col"><a href="###" class="ax-logo"><img src="https://src.axui.cn/v2.0/public/images/ax-logo.png" /></a></div>
        <div class="ax-nav">

            <div class="ax-item ax-grade"><a href="###" class="ax-text">首页</a><span class="ax-line"></span></div>

            <div class="ax-item ax-grade ax-selected"><a href="###" class="ax-text">新闻动态<i class="ax-iconfont ax-icon-down"></i></a><span class="ax-line"></span>
                <ul class="ax-grade-wrapper ax-align-center">
                    <li><div><a href="###">教材</a></div></li>
                    <li><div selected><a href="###">小学</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
                        <ul>
                            <li><div selected><a href="###">艺术教育</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
                                <ul>
                                    <li><div><a href="###" >美术</a></li>
                                    <li><div selected><a href="###">舞蹈</a></div></li>
                                    <li><div><a href="###">主持</a></div></li>
                                    <li><div><a href="###">美声</a></div></li>
                                </ul>
                            </li>
                            <li><div><a href="###">初中</a></div></li>
                            <li><div><a href="###">高中</a></div></li>
                        </ul>
                    </li>
                    <li><div><a href="###">图书</a></div></li>
                </ul>
            </div>

            <div class="ax-item ax-grade"><a href="###" class="ax-text">产品中心<i class="ax-iconfont ax-icon-down"></i></a><span class="ax-line"></span>
                <ul class="ax-grade-wrapper ax-align-center">
                    <li><div><a href="###">国内新闻</a></div></li>
                    <li><div selected><a href="###">国际新闻</a></div></li>
                    <li><div><a href="###">行业动态</a></div></li>
                </ul>
            </div>

            <div class="ax-item ax-grade"><a href="###" class="ax-text">关于</a><span class="ax-line"></span></div>

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a><a href="###" class="ax-iconfont ax-icon-person-f"></a><a href="###" class="ax-iconfont ax-icon-down" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg);"></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-bell-f"><span class="ax-badge">2</span></a><a href="###" class="ax-open ax-iconfont ax-icon-person"><span class="ax-dot"></span></a>
    </div>
</header>
<div class="ax-space-header"></div>

行内滚动

如果取消固定顶部随着内容滚动，需要给ax-header追加ax-inherit类。

默认平板竖手机
<div class="ax-header ax-inherit">
    <div class="ax-row">
        <a href="###" class="ax-open ax-iconfont ax-icon-menu"></a><a href="###" class="ax-open ax-iconfont ax-icon-cart"></a><span class="ax-open"></span>
        <div class="ax-col"><a href="###" class="ax-logo"><img src="https://src.axui.cn/v2.0/public/images/ax-logo.png" /></a></div>
        <div class="ax-nav">

            <div class="ax-item"><a href="###" class="ax-text">首页</a><span class="ax-line"></span></div>
            <div class="ax-item ax-selected"><a href="###" class="ax-text">新闻动态</a><span class="ax-line"></span></div>
            <div class="ax-item"><a href="###" class="ax-text">产品中心</a><span class="ax-line"></span></div>
            <div class="ax-item "><a href="###" class="ax-text">关于</a><span class="ax-line"></span></div>

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a><a href="###" class="ax-iconfont ax-icon-person-f"></a><a href="###" class="ax-iconfont ax-icon-down" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg);"></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-bell-f"><span class="ax-badge">2</span></a><a href="###" class="ax-open ax-iconfont ax-icon-person"><span class="ax-dot"></span></a><a href="###" class="ax-open ax-iconfont ax-icon-search"></a>
    </div>
</header>
<div class="ax-space-header"></div>

更多元素

针对ax-header，本框架还设计了搜索条和组合按钮，复制可用。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-open ax-iconfont ax-icon-menu"></a><a href="###" class="ax-open ax-iconfont ax-icon-cart"></a><span class="ax-open"></span>
        <div class="ax-col"><a href="###" class="ax-logo"><img src="https://src.axui.cn/v2.0/public/images/ax-logo.png" /></a></div>
        <div class="ax-nav">

            <div class="ax-item"><a href="###" class="ax-text">首页</a><span class="ax-line"></span></div>
            <div class="ax-item ax-selected"><a href="###" class="ax-text">新闻动态</a><span class="ax-line"></span></div>

            <div class="ax-search">
                <form name="search">
                    <input name="show" value="title" type="hidden">
                    <input name="keyboard" placeholder="关键字..." type="text"><a href="###" class="ax-iconfont ax-icon-search"></a>
                </form>
            </div>

            <div class="ax-login"><a href="###">登录</a><a href="###">注册</a></div>

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-bell-f"><span class="ax-badge">2</span></a><a href="###" class="ax-open ax-iconfont ax-icon-person"><span class="ax-dot"></span></a><a href="###" class="ax-open ax-iconfont ax-icon-search"></a>
    </div>
</header>
<div class="ax-space-header"></div>

变体一

将ax-logo移出ax-col，在ax-col放置搜索框；在手机中默认启用了ax-mask，即把这个搜索框变成一个按钮，点击后跳转到搜索页面。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-logo"><img src="https://src.axui.cn/v2.0/public/images/ax-logo.png" /></a>
        <div class="ax-col">
            <div class="ax-resemble">
                <form name="search">
                    <input name="show" value="title" type="hidden">
                    <input name="keyboard" placeholder="关键字..." type="text"><a href="###" class="ax-iconfont ax-icon-search"></a>
                </form>
                <a href="###" class="ax-mask"></a>
            </div>
        </div>
        <div class="ax-nav">

            <div class="ax-item"><a href="###" class="ax-text">首页</a><span class="ax-line"></span></div>
            <div class="ax-item ax-selected"><a href="###" class="ax-text">新闻动态</a><span class="ax-line"></span></div>

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-menu"></a>
    </div>
</header>
<div class="ax-space-header"></div>

变体二

使用ax-title标签放置标题，为了设定标题大小而使用ax-row01放置文字内容。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-back ax-iconfont ax-icon-left"></a>
        <div class="ax-col">
            <div class="ax-title">
                <div class="ax-row01 ax-ell">黔西南6日大环线，一次性看爽喀斯特景观的鬼斧神工</div>
            </div>
        </div>
        <div class="ax-nav">

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-search"></a><a href="###" class="ax-open ax-iconfont ax-icon-menu"></a>
    </div>
</header>
<div class="ax-space-header"></div>

变体三

如果需要在ax-title内放置两个以上的不同内容，而且垂直居中，需要将ax-row01和ax-row02用div包裹住。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-back ax-iconfont ax-icon-left"></a>
        <div class="ax-col">
            <div class="ax-title">
                <div class="ax-outer">
                    <div class="ax-row01 ax-ell">黔西南6日大环线，一次性看爽喀斯特景观的鬼斧神工</div>
                    <div class="ax-row02">共452人发表评论</div>
                </div>
            </div>
        </div>
        <div class="ax-nav">

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-search"></a><a href="###" class="ax-open ax-iconfont ax-icon-menu"></a>
    </div>
</header>
<div class="ax-space-header"></div>

变体四

最简单的布局。

默认平板竖手机
<header class="ax-header">
    <div class="ax-row">
        <a href="###" class="ax-open ax-iconfont ax-icon-search"></a>
        <div class="ax-col">
            <div class="ax-title">
                <div class="ax-row01 ax-ell">黔西南6日大环线，一次性看爽喀斯特景观的鬼斧神工</div>
            </div>
        </div>
        <div class="ax-nav">

            <span class="ax-btns"><a href="###" class="ax-iconfont ax-icon-question-o-f"><span class="ax-dot"></span></a><a href="###" class="ax-iconfont ax-icon-bell-f"><span class="ax-badge">8</span></a></span>

        </div>
        <a href="###" class="ax-open ax-iconfont ax-icon-menu"></a>
    </div>
</header>
<div class="ax-space-header"></div>