Article 正文

使用说明

ax-article表示正文内容,在标签内的图片、文字、视频、音频、列表等样式都已经做了预设。已经优化的标签如下:

  • img 最大宽度是100%
  • video 最大宽度是100%
  • audio 最大宽度是100%
  • blockquote 引用
  • h1 一级标题
  • h2 二级标题
  • olli 有序列表
  • ulli 无序列表
  • aspan display属性为inline

伟大的中国

一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。

一、简介

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

  中国文化渊远流长、博大精深、绚烂多彩,是东亚文化圈的文化宗主国,在世界文化体系内占有重要地位,由于各地的地理位置、自然条件的差异,人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等,而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。

二、词义

  中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国,自之辟民”,同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。

  “华夏”一词最早见于周朝《尚书·周书·武成》,“华夏蛮貊,罔不率俾”。 《书经》曰:“冕服采装曰华,大国曰夏”。《尚书正义》注:“冕服华章曰华,大国曰夏”。“华”,是指华丽、兴旺;也有说上古华、夏同音,本一字。《左传》曰:“中国有礼仪之大,故称夏;有服章之美,谓之华。” 华是指汉服,夏指行周礼的大国,故中国有礼仪之邦、衣冠上国之美誉。

三、历史

  1. 古代史
  2. 近代史
  3. 现代史

四、地理

  • 中国地势西高东低,山地、高原和丘陵约占陆地面积的67%,盆地和平原约占陆地面积的33%。
  • 几百万年前,青藏高原隆起,地球历史上此一重大地壳运动形成了中国的地貌。
                        <div class="ax-article">
                            <h2>标题</h2>
                            <blockquote>引用</blockquote>
                            <p>内容</p>
                            <video></video>
                            <audio></audio>
                            <ol>
                                <li>列表</li>
                                <li>列表</li>
                            </ol>
                            <ul>
                                <li>列表</li>
                                <li>列表</li>
                            </ul>
                        </div>
                        

出处

一般介于标题和正文中间,包含作者、发布时间、信息来源等。

2020年04月24日 23:16:37
来自:纽约时报

258人查看195条评论
2020年04月24日 23:16:37
来自:纽约时报

258人查看195条评论
编辑:庄自强/2天前
编辑:庄自强/2天前
编辑:庄自强/2天前
                                <div class="ax-from">
                                    <div class="ax-left">
                                        2020年04月24日 23:16:37<br>来自:纽约时报
                                    </div>
                                    <div class="ax-right"><br><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break"></div>
                                <div class="ax-from">
                                    <a href="###" class="ax-avatar ax-lg ax-round" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                                    <div class="ax-left">
                                        2020年04月24日 23:16:37<br>来自:纽约时报
                                    </div>
                                    <div class="ax-right"><br><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break"></div>
                                <div class="ax-from">
                                    <div class="ax-left">
                                        编辑:庄自强/2天前
                                    </div>
                                    <div class="ax-right"><a href="###" class=""><i class="ax-iconfont ax-icon-edit"></i> 纠错</a></div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break"></div>
                                <div class="ax-from">
                                    <a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"></a>
                                    <div class="ax-left">
                                        编辑:庄自强/2天前
                                    </div>
                                    <div class="ax-right"><a href="###" class=""><i class="ax-iconfont ax-icon-edit"></i> 纠错</a></div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break"></div>
                                <div class="ax-from">
                                    <a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"></a>
                                    <div class="ax-left">
                                        编辑:庄自强/2天前
                                    </div>
                                    <div class="ax-right"><a href="###" class="ax-btn ax-primary ax-sm ax-round"><i class="ax-iconfont ax-icon-plus"></i> 关注</a></div>
                                </div>
                        

作者

一般放在正文底部,包含作者、职位、评论数等。本框架做了几个简单的风格供参考使用。

庄自强
新华日报社高级编辑
258人查看195条评论
庄自强
新华日报社高级编辑
258人查看195条评论
庄自强 推荐
新华日报社高级编辑
                                <div class="ax-author">
                                    <div class="ax-left">
                                        <div class="ax-title">庄自强</div>
                                        <div class="ax-des">新华日报社高级编辑</div>
                                    </div>
                                    <div class="ax-right"><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break"></div>
                                <div class="ax-author">
                                    <a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                                    <div class="ax-left">
                                        <div class="ax-title">庄自强</div>
                                        <div class="ax-des">新华日报社高级编辑</div>
                                    </div>
                                    <div class="ax-right"><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break"></div>
                                <div class="ax-author">
                                    <a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"></a>
                                    <div class="ax-left">
                                        <div class="ax-title">庄自强 <span class="ax-badge ax-badge-success ax-badge-border">推荐</span></div>
                                        <div class="ax-des">新华日报社高级编辑</div>
                                    </div>
                                    <div class="ax-right"><a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-plus"></i> 关注</a></div>
                                </div>
                        

点赞

