List 列表
单行信息
单行信息我们将之定义为“简讯”即bulletin，简讯只有一行文本，在一行中尽可能的展示多的信息。单行信息的基本结构是ax-bulletin -> ax-bulletin-body [ -> caption]，其中更多的信息以属性标注，可用属性如下：
- caption：表示标题，文字超出行会被省略
- count：表示计数
- arrow：表示指示箭头
- avatar：表示圆形头像
- image：表示方形图片
- rank：表示排名
- check：表示勾选
- tip：表示提示
如果需要让整行作为链接点击，可对ax-bulletin使用a标签，如果只是需要标题可点击可对capiton使用a标签。
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body">标题</span>
</a>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>标题</a></div>
</div>
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body">南航与英航签署联营合作协议代码共享</span>
</a>
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>12月，到英国大城小镇看“亮灯”</i></span>
</a>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>英国人喝茶不再流行贵族范</a></div>
<i count>234次</i>
</div>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>西班牙斗牛与逗牛，精彩各不同</a></div>
<i count>98次</i>
</div>
分割线
使用hr标签或带ax-break-line类的标签制作列表分割线。
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>南航与英航签署联营合作协议代码共享</i></span>
</a>
<hr/>
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>12月，到英国大城小镇看“亮灯”</i></span>
<i count>45次</i>
</a>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>英国人喝茶不再流行贵族范</a></div>
<i count>234次</i>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>西班牙斗牛与逗牛，精彩各不同</a></div>
<i count>98次</i>
</div>
分割线边距
使用<hr class="ax-margin-lr"/>或<div class="ax-break-line ax-margin-lr">的标签制作带左右边距的列表分割线。ax-margin-lr顾名思义是留出左右两边距，ax-margin-left是留出左边距，ax-margin-right是留出右边距。
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>南航与英航签署联营合作协议代码共享</i></span>
</a>
<div class="ax-break-line ax-margin-lr"></div>
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>12月，到英国大城小镇看“亮灯”</i></span>
<i count>45次</i>
</a>
<hr class="ax-margin-lr"/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>英国人喝茶不再流行贵族范</a></div>
<i count>234次</i>
</div>
<hr class="ax-margin-lr"/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><a href="###" caption>西班牙斗牛与逗牛，精彩各不同</a></div>
<i count>98次</i>
</div>
排行榜
使用rank属性标签制作带排行的列表。针对rank='1'，rank='2'和rank='3'做了增强处理。
1
海外华侨华人积极参与，中国春节越来越有世界范儿
85次
2
以色列主要旅游景点营造春节气氛
12次
3
首条浙江杭州直飞东非大陆航线开通
23次
4
尼泊尔旅游年启动仪式在拉萨举行
32次
5
欧洲最长屋桥盛不下千年传奇
326次
6
吉祥航空宣布明年夏秋航季新增爱尔兰及冰岛航线
165次
7
中国旅游推介会在津巴布韦举行
264次
8
在墨尔本监狱当一回“囚徒”
187次
9
“超乎想象的中国” 亮相伦敦世界旅游交易会
68次
10
萨迪亚特：中东文化灯塔熠熠生辉
94次
<a href="###" class="ax-bulletin">
<i rank="1">1</i>
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
<i count>85次</i>
</a>
<a href="###" class="ax-bulletin">
<i rank="2">2</i>
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
<i count>12次</i>
</a>
<div class="ax-bulletin">
<i rank="3">3</i>
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
<i count>23次</i>
</div>
<div class="ax-bulletin">
<i rank>4</i>
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
<i count>32次</i>
</div>
<div class="ax-bulletin">
<i rank>5</i>
<div class="ax-bulletin-body"><i caption>欧洲最长屋桥盛不下千年传奇</i></div>
<i count>326次</i>
</div>
<div class="ax-bulletin">
<i rank>6</i>
<div class="ax-bulletin-body"><i caption>吉祥航空宣布明年夏秋航季新增爱尔兰及冰岛航线</i></div>
<i count>165次</i>
</div>
<div class="ax-bulletin">
<i rank>7</i>
<div class="ax-bulletin-body"><i caption>中国旅游推介会在津巴布韦举行</i></div>
<i count>264次</i>
</div>
<div class="ax-bulletin">
<i rank>8</i>
<div class="ax-bulletin-body"><i caption>在墨尔本监狱当一回“囚徒”</i></div>
<i count>187次</i>
</div>
<div class="ax-bulletin">
<i rank>9</i>
<div class="ax-bulletin-body"><i caption>“超乎想象的中国” 亮相伦敦世界旅游交易会</i></div>
<i count>68次</i>
</div>
<div class="ax-bulletin">
<i rank>10</i>
<div class="ax-bulletin-body"><i caption>萨迪亚特：中东文化灯塔熠熠生辉</i></div>
<i count>94次</i>
</div>
自定义图标前缀
使用legend属性标签制作带图标的列表。
<a href="###" class="ax-bulletin">
<i class="ax-iconfont ax-icon-heart" legend></i>
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
<i count>85次</i>
</a>
<a href="###" class="ax-bulletin">
<i class="ax-iconfont ax-icon-trash" legend></i>
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
<i count>26次</i>
</a>
<div class="ax-bulletin">
<i class="ax-iconfont ax-icon-earth" legend></i>
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
<i count>94次</i>
</div>
<div class="ax-bulletin">
<i class="ax-iconfont ax-icon-lock" legend></i>
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
<i count>94次</i>
</div>
圆形头像前缀
使用avatar属性标签制作带圆形头像的列表。
<a href="###" class="ax-bulletin">
<span avatar><img src="<?=$dist?>images/avatar.svg" /></span>
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
<i count>85次</i>
</a>
<a href="###" class="ax-bulletin">
<span avatar><img src="" /></span>
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
<i count>26次</i>
</a>
<div class="ax-bulletin">
<span avatar><img src="<?=$public?>images/head01.jpg" /></span>
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
<i count>94次</i>
</div>
<div class="ax-bulletin">
<span avatar><img src="<?=$public?>images/head02.jpg" /></span>
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
<i count>94次</i>
</div>
方形图片前缀
使用image属性标签制作带方形图片的列表。
<a href="###" class="ax-bulletin">
<span image><img src="<?=$public?>images/china01.jpg" /></span>
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
<i count>85次</i>
</a>
<a href="###" class="ax-bulletin">
<span image><img src="" /></span>
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
<i count>26次</i>
</a>
<div class="ax-bulletin">
<span image><img src="<?=$public?>images/china02.jpg" /></span>
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
<i count>94次</i>
</div>
<div class="ax-bulletin">
<span image><img src="<?=$public?>images/china03.jpg" /></span>
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
<i count>94次</i>
</div>
指示箭头
使用arrow属性标签制作带指示箭头的列表。
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
<i class="ax-iconfont ax-icon-right" arrow></i>
</a>
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
<i class="ax-iconfont ax-icon-right" arrow></i>
</a>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
<i class="ax-iconfont ax-icon-right" arrow></i>
</div>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
<i class="ax-iconfont ax-icon-right" arrow></i>
</div>
经过变色
鼠标经过列表默认不会有变色效果，可追加ax-hover，使鼠标经过有背景色变化。
海外华侨华人积极参与，中国春节越来越有世界范儿
以色列主要旅游景点营造春节气氛
首条浙江杭州直飞东非大陆航线开通
尼泊尔旅游年启动仪式在拉萨举行
<div class="ax-bulletin ax-hover">
<div class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></div>
</div>
<div class="ax-bulletin ax-hover">
<div class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></div>
</div>
<div class="ax-bulletin ax-hover">
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
</div>
<div class="ax-bulletin ax-hover">
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
</div>
状态
列表有五种状态，包含一种常规状态以及selected、active、checked、disabled四种特别状态。
- selected：文字将变成primary色
- active：文字将变成primary色而且背景将变成primary浅色
- checked：文字将变成primary色而且尾部出现check图标
- disabled：文字将变成浅灰色，而且不可点击
[selected]海外华侨华人积极参与，中国春节越来越有世界范儿
[active]以色列主要旅游景点营造春节气氛
[checked]首条浙江杭州直飞东非大陆航线开通
[disabled]尼泊尔旅游年启动仪式在拉萨举行
<div class="ax-bulletin" selected>
<div class="ax-bulletin-body"><i caption>[selected]海外华侨华人积极参与，中国春节越来越有世界范儿</i></div>
</div>
<div class="ax-bulletin" active>
<div class="ax-bulletin-body"><i caption>[active]以色列主要旅游景点营造春节气氛</i></div>
</div>
<div class="ax-bulletin" checked>
<div class="ax-bulletin-body"><i caption>[checked]首条浙江杭州直飞东非大陆航线开通</i></div>
</div>
<div class="ax-bulletin" disabled>
<div class="ax-bulletin-body"><i caption>[disabled]尼泊尔旅游年启动仪式在拉萨举行</i></div>
</div>
静态勾选
使用check制作静态勾选列表，仅仅是显示效果，无点击功能。
<a href="###" class="ax-bulletin">
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
<i class="ax-iconfont ax-icon-check" check></i>
</a>
<a href="###" class="ax-bulletin" selected>
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
<i class="ax-iconfont ax-icon-check" check></i>
</a>
<div class="ax-bulletin" active>
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
<i class="ax-iconfont ax-icon-check" check></i>
</div>
<div class="ax-bulletin" disabled>
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
<i class="ax-iconfont ax-icon-check" check></i>
</div>
确认勾选
对ax-bulletin节点追加checked属性也可表示勾选，在某些不能改变列表HTML结构情况下使用。
<a href="###" class="ax-bulletin" checked>
<span class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></span>
</a>
<a href="###" class="ax-bulletin" selected checked>
<span class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></span>
</a>
<div class="ax-bulletin" active checked>
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
</div>
<div class="ax-bulletin" disabled checked>
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
</div>
复选和单选
使用ax-checkbox ax-xs复选或者ax-switch ax-xs开关制作多选列表；使用ax-radio ax-xs单选制作单选列表
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
欧盟六国一日游
无聊待在家
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></div>
<label class="ax-checkbox ax-xs"><input name="apple" value="1" type="checkbox"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></div>
<label class="ax-checkbox ax-xs"><input name="apple" value="2" checked type="checkbox"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></div>
<label class="ax-checkbox ax-xs"><input name="apple" value="3" type="checkbox"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>自驾丽江三两天</i></div>
<label class="ax-checkbox ax-xs"><input name="apple" value="4" type="checkbox"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<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>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>无聊待在家</i></div>
<label class="ax-switch ax-xs"><input name="english" value="1" type="checkbox"><u></u></label>
</div>
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></div>
<label class="ax-radio ax-xs"><input name="bike" value="1" type="radio"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></div>
<label class="ax-radio ax-xs"><input name="bike" value="2" checked type="radio"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></div>
<label class="ax-radio ax-xs"><input name="bike" value="3" type="radio"><u></u></label>
</div>
<hr/>
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>自驾丽江三两天</i></div>
<label class="ax-radio ax-xs"><input name="bike" value="4" type="radio"><u></u></label>
</div>
选择列表
如果将checkbox和radio也做成全宽可点击的列表，需要改造checkbox/radio节点。
- 第一步：label标签的子节点按input > i > u的顺序放置
- 第二步：label标签追加ax-bulletin类
- 第三步：在u标签前追加ax-bulletin-body类标签和caption属性标签
<label class="ax-checkbox ax-bulletin">
<input name="house" value="1" type="checkbox">
<span class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="house" value="2" type="checkbox">
<span class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="house" value="3" type="checkbox">
<span class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="house" value="4" type="checkbox">
<span class="ax-bulletin-body"><i caption>自驾丽江三两天</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="house" value="5" type="checkbox" checked disabled>
<span class="ax-bulletin-body"><i caption>桂林漓江漂流</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="house" value="6" type="checkbox" disabled>
<span class="ax-bulletin-body"><i caption>井冈山瞻仰历史</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="home" value="1" type="checkbox" checked>
<span class="ax-bulletin-body"><i caption>欧盟六国一日游</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="home" value="2" type="checkbox">
<span class="ax-bulletin-body"><i caption>无聊待在家</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="home" value="3" type="checkbox" checked disabled>
<span class="ax-bulletin-body"><i caption>日本东京三日游</i></span>
<u></u>
</label>
<hr/>
<label class="ax-checkbox ax-bulletin">
<input name="home" value="4" type="checkbox" disabled>
<span class="ax-bulletin-body"><i caption>美国纽约大学七日游学</i></span>
<u></u>
</label>
<label class="ax-radio ax-bulletin">
<input name="computer" value="1" type="radio">
<span class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></span>
<u></u>
</label>
<hr/>
<label class="ax-radio ax-bulletin">
<input name="computer" value="2" type="radio">
<span class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></span>
<u></u>
</label>
<hr/>
<label class="ax-radio ax-bulletin">
<input name="computer" value="3" type="radio">
<span class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></span>
<u></u>
</label>
<hr/>
<label class="ax-radio ax-bulletin">
<input name="computer" value="4" type="radio">
<span class="ax-bulletin-body"><i caption>自驾丽江三两天</i></span>
<u></u>
</label>
<hr/>
<label class="ax-radio ax-bulletin">
<input name="computer" value="5" type="radio" checked disabled>
<span class="ax-bulletin-body"><i caption>桂林漓江漂流</i></span>
<u></u>
</label>
<hr/>
<label class="ax-radio ax-bulletin">
<input name="computer" value="6" type="radio" disabled>
<span class="ax-bulletin-body"><i caption>井冈山瞻仰历史</i></span>
<u></u>
</label>
全选列表
可配合grid栅格，循环显示选择列表，可常见于用户选择列表。
创建checkbox列表之后，如果需要使用全选功能，可使用axCheckAll插件，插件使用详细请点击这里。
<div axCheckAll="checkDom:'[listradio]'">
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="good" value="1" type="checkbox">
<span class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="good" value="2" type="checkbox">
<span class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="good" value="3" type="checkbox">
<span class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="good" value="4" type="checkbox" disabled>
<span class="ax-bulletin-body"><i caption>自驾丽江三两天</i></span>
<u></u>
</label>
<hr />
</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'">
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="bad" value="1" type="checkbox">
<span class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="bad" value="2" type="checkbox">
<span class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="bad" value="3" type="checkbox">
<span class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="bad" value="4" type="checkbox" disabled>
<span class="ax-bulletin-body"><i caption>自驾丽江三两天</i></span>
<u></u>
</label>
<hr />
</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'">
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="apple" value="1" type="checkbox">
<span class="ax-bulletin-body"><i caption>去成都逛宽窄巷子</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="apple" value="2" type="checkbox">
<span class="ax-bulletin-body"><i caption>到北京游八达岭长城</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="apple" value="3" type="checkbox">
<span class="ax-bulletin-body"><i caption>下榻乌镇经典民宿</i></span>
<u></u>
</label>
<hr />
<label class="ax-checkbox ax-bulletin">
<input name="apple" value="4" type="checkbox" disabled>
<span class="ax-bulletin-body"><i caption>自驾丽江三两天</i></span>
<u></u>
</label>
<hr />
</div>
<div class="ax-break"></div>
<a href="###" class="ax-btn" id="checkBtn">全选</a>
<a href="###" class="ax-btn" id="clearBtn">取消全选</a>
边框
给列表添加外边框。ax-border表示带边框；ax-margin表示保留周围边距；ax-radius表示外边框是圆角。
海外华侨华人积极参与，中国春节越来越有世界范儿
以色列主要旅游景点营造春节气氛
首条浙江杭州直飞东非大陆航线开通
尼泊尔旅游年启动仪式在拉萨举行
<div class="ax-border ax-margin ax-radius-md">
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>海外华侨华人积极参与，中国春节越来越有世界范儿</i></div>
</div>
<hr class="ax-margin-lr" />
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>以色列主要旅游景点营造春节气氛</i></div>
</div>
<hr class="ax-margin-lr" />
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>首条浙江杭州直飞东非大陆航线开通</i></div>
</div>
<hr class="ax-margin-lr" />
<div class="ax-bulletin">
<div class="ax-bulletin-body"><i caption>尼泊尔旅游年启动仪式在拉萨举行</i></div>
</div>
</div>
复杂单行
结合以上要点，可以做出来比较复杂单行列表。举例如下
1
[中国]，海外华侨华人积极参与，中国春节越来越有世界范儿25
263次
2
[以色列]，以色列主要旅游景点营造春节气氛
95次
3
[中国]，首条浙江杭州直飞东非大陆航线开通
28次
4
[尼泊尔]，尼泊尔旅游年启动仪式在拉萨举行
53次
<div class="ax-border ax-margin">
<div class="ax-bulletin ax-hover">
<i rank="3">1</i>
<span avatar><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
<div class="ax-bulletin-body"><cite>[中国]</cite>，<a href="###" caption>海外华侨华人积极参与，中国春节越来越有世界范儿</a><i class="ax-badge">25</i></div>
<i count>263次</i>
<i class="ax-iconfont ax-icon-right" arrow></i>
</div>
<hr class="ax-margin-lr" />
<div class="ax-bulletin ax-hover" selected>
<i rank="3">2</i>
<span avatar><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
<div class="ax-bulletin-body"><cite>[以色列]</cite>，<a href="###" caption>以色列主要旅游景点营造春节气氛</a></div>
<i count>95次</i>
<i class="ax-dot"></i>
<i class="ax-iconfont ax-icon-right" arrow></i>
</div>
<hr class="ax-margin-lr" />
<div class="ax-bulletin ax-hover">
<i rank="3">3</i>
<span avatar><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
<div class="ax-bulletin-body"><cite>[中国]</cite>，<a href="###" caption>首条浙江杭州直飞东非大陆航线开通</a></div>
<i count>28次</i>
<i class="ax-iconfont ax-icon-right" arrow></i>
</div>
<hr class="ax-margin-lr" />
<div class="ax-bulletin ax-hover" disabled>
<i rank>4</i>
<span avatar><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
<div class="ax-bulletin-body"><cite>[尼泊尔]</cite>，<a href="###" caption>尼泊尔旅游年启动仪式在拉萨举行</a></div>
<i count>53次</i>
<i class="ax-iconfont ax-icon-right" arrow></i>
</div>
</div>
图文列表
使用ax-graphic构建图文列表，配合poster、ax-graphic-body、caption等属性或className组成图文列表内容；配合使用ax-break类标签和hr标签进行列表分割。
对于caption和brief属性节点可使用单行和多行
- caption="1"：表示标题只有一行，超过宽度会省略。默认
- caption="2"：表示标题最多可有两行，超过两行会省略
- caption="3"：表示标题最多可有三行，超过三行会省略
- brief="1"：表示摘要只有一行，超过宽度会省略
- brief="2"：表示摘要最多可有两行，超过两行会省略
- brief="3"：表示摘要最多可有三行，超过三行会省略。默认
基本HTML结构如下：
<div class="ax-graphic">
<a href="###" poster><img src="封面图片地址" /></a>
<div class="ax-graphic-body">
<div caption><a href="###">标题</a></div>
<div brief>摘要</div>
<div keywords>关键字</div>
<div byline>编辑信息</div>
</div>
</div>
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
尼日尔是一个位于西非中部的内陆国，根据联合国数据，它是人类发展指数排名最低的国家。不久前，《环球时报》记者去那里出差，意外发现这里的一种特产果实，名叫可乐果，没错，它和美国饮料可口可乐有着渊源。
362
张春阳
2019年1月2日
俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。“长得越来越不像猫咪，而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知，它们不是普通的猫咪，而是珍惜的野生保护动物兔狲。
362
张春阳
2019年1月2日
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
关键字：威尼斯暴雨最高纪录
<div class="ax-margin">
<div class="ax-graphic">
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /></a>
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">可乐果，尼日尔的快乐果</a></div>
<div brief>尼日尔是一个位于西非中部的内陆国，根据联合国数据，它是人类发展指数排名最低的国家。不久前，《环球时报》记者去那里出差，意外发现这里的一种特产果实，名叫可乐果，没错，它和美国饮料可口可乐有着渊源。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="" /></a>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-9.jpg" /></a>
<div class="ax-graphic-body">
<div caption><a href="###">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a></div>
<div brief="3">俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。“长得越来越不像猫咪，而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知，它们不是普通的猫咪，而是珍惜的野生保护动物兔狲。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<a href="###" poster><img src="<?=$public?>images/image-10.jpg" /></a>
<div class="ax-graphic-body">
<div caption="3"><a href="###">每年秋季（3月到5月）、春季（9月到11月），悉尼上空时常烟雾弥漫，悉尼海港大桥时隐时现。原来这是烧荒导致的烟雾。澳大利亚是最大的岛国，大洋洲是全球最干旱的大陆之一，山火发生率非常高，为减少森林大火，防御性烧荒成了澳大利亚控制火灾的良方之一。但烧荒导致的烟霾又引发一系列问题，比如对当地居民及动物的健康带来危害，对生活造成很多不便等等。</a></div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
</div>
添加角标
通过使用ax-flag样式给新闻图片添加角标，关于角标使用方法见：角标。基本格式如下：
<a href="###" class="ax-img" style="background-image:url(图片);"><span class="ax-flag ax-left"><i class="ax-bg-primary">最新</i></span></a>
最新
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
Hot
<div class="ax-margin">
<div class="ax-graphic">
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /><span class="ax-flag ax-left"><i>最新</i></span></a>
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /><span class="ax-flag ax-right ax-error"><i>Hot</i></span></a>
</div>
</div>
添加栏目
在poster属性标签内，通过使用category属性标签给图片添加栏目分类。
国际
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
旅行
<div class="ax-margin">
<div class="ax-graphic">
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /><i category>国际</i></a>
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /><i category>旅行</i></a>
</div>
</div>
手机端通栏
通多对ax-graphic追加ax-split使左图右文或者右图左文格式在手机端实现通栏图片显示。ax-split这是弹性布局的一个自适应常规用法，详见layout布局。
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
<div class="ax-margin">
<div class="ax-graphic ax-split">
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /></a>
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic ax-split">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
</div>
</div>
广告
通过对ax-graphic追加type="ad"属性使之成为广告类型，将在底部显示“广告”字样。
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
<div class="ax-margin">
<div class="ax-graphic" type="ad">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
</div>
</div>
多图新闻列表
如果需要显示图集请使用posters属性标签，标签内置入照片墙组件ax-wall，关于照片墙组件详细用法请点击这里。
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
<div class="ax-margin">
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div posters>
<div class="ax-wall-7 ax-gap-xs" ratio="4:3">
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
</div>
</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div posters>
<div class="ax-wall-7 ax-gap-xs" ratio="4:3">
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-4.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-5.jpg" /></a>
</div>
</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div posters>
<div class="ax-wall-7 ax-gap-xs" ratio="4:3">
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-4.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-5.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-6.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
</div>
</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
</div>
一行多图
如果确认图集在手机端只显示一行，那么可给照片墙容器追加split属性，使用该属性后将只截取前三项，并将第三中的more属性标签显示出来。
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption="2"><a href="###">俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。“长得越来越不像猫咪，而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知，它们不是普通的猫咪，而是珍惜的野生保护动物兔狲。</a></div>
<div posters>
<div class="ax-wall-7 ax-gap-xs" ratio="4:3" split>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /><i more>+6</i></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-4.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-5.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-6.jpg" /></a>
<a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
</div>
</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
lazyload
可配合axLazyload插件使用，其原理是先使用loading图片载入，等img标签进入视窗后将data-src中的真实图片地址替换src值。关于插件详细用法请点击这里。
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。
362
张春阳
2019年1月2日
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。
关键字：威尼斯暴雨最高纪录
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河，连接贝内迪克特广场和维尼格市场，是旅游者必看的景点之一。埃尔福特最大的城市节日，也依此桥命名为克雷默桥节，每年6月在此桥附近的老城区举行。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span><i class="ax-iconfont ax-icon-edit"></i> 张春阳</span>
<span>2019年1月2日</span>
</div>
</div>
<a href="###" poster><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-7.jpg" axLazyload/></a>
</div>
<div class="ax-break ax-hide-tel"></div>
<hr class="ax-margin-lr" />
<div class="ax-break ax-hide-tel"></div>
<div class="ax-graphic">
<div class="ax-graphic-body">
<div caption><a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。路透社报道，受暴雨和潮汐影响，威尼斯遭洪水侵袭，不少古老的广场和街道遭水淹没。当地官员说，12日22时50分，潮水最高水位达到187厘米，仅次于1966年创下的194厘米最高纪录。</div>
<div posters>
<div class="ax-wall-7 ax-gap-xs" ratio="4:3">
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-1.jpg" axLazyload/></a>
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-2.jpg" axLazyload/></a>
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-3.jpg" axLazyload/></a>
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-4.jpg" axLazyload/></a>
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-5.jpg" axLazyload/></a>
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-6.jpg" axLazyload/></a>
<a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-7.jpg" axLazyload/></a>
</div>
</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>