Article 正文

使用说明

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

img 最大宽度是100%
video 最大宽度是100%
audio 最大宽度是100%
blockquote 引用
h1 一级标题
h2 二级标题
ol和li 有序列表
ul和li 无序列表
a和span display属性为inline

伟大的中国

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

一、简介

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

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

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

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

二、词义

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

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

三、历史

古代史
近代史
现代史

四、地理

中国地势西高东低，山地、高原和丘陵约占陆地面积的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/v1.0/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/v1.0/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/v1.0/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/v1.0/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/v1.0/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表示已经赞过了。

16您已经点赞了！

                                <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类制作点赞按钮，用户可自由发挥。

125 125 125 125 125 125

                                <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>