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-f"></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-f"></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-f"></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-f"></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/v2.0/dist/images/avatar.svg),var(--load-gif);"></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(),var(--load-gif);"></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/v2.0/examples/images/head01.jpg),var(--load-gif);"></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/v2.0/examples/images/head02.jpg),var(--load-gif);"></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-image制作带方形图片的列表。
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-image"><img src="https://src.axui.cn/v2.0/public/images/china01.jpg" /></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-image"><img src="https://src.axui.cn/v2.0/public/images/china02.jpg" /></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-image"><img src="https://src.axui.cn/v2.0/public/images/china03.jpg" /></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-image"><img src="https://src.axui.cn/v2.0/public/images/china04.jpg" /></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-check制作静态勾选列表，仅仅是显示效果，无点击功能。
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<i class="ax-check ax-iconfont ax-icon-check"></i>
</div>
</a>
<div class="ax-break-line"></div>
<a href="###" class="ax-info-block ax-selected">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
<i class="ax-check ax-iconfont ax-icon-check"></i>
</div>
</a>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-active">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<i class="ax-check ax-iconfont ax-icon-check"></i>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-disabled">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
<i class="ax-check ax-iconfont ax-icon-check"></i>
</div>
</div>
确认勾选
在某些项目中有再次选择确认的需求，使用ax-confirm和ax-reconfirm制作确认勾选列表，仅仅是显示效果，无点击功能。
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
</div>
</a>
<div class="ax-break-line"></div>
<a href="###" class="ax-info-block ax-confirm">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月，到英国大城小镇看“亮灯”</span></div>
</div>
</a>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-reconfirm">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block ax-disabled">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div>
</div>
</div>
复选和单选
使用ax-checkbox ax-xs复选或者ax-switch ax-xs开关制作多选列表；使用ax-radio ax-xs单选制作单选列表
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
欧盟六国一日游
无聊待在家
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
<label class="ax-checkbox ax-xs"><input name="apple" value="2" checked="" type="checkbox"><u></u></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-xs"><input name="apple" value="2" type="checkbox"><u></u></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-xs"><input name="apple" value="2" type="checkbox"><u></u></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-xs"><input name="apple" value="2" type="checkbox"><u></u></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-xs"><input name="english" value="0" checked="" type="checkbox"><u></u></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-xs"><input name="english" value="1" type="checkbox"><u></u></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-xs"><input name="bike" value="2" checked="" type="radio"><u></u></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-xs"><input name="bike" value="2" type="radio"><u></u></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-xs"><input name="bike" value="2" type="radio"><u></u></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-xs"><input name="bike" value="2" type="radio"><u></u></label>
</div>
</div>
选择列表
如果将checkbox和radio也做成全宽可点击的列表，需要改造节点并追加弹性布局的类。
- 第一步：label标签的子节点按input > i > u的顺序放置
- 第二步：label标签追加ax-row类，以使用弹性布局
- 第三步：对i标签追加ax-col以作为弹性布局的子节点
- 第四步：对i标签中的文字使用ax-ell类包裹，以使用超出省略效果
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="house" value="1" type="checkbox">
<i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="house" value="2" type="checkbox">
<i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="house" value="3" type="checkbox">
<i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="house" value="4" type="checkbox">
<i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="house" value="5" type="checkbox" checked disabled>
<i class="ax-col"><span class="ax-ell">桂林漓江漂流</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="house" value="6" type="checkbox" disabled>
<i class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-switch ax-xs ax-row">
<input name="home" value="1" type="checkbox" checked>
<i class="ax-col"><span class="ax-ell">欧盟六国一日游</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-switch ax-xs ax-row">
<input name="home" value="2" type="checkbox">
<i class="ax-col"><span class="ax-ell">无聊待在家</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-switch ax-xs ax-row">
<input name="home" value="3" type="checkbox" checked disabled>
<i class="ax-col"><span class="ax-ell">日本东京三日游</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-switch ax-xs ax-row">
<input name="home" value="4" type="checkbox" disabled>
<i class="ax-col"><span class="ax-ell">美国纽约大学七日游学</span></i>
<u></u>
</label>
</div>
<div class="ax-info-block">
<label class="ax-radio ax-xs ax-row">
<input name="computer" value="1" type="checkbox">
<i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-radio ax-xs ax-row">
<input name="computer" value="2" type="checkbox">
<i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-radio ax-xs ax-row">
<input name="computer" value="3" type="checkbox">
<i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-radio ax-xs ax-row">
<input name="computer" value="4" type="checkbox">
<i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-radio ax-xs ax-row" >
<input name="computer" value="5" type="checkbox" checked disabled>
<i class="ax-col"><span class="ax-ell">桂林漓江漂流</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-radio ax-xs ax-row">
<input name="computer" value="6" type="checkbox" disabled>
<i class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></i>
<u></u>
</label>
</div>
全选列表
可配合grid栅格，循环显示选择列表，可常见于用户选择列表。
创建checkbox列表之后，如果需要使用全选功能，可使用axCheckAll插件，插件使用详细请点击这里。
<div axCheckAll="checkDom:'[listradio]'">
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="good" value="1" type="checkbox">
<i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="good" value="2" type="checkbox">
<i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="good" value="3" type="checkbox">
<i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="good" value="4" type="checkbox" disabled>
<i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
</div>
<label class="ax-radio"><input type="radio" name="listradio" value=1><u></u><i>全选</i></label>
<label class="ax-radio"><input type="radio" name="listradio" value=0><u></u><i>全不选</i></label>
<div class="ax-break"></div>
<div axCheckAll="checkDom:'#boxCheck'">
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="bad" value="1" type="checkbox">
<i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="bad" value="2" type="checkbox">
<i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="bad" value="3" type="checkbox">
<i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="bad" value="4" type="checkbox" disabled>
<i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
</div>
<label class="ax-checkbox"><input type="checkbox" id="boxCheck"><u></u><i>全选</i></label>
<div class="ax-break"></div>
<div axCheckAll="checkDom:'#checkBtn',clearDom:'#clearBtn'">
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="apple" value="1" type="checkbox">
<i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="apple" value="2" type="checkbox">
<i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="apple" value="3" type="checkbox">
<i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
<u></u>
</label>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<label class="ax-checkbox ax-xs ax-row">
<input name="apple" value="4" type="checkbox" disabled>
<i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
<u></u>
</label>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<a href="###" class="ax-btn" id="checkBtn">全选</a>
<a href="###" class="ax-btn" id="clearBtn">取消全选</a>
样式
使用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(图片),var(--load-gif);"></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/v2.0/examples/images/image-8.jpg),var(--load-gif);"></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-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></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/v2.0/examples/images/image-7.jpg),var(--load-gif);"></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-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
<a href="###" class="ax-img" style="background-image:url(),var(--load-gif);"></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/v2.0/examples/images/image-9.jpg),var(--load-gif);"></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-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></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/v2.0/examples/images/image-10.jpg),var(--load-gif);"></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-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></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(图片),var(--load-gif);"><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/v2.0/examples/images/image-8.jpg),var(--load-gif);"><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-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></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/v2.0/examples/images/image-9.jpg),var(--load-gif);"><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/v2.0/examples/images/image-8.jpg),var(--load-gif);"></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/v2.0/examples/images/image-8.jpg),var(--load-gif);"></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/v2.0/examples/images/image-8.jpg),var(--load-gif);"></a>
</div>
</div>
</div>
多图新闻列表
通过使用ax-gallery包裹图集，已经适配手机，在PC最多显示5个，在手机中最多只显示3个。基本格式如下：
<div class="ax-gallery"><a href="###" style="background-image: url(图片),var(--load-gif)"></a><a href="###" style="background-image: url(图片),var(--load-gif)"></a><a href="###" style="background-image: url(图片),var(--load-gif)"></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/v2.0/examples/images/image-8.jpg),var(--load-gif);"></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/v2.0/examples/images/image-1.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-2.jpg),var(--load-gif)"></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/v2.0/examples/images/image-1.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-2.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-3.jpg),var(--load-gif)"></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/v2.0/examples/images/image-1.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-2.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-3.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-4.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-5.jpg),var(--load-gif)"></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-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></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/v2.0/examples/images/image-1.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-2.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-3.jpg),var(--load-gif)"></a><a href="###" style="background-image: url(https://src.axui.cn/v2.0/examples/images/image-4.jpg),var(--load-gif)"></a><a href="###" class="ax-more" style="background-image: url(https://src.axui.cn/v2.0/public/images/image-5.jpg),var(--load-gif)"><i>+12</i></a></div>
<div class="ax-from">
<span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-f"></i> 362</span>
<span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-f"></i> 张春阳</span>
<span class="ax-color-des">2019年1月2日</span></div>
</div>
</div>
</div>