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属性标签制作带图标的列表。

海外华侨华人积极参与,中国春节越来越有世界范儿 85次 以色列主要旅游景点营造春节气氛 26次
首条浙江杭州直飞东非大陆航线开通
94次
尼泊尔旅游年启动仪式在拉萨举行
94次
                                    <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属性标签制作带圆形头像的列表。

海外华侨华人积极参与,中国春节越来越有世界范儿 85次 以色列主要旅游景点营造春节气氛 26次
首条浙江杭州直飞东非大陆航线开通
94次
尼泊尔旅游年启动仪式在拉萨举行
94次
                                    <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属性标签制作带方形图片的列表。

海外华侨华人积极参与,中国春节越来越有世界范儿 85次 以色列主要旅游景点营造春节气氛 26次
首条浙江杭州直飞东非大陆航线开通
94次
尼泊尔旅游年启动仪式在拉萨举行
94次
                                    <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>
                        

复杂单行

结合以上要点,可以做出来比较复杂单行列表。举例如下

                        <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构建图文列表,配合posterax-graphic-bodycaption等属性或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>