List 列表

使用说明

本框架列表结构是为了满足多元化需要而制作的,可以是a标签,也可以是其他标签。基本格式如下:

                            <a href="###" class="ax-info-block">
                               <div class="ax-row">
                                  <div class="ax-col"><span class="ax-ell">文字</span></div>
                                  <span class="ax-arrow">文字</span>
                               </div>
                            </a>
                            <div class="ax-info-block">
                               <div class="ax-row">
                                  <div class="ax-col"><a href="###" class="ax-ell">文字</span></div>
                                  <span class="ax-arrow">文字</span>
                               </div>
                            </div>
                        
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
                                        <span class="ax-arrow">26次</span>
                                    </div>
                                </a>
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">12月,到英国大城小镇看“亮灯”</span></div>
                                        <span class="ax-arrow">45次</span>
                                    </div>
                                </a>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
                                        <span class="ax-arrow">234次</span>
                                    </div>
                                </div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛,精彩各不同</a></div>
                                        <span class="ax-arrow">98次</span>
                                    </div>
                                </div>
                        

分割线

使用ax-break-line制作列表分割线。

                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
                                        <span class="ax-arrow">26次</span>
                                    </div>
                                </a>
                                <div class="ax-break-line"></div>
                                <a href="###"  class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">12月,到英国大城小镇看“亮灯”</span></div>
                                        <span class="ax-arrow">45次</span>
                                    </div>
                                </a>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
                                        <span class="ax-arrow">234次</span>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛,精彩各不同</a></div>
                                        <span class="ax-arrow">98次</span>
                                    </div>
                                </div>
                        

边距

使用ax-break-line ax-margin-lr制作带左右边距的列表分割线。ax-margin-lr顾名思义是留出左右两边距,ax-margin-left是留出左边距,ax-margin-right是留出右边距。

                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
                                        <span class="ax-arrow">26次</span>
                                    </div>
                                </a>
                                <div class="ax-break-line ax-margin-lr"></div>
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">12月,到英国大城小镇看“亮灯”</span></div>
                                        <span class="ax-arrow">45次</span>
                                    </div>
                                </a>
                                <div class="ax-break-line ax-margin-lr"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
                                        <span class="ax-arrow">234次</span>
                                    </div>
                                </div>
                                <div class="ax-break-line ax-margin-lr"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛,精彩各不同</a></div>
                                        <span class="ax-arrow">98次</span>
                                    </div>
                                </div>
                        

排行榜

使用ax-num制作带排行的列表。

                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-num ax-num-1">1</span>
                                        <div class="ax-col"><span class="ax-ell">海外华侨华人积极参与,中国春节越来越有世界范儿</span></div>
                                        <span class="ax-arrow">85次</span>
                                    </div>
                                </a>
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-num ax-num-2">2</span>
                                        <div class="ax-col"><span class="ax-ell">以色列主要旅游景点营造春节气氛</span></div>
                                        <span class="ax-arrow">12次</span>
                                    </div>
                                </a>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-num ax-num-3">3</span>
                                        <div class="ax-col"><a href="###" class="ax-ell">首条浙江杭州直飞东非大陆航线开通</a></div>
                                        <span class="ax-arrow">23次</span>
                                    </div>
                                </div>
                        

图标

使用ax-icon制作带图标的列表。

                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-icon ax-iconfont ax-icon-volume-up-fill"></span>
                                        <div class="ax-col"><span class="ax-ell">海外华侨华人积极参与,中国春节越来越有世界范儿</span></div>
                                        <span class="ax-arrow">85次</span>
                                    </div>
                                </a>
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-icon ax-iconfont ax-icon-pie-fill"></span>
                                        <div class="ax-col"><span class="ax-ell">以色列主要旅游景点营造春节气氛</span></div>
                                        <span class="ax-arrow">12次</span>
                                    </div>
                                </a>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-icon ax-iconfont ax-icon-earth-fill"></span>
                                        <div class="ax-col"><a href="###" class="ax-ell">首条浙江杭州直飞东非大陆航线开通</a></div>
                                        <span class="ax-arrow">23次</span>
                                    </div>
                                </div>

                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-icon ax-iconfont ax-icon-video-fill"></span>
                                        <div class="ax-col"><a href="###" class="ax-ell">尼泊尔旅游年启动仪式在拉萨举行</a></div>
                                        <span class="ax-arrow">32次</span>
                                    </div>
                                </div>
                        

