v1.0核心
v1.0实例
v2.0

Card 卡片

使用说明

卡片是综合图文信息列表，不同于其他列表，卡片内容是从上至下排列的。卡片需要配合方格ax-grid使用以实现数据循环，方格使用方法见：方格。

  • “水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹
    意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。
    362 2019年1月2日
  • 欧洲最长屋桥盛不下千年传奇
    埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
  • HOT
    在蔚蓝世界探寻沉船遗迹：多米尼加新建一家“海底博物馆”
    “畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。
    关键字：威尼斯暴雨最高纪录
  • 俄罗斯一农户捡到“小猫”，长大后却发现不是猫
    俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
    362 2019年1月2日 
                                <div class="ax-padding">
                                    <div class="ax-grid ax-space-xxl">
                                        <ul class="ax-grid-inner">

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-8.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。
                                                    </div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block ax-padding-lr">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-7.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
                                                    </div>
                                                    <div class="ax-keywords">
                                                        关键字：<span>威尼斯</span><span>暴雨</span><span>最高纪录</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block ax-padding-lr">
                                                    <div class="ax-img">
                                                        <span class="ax-flag ax-left ax-danger"><i>HOT</i></span>
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-11.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">在蔚蓝世界探寻沉船遗迹：多米尼加新建一家“海底博物馆”</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        “畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。
                                                    </div>
                                                    <div class="ax-keywords">
                                                        关键字：<span>威尼斯</span><span>暴雨</span><span>最高纪录</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block ax-padding-lr">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-9.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
                                                    </div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>

添加操作

使用ax-operate表示操作，使用现有的layout布局制作。另外操作占用比较大的篇幅，为了保证手机端正常显示，请追加ax-split强制一行一个。

                                <div class="ax-padding">
                                    <div class="ax-grid ax-space-xxl ax-split">
                                        <ul class="ax-grid-inner">
                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-8.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。
                                                    </div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                    <div class="ax-operate">
                                                        <div class="ax-row">
                                                            <a href="###" class="ax-col ax-col-8"><i class="ax-color-danger">警告</i></a>
                                                            <span class="ax-gutter-line"></span>
                                                            <a href="###" class="ax-col ax-col-8">确定</a>
                                                            <span class="ax-gutter-line"></span>
                                                            <span class="ax-col ax-col-8"><i class="ax-color-ignore">禁止</i></span>
                                                        </div>
                                                    </div>
                                            </li>
                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-7.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
                                                    </div>
                                                    <div class="ax-keywords">
                                                        关键字：<span>威尼斯</span><span>暴雨</span><span>最高纪录</span>
                                                    </div>
                                                    <div class="ax-operate">
                                                        <div class="ax-row">
                                                            <div class="ax-col ax-col-16 ax-align-left">总价5800元，优惠0元</div>
                                                            <span class="ax-gutter-line"></span>
                                                            <a href="###" class="ax-col ax-col-8"><i class="ax-color-primary">立即购买</i></a>
                                                        </div>
                                                    </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

多图

使用ax-operate表示操作，使用现有的layout布局制作。另外多图占用比较大的篇幅，为了保证手机端正常显示，请追加ax-split强制一行一个。

                                <div class="ax-padding">
                                    <div class="ax-grid ax-space-xxl ax-split">
                                        <ul class="ax-grid-inner">

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-9.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a>
                                                    </div>
                                                    <div class="ax-des ax-ell-2-des">
                                                        俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
                                                    </div>
                                                    <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-1.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-2.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-3.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><i class="ax-num">3图</i></div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-9.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a>
                                                    </div>
                                                    <div class="ax-des ax-ell-2-des">
                                                        俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
                                                    </div>
                                                    <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-1.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-2.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" class="ax-more" style="background-image: url(examples/images/image-3.jpg),url(src/images/loading.gif)"><i>+12</i></a></div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-9.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-1.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-2.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-3.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><i class="ax-num">3图</i></div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a>
                                                    </div>
                                                    <div class="ax-des ax-ell-2-des">
                                                        俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
                                                    </div>

                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block ax-padding-lr">
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-2-title">埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。</a>
                                                    </div>
                                                    <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-1.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-2.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-3.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif)"></a><i class="ax-num">3图</i></div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>

其他

使用ax-view表示查看人，使用现有的layout布局制作。另外多图占用比较大的篇幅，为了保证手机端正常显示，请追加ax-split强制一行一个。

  • 欧洲最长屋桥盛不下千年传奇
    埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
    共56人查阅
    3天前发布 
                                <div class="ax-padding">
                                    <div class="ax-grid ax-space-xxl ax-split">
                                        <ul class="ax-grid-inner">

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-7.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a>
                                                    </div>
                                                    <div class="ax-des ax-ell-2-des">
                                                        埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
                                                    </div>
                                                    <div class="ax-keywords">
                                                        关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                    </div>
                                                    <div class="ax-view">
                                                        <div class="ax-flex-row">
                                                            <div class="ax-flex-block">
                                                                <a href="###" class="ax-heads ax-align-left-center"><span class="" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></span><span class="" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head02.jpg)"></span><span class="" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head03.jpg)"></span><i>共56人查阅</i></a>
                                                            </div>
                                                            3天前发布
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>






                                        </ul>
                                    </div>
                                </div>