List 列表

使用说明

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

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

分割线

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

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

边距

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

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

排行榜

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

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

自定义图标前缀

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

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

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

原型头像前缀

使用ax-head制作带圆形头像的列表,图片作为背景将呈现圆形。

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

方形图片前缀

使用ax-image制作带方形图片的列表。

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

静态勾选

使用ax-check制作静态勾选列表,仅仅是显示效果,无点击功能。

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

确认勾选

在某些项目中有再次选择确认的需求,使用ax-confirmax-reconfirm制作确认勾选列表,仅仅是显示效果,无点击功能。

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

复选和单选

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

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

选择列表

如果将checkbox和radio也做成全宽可点击的列表,需要改造节点并追加弹性布局的类。

  • 第一步:label标签的子节点按input > i > u的顺序放置
  • 第二步:label标签追加ax-row类,以使用弹性布局
  • 第三步:对i标签追加ax-col以作为弹性布局的子节点
  • 第四步:对i标签中的文字使用ax-ell类包裹,以使用超出省略效果
                            <div class="ax-info-block">
                                <label class="ax-checkbox ax-xs ax-row">
                                    <input name="house" value="1" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-checkbox ax-xs ax-row">
                                    <input name="house" value="2" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-checkbox ax-xs ax-row">
                                    <input name="house" value="3" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-checkbox ax-xs ax-row">
                                    <input name="house" value="4" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-checkbox ax-xs ax-row">
                                    <input name="house" value="5" type="checkbox" checked disabled>
                                    <i class="ax-col"><span class="ax-ell">桂林漓江漂流</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-checkbox ax-xs ax-row">
                                    <input name="house" value="6" type="checkbox" disabled>
                                    <i class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-switch ax-xs ax-row">
                                    <input name="home" value="1" type="checkbox" checked>
                                    <i class="ax-col"><span class="ax-ell">欧盟六国一日游</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-switch ax-xs ax-row">
                                    <input name="home" value="2" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">无聊待在家</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-switch ax-xs ax-row">
                                    <input name="home" value="3" type="checkbox" checked disabled>
                                    <i class="ax-col"><span class="ax-ell">日本东京三日游</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-switch ax-xs ax-row">
                                    <input name="home" value="4" type="checkbox" disabled>
                                    <i class="ax-col"><span class="ax-ell">美国纽约大学七日游学</span></i>
                                    <u></u>
                                </label>
                            </div>
                        
                            <div class="ax-info-block">
                                <label class="ax-radio ax-xs ax-row">
                                    <input name="computer" value="1" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-radio ax-xs ax-row">
                                    <input name="computer" value="2" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-radio ax-xs ax-row">
                                    <input name="computer" value="3" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-radio ax-xs ax-row">
                                    <input name="computer" value="4" type="checkbox">
                                    <i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-radio ax-xs ax-row" >
                                    <input name="computer" value="5" type="checkbox" checked disabled>
                                    <i class="ax-col"><span class="ax-ell">桂林漓江漂流</span></i>
                                    <u></u>
                                </label>
                            </div>
                            <div class="ax-break-line"></div>
                            <div class="ax-info-block">
                                <label class="ax-radio ax-xs ax-row">
                                    <input name="computer" value="6" type="checkbox" disabled>
                                    <i class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></i>
                                    <u></u>
                                </label>
                            </div>
                        

全选列表

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

创建checkbox列表之后,如果需要使用全选功能,可使用axCheckAll插件,插件使用详细请点击这里

全选 取消全选
                                    <div axCheckAll="checkDom:'[listradio]'">
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="good" value="1" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="good" value="2" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="good" value="3" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="good" value="4" type="checkbox" disabled>
                                                <i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                    </div>
                                    <label class="ax-radio"><input type="radio" name="listradio" value=1><u></u><i>全选</i></label>
                                    <label class="ax-radio"><input type="radio" name="listradio" value=0><u></u><i>全不选</i></label>

                                    <div class="ax-break"></div>

                                    <div axCheckAll="checkDom:'#boxCheck'">
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="bad" value="1" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="bad" value="2" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="bad" value="3" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="bad" value="4" type="checkbox" disabled>
                                                <i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                    </div>
                                    <label class="ax-checkbox"><input type="checkbox" id="boxCheck"><u></u><i>全选</i></label>

                                    <div class="ax-break"></div>

                                    <div axCheckAll="checkDom:'#checkBtn',clearDom:'#clearBtn'">
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="apple" value="1" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="apple" value="2" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="apple" value="3" type="checkbox">
                                                <i class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-info-block">
                                            <label class="ax-checkbox ax-xs ax-row">
                                                <input name="apple" value="4" type="checkbox" disabled>
                                                <i class="ax-col"><span class="ax-ell">自驾丽江三两天</span></i>
                                                <u></u>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-btn" id="checkBtn">全选</a>
                                    <a href="###" class="ax-btn" id="clearBtn">取消全选</a>
                          

样式

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

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

边框

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

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

新闻列表

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

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

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

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

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

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

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

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

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

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

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

                            </div>
                        

添加角标

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

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

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

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

                                </div>
                        

手机端通栏

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

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

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

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

                                </div>
                        

广告新闻

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

意大利“水城”威尼斯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/v2.0/examples/images/image-8.jpg),var(--load-gif);"></a>
                                        </div>
                                    </div>

                                </div>

                        

多图新闻列表

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

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

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

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

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

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

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

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

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

                                </div>
                        

多图更多

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

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