头像

使用ax-head制作带头像的列表。

                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-head" style="background-image:url(https://src.axui.cn/src/images/default-head.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                        <div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
                                        <span class="ax-arrow ax-iconfont ax-icon-right"></span>
                                    </div>
                                </a>
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-head" style="background-image:url(),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                        <div class="ax-col"><span class="ax-ell">12月,到英国大城小镇看“亮灯”</span></div>
                                        <span class="ax-arrow ax-iconfont ax-icon-right"></span>
                                    </div>
                                </a>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                        <div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
                                        <span class="ax-arrow">234次</span>
                                        <a href="###" class="ax-arrow ax-iconfont ax-icon-right"></a>
                                    </div>
                                </div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <span class="ax-head" style="background-image:url(https://src.axui.cn/examples/images/head02.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                        <div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛,精彩各不同</a></div>
                                        <span class="ax-arrow">98次</span>
                                        <a href="###" class="ax-arrow ax-iconfont ax-icon-right"></a>
                                    </div>
                                </div>
                        

复选和单选

使用ax-checkbox ax-bone复选或者ax-switch ax-bone开关制作多选列表;使用ax-radio ax-bone单选制作单选列表

去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
欧盟六国一日游
无聊待在家
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                        <label class="ax-checkbox ax-bone"><input name="apple" value="2" checked="" type="checkbox"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div  class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                        <label class="ax-checkbox ax-bone"><input name="apple" value="2" type="checkbox"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                        <label class="ax-checkbox ax-bone"><input name="apple" value="2" type="checkbox"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                        <label class="ax-checkbox ax-bone"><input name="apple" value="2" type="checkbox"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">欧盟六国一日游</span></div>
                                        <label class="ax-switch ax-bone"><input name="english" value="0" checked="" type="checkbox"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">无聊待在家</span></div>
                                        <label class="ax-switch ax-bone"><input name="english" value="1" type="checkbox"><span></span></label>
                                    </div>
                                </div>
                        
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                        <label class="ax-radio ax-bone"><input name="bike" value="2" checked="" type="radio"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div  class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                        <label class="ax-radio ax-bone"><input name="bike" value="2" type="radio"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                        <label class="ax-radio ax-bone"><input name="bike" value="2" type="radio"><span></span></label>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                        <label class="ax-radio ax-bone"><input name="bike" value="2" type="radio"><span></span></label>
                                    </div>
                                </div>
                        

选择列表

对list列表用ax-list-select包裹住表示可点击选择的列表。在复选和单选列表中适当的添加js,可实现更丰富的效果。本框架已经集成js代码,复制可用。

去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
桂林漓江漂流
井冈山瞻仰历史
欧盟六国一日游
无聊待在家
日本东京三日游
美国纽约大学七日游学
                                <div class="ax-list-select">
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                            <label class="ax-checkbox ax-bone"><input name="house" value="2" checked="" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div  class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                            <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                            <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                            <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">桂林漓江漂流</span></div>
                                            <label class="ax-checkbox ax-bone"><input name="house" value="2" checked="" disabled type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></div>
                                            <label class="ax-checkbox ax-bone"><input name="house" value="2"  disabled  type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">欧盟六国一日游</span></div>
                                            <label class="ax-switch ax-bone"><input name="home" value="0" checked="" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">无聊待在家</span></div>
                                            <label class="ax-switch ax-bone"><input name="home" value="1" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">日本东京三日游</span></div>
                                            <label class="ax-switch ax-bone"><input name="home" value="0" checked="" disabled type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">美国纽约大学七日游学</span></div>
                                            <label class="ax-switch ax-bone"><input name="home" value="1" disabled  type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                </div>
                        
去成都逛宽窄巷子
到北京游八达岭长城
下榻乌镇经典民宿
自驾丽江三两天
桂林漓江漂流
井冈山瞻仰历史
                                 <div class="ax-list-select">
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                            <label class="ax-radio ax-bone"><input name="computer" value="2" checked="" type="radio"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div  class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                            <label class="ax-radio ax-bone"><input name="computer" value="2" type="radio"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                            <label class="ax-radio ax-bone"><input name="computer" value="2" type="radio"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                            <label class="ax-radio ax-bone"><input name="computer" value="2" type="radio"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">桂林漓江漂流</span></div>
                                            <label class="ax-radio ax-bone"><input name="computer" value="2" checked="" disabled type="radio"><span></span></label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div  class="ax-info-block">
                                        <div class="ax-row">
                                            <div class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></div>
                                            <label class="ax-radio ax-bone"><input name="computer" value="2"  disabled type="radio"><span></span></label>
                                        </div>
                                    </div>

                                </div>
                        

全选列表 JS

可配合grid栅格,循环显示选择列表,可常见于用户选择列表。

如果需要使用全选功能,需要配合radiocheckbox一起使用,必填的属性是namevalue。value="0"表示全不选,value="1"表示全选,格式固定不可更改;本例中的group-select-good,group-select-*是固定字符串,good是选择列表input的name属性,是全选功能唯一可修改的字符串。请详细观摩演示案例。

<label class="ax-radio"><input name="group-select-good"  type="radio" value="1"><span>全选</span></label>
<label class="ax-radio"><input name="group-select-good"  type="radio" value="0"><span>全不选</span></label>
<label class="ax-checkbox"><input name="group-select-bad"  type="checkbox" value="1"><span>全选</span></label>
                          
  • 去成都逛宽窄巷子
  • 到北京游八达岭长城
  • 下榻乌镇经典民宿
  • 自驾丽江三两天
  • 去成都逛宽窄巷子
  • 到北京游八达岭长城
  • 下榻乌镇经典民宿
  • 自驾丽江三两天
  • 庄自强
  • 李显扬
  • 邬栋
  • 郝仁
                                <ul class="ax-grid-table ax-list-select">
                                    <li class="ax-grid-block ax-col-12">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="good" value="2"  type="checkbox"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <div  class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="good" value="2" type="checkbox" disabled><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <label class="ax-radio"><input name="group-select-good"  type="radio" value="1"><span>全选</span></label>
                                <label class="ax-radio"><input name="group-select-good"  type="radio" value="0"><span>全不选</span></label>
                                <span class="good"></span>
                                <div class="ax-break"></div>
                                <ul class="ax-grid-table ax-list-select">
                                    <li class="ax-grid-block ax-col-24">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-24">
                                        <div  class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-24">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-24">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                                <label class="ax-checkbox ax-bone"><input name="bad" value="2" type="checkbox" disabled><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <label class="ax-checkbox"><input name="group-select-bad" type="checkbox" value="1"><span>全选</span></label>
                                <div class="ax-break"></div>
                                <ul class="ax-grid-table ax-list-select">
                                    <li class="ax-grid-block ax-col-12">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <span class="ax-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                                <div class="ax-col"><span class="ax-ell">庄自强</span></div>
                                                <label class="ax-radio ax-bone"><input name="school" value="2" type="radio" checked=""><span></span></label>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="ax-grid-block ax-col-12">
                                        <div  class="ax-info-block">
                                            <div class="ax-row">
                                                <span class="ax-head" style="background-image:url(https://src.axui.cn/examples/images/head02.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                                <div class="ax-col"><span class="ax-ell">李显扬</span></div>
                                                <label class="ax-radio ax-bone"><input name="school" value="2" type="radio"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <span class="ax-head" style="background-image:url(https://src.axui.cn/examples/images/head03.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                                <div class="ax-col"><span class="ax-ell">邬栋</span></div>
                                                <label class="ax-radio ax-bone"><input name="school" value="2" type="radio"><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <span class="ax-head" style="background-image:url(https://src.axui.cn/examples/images/head04.jpg),url(https://src.axui.cn/src/images/loading.svg);"></span>
                                                <div class="ax-col"><span class="ax-ell">郝仁</span></div>
                                                <label class="ax-radio ax-bone"><input name="school" value="2" type="radio" disabled><span></span></label>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                          

样式

使用ax-hover样式,鼠标经过背景色变色;使用ax-selected样式表示被选择;使用ax-active样式表示该行被激活;使用ax-disabled样式,表示禁止操作

去成都逛宽窄巷子
到北京游八达岭长城
斐济旅游局与微博达成战略合作,吸引中国游客赴斐济旅游
可乐果,尼日尔的快乐果
下榻乌镇经典民宿
自驾丽江三两天
烧荒季,澳大利亚人太难了
                                <div class="ax-info-block ax-hover">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div  class="ax-info-block ax-hover">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div  class="ax-info-block ax-hover ax-selected">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">斐济旅游局与微博达成战略合作,吸引中国游客赴斐济旅游</span></div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div  class="ax-info-block ax-hover">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">可乐果,尼日尔的快乐果</span></div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block ax-hover ax-active">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block ax-hover">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-info-block ax-hover ax-disabled">
                                    <div class="ax-row">
                                        <div class="ax-col"><span class="ax-ell">烧荒季,澳大利亚人太难了</span></div>
                                    </div>
                                </div>
                        

边框

给列表添加外边框。ax-border表示带边框;ax-margin表示保留周围边距;ax-radius表示外边框是圆角。

                                <div class="ax-border ax-margin ax-radius">
                                   <a href="###" class="ax-info-block">
                                       <div class="ax-row">
                                           <div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
                                           <span class="ax-arrow">26次</span>
                                       </div>
                                   </a>
                                   <div class="ax-break-line ax-margin-lr"></div>
                                   <a href="###" class="ax-info-block">
                                       <div class="ax-row">
                                           <div class="ax-col"><span class="ax-ell">12月,到英国大城小镇看“亮灯”</span></div>
                                           <span class="ax-arrow">45次</span>
                                       </div>
                                   </a>
                                   <div class="ax-break-line ax-margin-lr"></div>
                                   <div class="ax-info-block">
                                       <div class="ax-row">
                                           <div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
                                           <span class="ax-arrow">234次</span>
                                       </div>
                                   </div>
                                   <div class="ax-break-line ax-margin-lr"></div>
                                   <div class="ax-info-block">
                                       <div class="ax-row">
                                           <div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛,精彩各不同</a></div>
                                           <span class="ax-arrow">98次</span>
                                       </div>
                                   </div>
                               </div>
                        

新闻列表

使用ax-item-block样式构建文章列表,配合ax-imgax-titleax-des等样式组成图文列表内容。配合使用ax-breakax-break-line进行信息分割,基本格式如下:

                                      <div class="ax-item-block">
                                        <div class="ax-row">
                                            <a href="###" class="ax-img" style="background-image:url(图片),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                              <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">文字</a></div>
                                                <div class="ax-des ax-ell-2-des">文字</div>
                                              </div>
                                        </div>
                                      </div>
                                    
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
埃尔福特是图林根州首府,在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置,很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河,连接贝内迪克特广场和维尼格市场,是旅游者必看的景点之一。埃尔福特最大的城市节日,也依此桥命名为克雷默桥节,每年6月在此桥附近的老城区举行。
362 张春阳 2019年1月2日
尼日尔是一个位于西非中部的内陆国,根据联合国数据,它是人类发展指数排名最低的国家。不久前,《环球时报》记者去那里出差,意外发现这里的一种特产果实,名叫可乐果,没错,它和美国饮料可口可乐有着渊源。
362 张春阳 2019年1月2日
俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大,毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝,这些小家伙们长得越来越大,主人才发现了它们的与众不同。“长得越来越不像猫咪,而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知,它们不是普通的猫咪,而是珍惜的野生保护动物兔狲。
362 张春阳 2019年1月2日
埃尔福特是图林根州首府,在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置,很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河,连接贝内迪克特广场和维尼格市场,是旅游者必看的景点之一。埃尔福特最大的城市节日,也依此桥命名为克雷默桥节,每年6月在此桥附近的老城区举行。
362 张春阳 2019年1月2日
                             <div class="ax-margin">

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-8.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a></div>
                                                <div class="ax-des ax-ell-2-des">埃尔福特是图林根州首府,在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置,很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河,连接贝内迪克特广场和维尼格市场,是旅游者必看的景点之一。埃尔福特最大的城市节日,也依此桥命名为克雷默桥节,每年6月在此桥附近的老城区举行。</div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-7.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">可乐果,尼日尔的快乐果</a></div>
                                                <div class="ax-des ax-ell-2-des">尼日尔是一个位于西非中部的内陆国,根据联合国数据,它是人类发展指数排名最低的国家。不久前,《环球时报》记者去那里出差,意外发现这里的一种特产果实,名叫可乐果,没错,它和美国饮料可口可乐有着渊源。</div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                            <a href="###" class="ax-img" style="background-image:url(),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-9.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”,长大后却发现不是猫</a></div>
                                                <div class="ax-des ax-ell-2-des">俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大,毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝,这些小家伙们长得越来越大,主人才发现了它们的与众不同。“长得越来越不像猫咪,而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知,它们不是普通的猫咪,而是珍惜的野生保护动物兔狲。</div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-10.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-3-title">每年秋季(3月到5月)、春季(9月到11月),悉尼上空时常烟雾弥漫,悉尼海港大桥时隐时现。原来这是烧荒导致的烟雾。澳大利亚是最大的岛国,大洋洲是全球最干旱的大陆之一,山火发生率非常高,为减少森林大火,防御性烧荒成了澳大利亚控制火灾的良方之一。但烧荒导致的烟霾又引发一系列问题,比如对当地居民及动物的健康带来危害,对生活造成很多不便等等。</a></div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a></div>
                                                <div class="ax-des ax-ell-2-des">埃尔福特是图林根州首府,在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置,很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。克雷默桥跨越格拉河的支流布雷斯拓河,连接贝内迪克特广场和维尼格市场,是旅游者必看的景点之一。埃尔福特最大的城市节日,也依此桥命名为克雷默桥节,每年6月在此桥附近的老城区举行。</div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                        </div>
                                    </div>

                            </div>
                        

添加角标

通过使用ax-flag样式给新闻图片添加角标,关于角标使用方法见:角标。基本格式如下:

                           <a href="###" class="ax-img" style="background-image:url(图片),url(https://src.axui.cn/src/images/loading.svg);"><span class="ax-flag ax-left"><i class="ax-bg-primary">最新</i></span></a>
                                    
最新
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大,毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝,这些小家伙们长得越来越大,主人才发现了它们的与众不同。“长得越来越不像猫咪,而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知,它们不是普通的猫咪,而是珍惜的野生保护动物兔狲。
362 张春阳 2019年1月2日
Hot
                                <div class="ax-margin">

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-8.jpg),url(https://src.axui.cn/src/images/loading.svg);"><span class="ax-flag ax-left"><i class="ax-bg-primary">最新</i></span></a>
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”,长大后却发现不是猫</a></div>
                                                <div class="ax-des ax-ell-2-des">俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大,毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝,这些小家伙们长得越来越大,主人才发现了它们的与众不同。“长得越来越不像猫咪,而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知,它们不是普通的猫咪,而是珍惜的野生保护动物兔狲。</div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-9.jpg),url(https://src.axui.cn/src/images/loading.svg);"><span class="ax-flag ax-right"><i class="ax-bg-danger">Hot</i></span></a>
                                        </div>
                                    </div>

                                </div>
                        

手机端通栏

通多对ax-row追加ax-split使左图右文或者右图左文格式在手机端实现通栏图片显示。ax-split这是弹性布局的一个自适应常规用法,详见layout布局

意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
                                <div class="ax-margin">

                                    <div class="ax-item-block">
                                        <div class="ax-row ax-split">
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-8.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row ax-split">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-8.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                        </div>
                                    </div>

                                </div>
                        

广告新闻

通过对ax-item-block追加ax-ad使之成为广告,在底部显示“广告”字样。

意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
                                <div class="ax-margin">

                                    <div class="ax-item-block ax-ad">
                                        <div class="ax-row ax-split">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-8.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                        </div>
                                    </div>

                                </div>

                        

多图新闻列表

通过使用ax-gallery包裹图集,已经适配手机,在PC最多显示5个,在手机中最多只显示3个。基本格式如下:

                            <div class="ax-gallery"><a href="###" style="background-image: url(图片),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(图片),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(图片),url(https://src.axui.cn/src/images/loading.svg)"></a><i class="ax-num">3图</i></div>
                                    
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。
关键字:威尼斯暴雨最高纪录
                                <div class="ax-margin">

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <a href="###" class="ax-img" style="background-image:url(https://src.axui.cn/examples/images/image-8.jpg),url(https://src.axui.cn/src/images/loading.svg);"></a>
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-1.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-2.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><i class="ax-num">2图</i></div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重,圣马可广场被淹</a></div>
                                                <div class="ax-des ax-ell-2-des">意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾,市长路易吉·布鲁尼亚罗有意宣布紧急状态,说这场水灾恐致惨重损失。路透社报道,受暴雨和潮汐影响,威尼斯遭洪水侵袭,不少古老的广场和街道遭水淹没。当地官员说,12日22时50分,潮水最高水位达到187厘米,仅次于1966年创下的194厘米最高纪录。</div>
                                                <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-1.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-2.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-3.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><i class="ax-num">3图</i></div>
                                                <div class="ax-keywords">
                                                    关键字:<span class="ax-child">威尼斯</span><span class="ax-child">暴雨</span><span class="ax-child">最高纪录</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-margin-lr"></div>
                                    <div class="ax-break-md ax-hide-tel"></div>

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-2-title">俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大,毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝,这些小家伙们长得越来越大,主人才发现了它们的与众不同。“长得越来越不像猫咪,而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知,它们不是普通的猫咪,而是珍惜的野生保护动物兔狲。</a></div>
                                                <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-1.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-2.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-3.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-4.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-5.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><i class="ax-num">7图</i></div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                        

多图更多

如果不希望像上述例子那样仅用ax-num表示图片数量,用户可以使用给a追加ax-more类以“遮罩+数量”的方式表示更多图片。

                                    <div class="ax-item-block">
                                        <div class="ax-row">
                                            <div class="ax-col">
                                                <div class="ax-title"><a href="###" class="ax-ell-2-title">俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大,毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝,这些小家伙们长得越来越大,主人才发现了它们的与众不同。“长得越来越不像猫咪,而且很喜欢吃肉。”通过联系当地保护区的工作人员才得知,它们不是普通的猫咪,而是珍惜的野生保护动物兔狲。</a></div>
                                                <div class="ax-gallery"><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-1.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-2.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-3.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" style="background-image: url(https://src.axui.cn/examples/images/image-4.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a><a href="###" class="ax-more" style="background-image: url(examples/images/image-5.jpg),url(src/images/loading.svg)"><i>+12</i></a></div>
                                                <div class="ax-from">
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                    <span class="ax-color-des"><i class="ax-iconfont ax-icon-edit-fill"></i> 张春阳</span>
                                                    <span class="ax-color-des">2019年1月2日</span></div>
                                            </div>
                                        </div>
                                    </div>