List 列表
使用说明
本框架列表结构是为了满足多元化需要而制作的，可以是a标签，也可以是其他标签。基本格式如下：
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">文字</span></div>
<span class="ax-arrow">文字</span>
</div>
</a>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">文字</span></div>
<span class="ax-arrow">文字</span>
</div>
</div>
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<span class="ax-arrow">26次</span>
</div>
</a>
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
<span class="ax-arrow">45次</span>
</div>
</a>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<span class="ax-arrow">234次</span>
</div>
</div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
<span class="ax-arrow">98次</span>
</div>
</div>
分割线
使用ax-break-line制作列表分割线。
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<span class="ax-arrow">26次</span>
</div>
</a>
<div class="ax-break-line"></div>
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
<span class="ax-arrow">45次</span>
</div>
</a>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<span class="ax-arrow">234次</span>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
<span class="ax-arrow">98次</span>
</div>
</div>
边距
使用ax-break-line ax-margin-lr制作带左右边距的列表分割线。ax-margin-lr顾名思义是留出左右两边距，ax-margin-left是留出左边距，ax-margin-right是留出右边距。
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<span class="ax-arrow">26次</span>
</div>
</a>
<div class="ax-break-line ax-margin-lr"></div>
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
<span class="ax-arrow">45次</span>
</div>
</a>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<span class="ax-arrow">234次</span>
</div>
</div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
<span class="ax-arrow">98次</span>
</div>
</div>
排行榜
使用ax-num制作带排行的列表。
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-num ax-num-1">1</span>
<div class="ax-col"><span class="ax-ell">海外华侨华人积极参与，中国春节越来越有世界范儿</span></div>
<span class="ax-arrow">85次</span>
</div>
</a>
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-num ax-num-2">2</span>
<div class="ax-col"><span class="ax-ell">以色列主要旅游景点营造春节气氛</span></div>
<span class="ax-arrow">12次</span>
</div>
</a>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-num ax-num-3">3</span>
<div class="ax-col"><a href="###" class="ax-ell">首条浙江杭州直飞东非大陆航线开通</a></div>
<span class="ax-arrow">23次</span>
</div>
</div>
图标
使用ax-icon制作带图标的列表。
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-icon ax-iconfont ax-icon-volume-up-fill"></span>
<div class="ax-col"><span class="ax-ell">海外华侨华人积极参与，中国春节越来越有世界范儿</span></div>
<span class="ax-arrow">85次</span>
</div>
</a>
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-icon ax-iconfont ax-icon-pie-fill"></span>
<div class="ax-col"><span class="ax-ell">以色列主要旅游景点营造春节气氛</span></div>
<span class="ax-arrow">12次</span>
</div>
</a>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-icon ax-iconfont ax-icon-earth-fill"></span>
<div class="ax-col"><a href="###" class="ax-ell">首条浙江杭州直飞东非大陆航线开通</a></div>
<span class="ax-arrow">23次</span>
</div>
</div>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-icon ax-iconfont ax-icon-video-fill"></span>
<div class="ax-col"><a href="###" class="ax-ell">尼泊尔旅游年启动仪式在拉萨举行</a></div>
<span class="ax-arrow">32次</span>
</div>
</div>
头像
使用ax-head制作带头像的列表。
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/src/images/default-head.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<span class="ax-arrow ax-iconfont ax-icon-right"></span>
</div>
</a>
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
<span class="ax-arrow ax-iconfont ax-icon-right"></span>
</div>
</a>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<span class="ax-arrow">234次</span>
<a href="###" class="ax-arrow ax-iconfont ax-icon-right"></a>
</div>
</div>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head02.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
<span class="ax-arrow">98次</span>
<a href="###" class="ax-arrow ax-iconfont ax-icon-right"></a>
</div>
</div>
复选和单选
使用ax-checkbox ax-bone复选或者ax-switch ax-bone开关制作多选列表；使用ax-radio ax-bone单选制作单选列表
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
欧盟六国一日游
无聊待在家
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-checkbox ax-bone"><input name="apple" value="2" checked="" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
<label class="ax-checkbox ax-bone"><input name="apple" value="2" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
<label class="ax-checkbox ax-bone"><input name="apple" value="2" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
<label class="ax-checkbox ax-bone"><input name="apple" value="2" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">欧盟六国一日游</span></div>
<label class="ax-switch ax-bone"><input name="english" value="0" checked="" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">无聊待在家</span></div>
<label class="ax-switch ax-bone"><input name="english" value="1" type="checkbox"><span></span></label>
</div>
</div>
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-radio ax-bone"><input name="bike" value="2" checked="" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
<label class="ax-radio ax-bone"><input name="bike" value="2" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
<label class="ax-radio ax-bone"><input name="bike" value="2" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
<label class="ax-radio ax-bone"><input name="bike" value="2" type="radio"><span></span></label>
</div>
</div>
选择列表
对list列表用ax-list-select包裹住表示可点击选择的列表。在复选和单选列表中适当的添加js，可实现更丰富的效果。本框架已经集成js代码，复制可用。
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
桂林漓江漂流
井冈山瞻仰历史
欧盟六国一日游
无聊待在家
日本东京三日游
美国纽约大学七日游学
<div class="ax-list-select">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-checkbox ax-bone"><input name="house" value="2" checked="" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
<label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
<label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
<label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">桂林漓江漂流</span></div>
<label class="ax-checkbox ax-bone"><input name="house" value="2" checked="" disabled type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></div>
<label class="ax-checkbox ax-bone"><input name="house" value="2" disabled type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">欧盟六国一日游</span></div>
<label class="ax-switch ax-bone"><input name="home" value="0" checked="" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">无聊待在家</span></div>
<label class="ax-switch ax-bone"><input name="home" value="1" type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">日本东京三日游</span></div>
<label class="ax-switch ax-bone"><input name="home" value="0" checked="" disabled type="checkbox"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">美国纽约大学七日游学</span></div>
<label class="ax-switch ax-bone"><input name="home" value="1" disabled type="checkbox"><span></span></label>
</div>
</div>
</div>
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
桂林漓江漂流
井冈山瞻仰历史
<div class="ax-list-select">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-radio ax-bone"><input name="computer" value="2" checked="" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
<label class="ax-radio ax-bone"><input name="computer" value="2" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
<label class="ax-radio ax-bone"><input name="computer" value="2" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
<label class="ax-radio ax-bone"><input name="computer" value="2" type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">桂林漓江漂流</span></div>
<label class="ax-radio ax-bone"><input name="computer" value="2" checked="" disabled type="radio"><span></span></label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></div>
<label class="ax-radio ax-bone"><input name="computer" value="2" disabled type="radio"><span></span></label>
</div>
</div>
</div>
全选列表 JS
可配合grid栅格，循环显示选择列表，可常见于用户选择列表。
如果需要使用全选功能，需要配合radio或checkbox一起使用，必填的属性是name和value。value="0"表示全不选，value="1"表示全选，格式固定不可更改；本例中的group-select-good，group-select-*是固定字符串，good是选择列表input的name属性，是全选功能唯一可修改的字符串。请详细观摩演示案例。
<label class="ax-radio"><input name="group-select-good" type="radio" value="1"><span>全选</span></label>
<label class="ax-radio"><input name="group-select-good" type="radio" value="0"><span>全不选</span></label>
<label class="ax-checkbox"><input name="group-select-bad" type="checkbox" value="1"><span>全选</span></label>
-
去成都逛宽窄巷子
-
到北京游八达岭长城
-
下榻乌镇经典民宿
-
自驾丽江三两天
-
去成都逛宽窄巷子
-
到北京游八达岭长城
-
下榻乌镇经典民宿
-
自驾丽江三两天
-
庄自强
-
李显扬
-
邬栋
-
郝仁
<ul class="ax-grid-table ax-list-select">
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
<label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
<label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
<label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox" disabled><span></span></label>
</div>
</div>
</li>
</ul>
<label class="ax-radio"><input name="group-select-good" type="radio" value="1"><span>全选</span></label>
<label class="ax-radio"><input name="group-select-good" type="radio" value="0"><span>全不选</span></label>
<span class="good"></span>
<div class="ax-break"></div>
<ul class="ax-grid-table ax-list-select">
<li class="ax-grid-block ax-col-24">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-24">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
<label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-24">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
<label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-24">
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
<label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox" disabled><span></span></label>
</div>
</div>
</li>
</ul>
<label class="ax-checkbox"><input name="group-select-bad" type="checkbox" value="1"><span>全选</span></label>
<div class="ax-break"></div>
<ul class="ax-grid-table ax-list-select">
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><span class="ax-ell">庄自强</span></div>
<label class="ax-radio ax-bone"><input name="school" value="2" type="radio" checked=""><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head02.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><span class="ax-ell">李显扬</span></div>
<label class="ax-radio ax-bone"><input name="school" value="2" type="radio"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head03.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><span class="ax-ell">邬栋</span></div>
<label class="ax-radio ax-bone"><input name="school" value="2" type="radio"><span></span></label>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head04.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></span>
<div class="ax-col"><span class="ax-ell">郝仁</span></div>
<label class="ax-radio ax-bone"><input name="school" value="2" type="radio" disabled><span></span></label>
</div>
</div>
</li>
</ul>
样式
使用ax-hover样式，鼠标经过背景色变色；使用ax-selected样式表示被选择；使用ax-active样式表示该行被激活；使用ax-disabled样式，表示禁止操作
去成都逛宽窄巷子
到北京游八达岭长城
斐济旅游局与微博达成战略合作,吸引中国游客赴斐济旅游
可乐果，尼日尔的快乐果
下榻乌镇经典民宿
自驾丽江三两天
烧荒季，澳大利亚人太难了
<div class="ax-info-block ax-hover">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-hover">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-hover ax-selected">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">斐济旅游局与微博达成战略合作,吸引中国游客赴斐济旅游</span></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-hover">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">可乐果，尼日尔的快乐果</span></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-hover ax-active">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-hover">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-hover ax-disabled">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">烧荒季，澳大利亚人太难了</span></div>
</div>
</div>
边框
给列表添加外边框。ax-border表示带边框；ax-margin表示保留周围边距；ax-radius表示外边框是圆角。
<div class="ax-border ax-margin ax-radius">
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<span class="ax-arrow">26次</span>
</div>
</a>
<div class="ax-break-line ax-margin-lr"></div>
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
<span class="ax-arrow">45次</span>
</div>
</a>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<span class="ax-arrow">234次</span>
</div>
</div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
<span class="ax-arrow">98次</span>
</div>
</div>
</div>
新闻列表
使用ax-item-block样式构建文章列表，配合ax-img、ax-title、ax-des等样式组成图文列表内容。配合使用ax-break和ax-break-line进行信息分割，基本格式如下：
<div class="ax-item-block">
<div class="ax-row">
<a href="###" class="ax-img" style="background-image:url(图片),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></a>
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">文字</a></div>
<div class="ax-des ax-ell-2-des">文字</div>
</div>
</div>
</div>
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
<div class="ax-margin">
<div class="ax-item-block">
<div class="ax-row">
<a href="###" class="ax-img" 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.svg);"></a>
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a></div>
<div class="ax-des ax-ell-2-des">埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div class="ax-from">
<span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
<a href="###" class="ax-img" 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.svg);"></a>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<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 class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
<a href="###" class="ax-img" style="background-image:url(),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></a>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<a href="###" class="ax-img" 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.svg);"></a>
<div class="ax-col">
<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 class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-10.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg);"></a>
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-3-title">每年秋季（3月到5月）、春季（9月到11月），悉尼上空时常烟雾弥漫，悉尼海港大桥时隐时现。原来这是烧荒导致的烟雾。澳大利亚是最大的岛国，大洋洲是全球最干旱的大陆之一，山火发生率非常高，为减少森林大火，防御性烧荒成了澳大利亚控制火灾的良方之一。但烧荒导致的烟霾又引发一系列问题，比如对当地居民及动物的健康带来危害，对生活造成很多不便等等。</a></div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a></div>
<div class="ax-des ax-ell-2-des">埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div class="ax-from">
<span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
</div>
</div>
</div>
添加角标
通过使用ax-flag样式给新闻图片添加角标，关于角标使用方法见：角标。基本格式如下：
<a href="###" class="ax-img" style="background-image:url(图片),url(https://src.axui.cn/v1.0/src/images/loading.svg);"><span class="ax-flag ax-left"><i class="ax-bg-primary">最新</i></span></a>
最新
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。“长得越来越不像猫咪，而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知，它们不是普通的猫咪，而是珍惜的野生保护动物兔狲。
362
张春阳
2019年1月2日
<div class="ax-margin">
<div class="ax-item-block">
<div class="ax-row">
<a href="###" class="ax-img" 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.svg);"><span class="ax-flag ax-left"><i class="ax-bg-primary">最新</i></span></a>
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<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 class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
<a href="###" class="ax-img" 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.svg);"><span class="ax-flag ax-right"><i class="ax-bg-danger">Hot</i></span></a>
</div>
</div>
</div>
手机端通栏
通多对ax-row追加ax-split使左图右文或者右图左文格式在手机端实现通栏图片显示。ax-split这是弹性布局的一个自适应常规用法，详见layout布局。
<div class="ax-margin">
<div class="ax-item-block">
<div class="ax-row ax-split">
<a href="###" class="ax-img" 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.svg);"></a>
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row ax-split">
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
<a href="###" class="ax-img" 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.svg);"></a>
</div>
</div>
</div>
广告新闻
通过对ax-item-block追加ax-ad使之成为广告，在底部显示“广告”字样。
<div class="ax-margin">
<div class="ax-item-block ax-ad">
<div class="ax-row ax-split">
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
<a href="###" class="ax-img" 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.svg);"></a>
</div>
</div>
</div>
多图新闻列表
通过使用ax-gallery包裹图集，已经适配手机，在PC最多显示5个，在手机中最多只显示3个。基本格式如下：
<div class="ax-gallery"><a href="###" style="background-image: url(图片),url(https://src.axui.cn/v1.0/src/images/loading.svg)"></a><a href="###" style="background-image: url(图片),url(https://src.axui.cn/v1.0/src/images/loading.svg)"></a><a href="###" style="background-image: url(图片),url(https://src.axui.cn/v1.0/src/images/loading.svg)"></a><i class="ax-num">3图</i></div>
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
<div class="ax-margin">
<div class="ax-item-block">
<div class="ax-row">
<a href="###" class="ax-img" 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.svg);"></a>
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</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.svg)"></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.svg)"></a><i class="ax-num">2图</i></div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</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.svg)"></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.svg)"></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.svg)"></a><i class="ax-num">3图</i></div>
<div class="ax-keywords">
关键字：<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
</div>
</div>
</div>
</div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-break-line ax-margin-lr"></div>
<div class="ax-break-md ax-hide-tel"></div>
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<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.svg)"></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.svg)"></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.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-4.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-5.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg)"></a><i class="ax-num">7图</i></div>
<div class="ax-from">
<span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
</div>
</div>
</div>
多图更多
如果不希望像上述例子那样仅用ax-num表示图片数量，用户可以使用给a追加ax-more类以“遮罩+数量”的方式表示更多图片。
<div class="ax-item-block">
<div class="ax-row">
<div class="ax-col">
<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.svg)"></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.svg)"></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.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/image-4.jpg),url(https://src.axui.cn/v1.0/src/images/loading.svg)"></a><a href="###" class="ax-more" style="background-image: url(examples/images/image-5.jpg),url(src/images/loading.svg)"><i>+12</i></a></div>
<div class="ax-from">
<span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
</div>
</div>