一般放在正文底部,有默认和已点赞两种状态。ax-good表示点赞,ax-done表示已经赞过了。

                                <div class="ax-good">
                                    <a href="###"><i class="ax-iconfont ax-icon-good-fill"></i><span class="num">0</span><span class="ax-text"></span></a>
                                </div>
                                <div class="ax-good ax-done">
                                    <a href="###"><i class="ax-iconfont ax-icon-good-fill"></i><span class="ax-num">16</span><span class="ax-text">您已经点赞了!</span></a>
                                </div>
                        

借助框架的ax-btn类和ax-line类制作点赞按钮,用户可自由发挥。

                                <a href="###" class="ax-btn  ax-round"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-line ax-round"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-line ax-primary ax-round"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>

                                <a href="###" class="ax-btn  ax-round ax-long"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-primary ax-round ax-long"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <div class="ax-break"></div>

                                <a href="###" class="ax-btn  ax-round ax-lg"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-line  ax-round ax-lg"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-line ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>

                                <a href="###" class="ax-btn  ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-primary ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-btn  ax-round ax-sm"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-line  ax-round ax-sm"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-line ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>

                                <a href="###" class="ax-btn  ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                                <a href="###" class="ax-btn ax-primary ax-round ax-long  ax-sm"><i class="ax-iconfont ax-icon-good-fill"></i> 125</a>
                        

分享按钮

分享按钮是根据框架普通按钮制作的,详见按钮制作方法:按钮。另外可以结合layout布局制作等宽均分的分享按钮,用户可自由发挥。

                                <!--ax-btn-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--ax-line-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-line ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-line ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-line ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-line ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-line ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-line ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--ax-btn加颜色-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--ax-btn大-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-success ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-ad ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-danger ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-primary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-secondary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-info ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--ax-btn小-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-success ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-ad ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-danger ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-primary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-secondary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-info ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--ax-btn ax-text-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--ax-btn ax-text颜色-->
                                <div class="ax-share">
                                    <a href="###" class="ax-btn ax-text ax-success ax-icon"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-ad ax-icon"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-danger ax-icon"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-primary ax-icon"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-secondary ax-icon"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-info ax-icon"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                </div>
                                <!--layout-->
                                <div class="ax-row ax-share">
                                    <div class="ax-col"><a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a></div>
                                    <div class="ax-col"><a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a></div>
                                    <div class="ax-col"> <a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a></div>
                                    <div class="ax-col"> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a></div>
                                    <div class="ax-col"><a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a></div>
                                    <div class="ax-col"> <a href="###" class="ax-btn ax-info ax-icon  ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a></div>
                                </div>
                                <!--layout定宽-->
                                <div class="ax-row ax-share" style="width: 600px;">
                                    <div class="ax-col"><a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a></div>
                                    <div class="ax-col"><a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a></div>
                                    <div class="ax-col"> <a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-fill"></i></a></div>
                                    <div class="ax-col"> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-fill"></i></a></div>
                                    <div class="ax-col"><a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a></div>
                                    <div class="ax-col"> <a href="###" class="ax-btn ax-info ax-icon  ax-round"><i class="ax-iconfont ax-icon-twitter-fill"></i></a></div>
                                </div>
                        

百度分享

结合百度分享插件和ax框架可自定义分享按钮,分享按钮都用bdsharebuttonbox标签包裹,每个按钮的data-cmd值需要参考百度分享官网。举例如下:

分享到:
  •                                 <div class="ax-share ax-align-left-center">
                                        分享到:
                                        <div class="bdsharebuttonbox">
                                            <a href="###" class="ax-btn ax-success ax-icon ax-round" data-cmd="weixin"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                            <a href="###" class="ax-btn ax-ad ax-icon ax-round" data-cmd="sqq"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                            <a href="###" class="ax-btn ax-danger ax-icon ax-round" data-cmd="tsina"><i class="ax-iconfont ax-icon-weibo-fill"></i></a>
                                            <a href="###" class="ax-btn ax-primary ax-icon ax-round" data-cmd="renren"><i class="ax-iconfont ax-icon-renren-fill"></i></a>
                                            <a href="###" class="ax-btn ax-secondary ax-icon ax-round" data-cmd="fbook"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                            <a href="###" class="ax-btn ax-info ax-icon ax-round" data-cmd="twi"><i class="ax-iconfont ax-icon-twitter-fill"></i></a>
                                        </div>
                                    </div>
                                        
  •                                 <script>
                                        window._bd_share_config = {
                                            common : {
                                                bdText : 'AXUI斧子前端框架',
                                                bdDesc : 'AXUI,面向设计,满足设计多样化需求的前端解决方案,减少或剔除JS文件资源和API。',
                                                bdUrl : 'http://www.axui.cn',
                                                bdPic : 'http://www.axui.cn/images/logo.png',
                                            },
                                            share : [{
                                                "bdCustomStyle":"xxx"
                                            }]
                                        }
                                        with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
                                    </script>