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>
出处
一般介于标题和正文中间,包含作者、发布时间、信息来源等。
<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/v2.0/public/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/v2.0/public/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/v2.0/public/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>
作者
一般放在正文底部,包含作者、职位、评论数等。本框架做了几个简单的风格供参考使用。
<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/v2.0/public/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/v2.0/public/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-f"></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-f"></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-f"></i> 125</a> <a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-line ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-line ax-primary ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-round ax-long"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-primary ax-round ax-long"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <div class="ax-break"></div> <a href="###" class="ax-btn ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-line ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-line ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-primary ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <div class="ax-break"></div> <a href="###" class="ax-btn ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-line ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-line ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a> <a href="###" class="ax-btn ax-primary ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
分享按钮
<!--ax-btn--> <div class="ax-share"> <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a> <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></i></a> <a href="###" class="ax-btn ax-line ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-line ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-line ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-line ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-line ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></i></a> <a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></i></a> <a href="###" class="ax-btn ax-ad ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-primary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-info ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></i></a> <a href="###" class="ax-btn ax-ad ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-primary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-info ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></i></a> <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></i></a> <a href="###" class="ax-btn ax-text ax-ad ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-text ax-danger ax-icon"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-text ax-primary ax-icon"><i class="ax-iconfont ax-icon-renren-f"></i></a> <a href="###" class="ax-btn ax-text ax-secondary ax-icon"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-text ax-info ax-icon"><i class="ax-iconfont ax-icon-twitter-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></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-f"></i></a></div> </div>
分享插件
百度分享插件已经不再维护也不再提供使用,本团队在浏览github中意外发现国人自主创作的分享插件share.js,觉得思路挺好,想到中国的网站喜欢使用分享平台功能,于是借鉴了精髓创作了axShare。
使用具有axShare属性的div作为父层,内部放置具有share="*"属性的a作为子元素,即可实现分享功能。
<div axShare> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a> </div>
分享按钮只要是a标签即可,不管是文字还是图标均可。
<div axShare> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a> </div>
分享平台
目前支持以下平台分享:
- qzone
- tumblr
如果需要使用微信二维码分享功能,请在页面中ax.js前面加载qrcode.min.js
-
<div class="ax-share ax-align-left-center"> 分享到: <div axShare data-url="https://www.axui.cn"> <a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="qq"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-ad ax-icon ax-round" target="_blank" share="qzone"><i class="ax-iconfont ax-icon-qzone-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-success ax-icon ax-round" share="wechat"><i class="ax-iconfont ax-icon-wechat-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-round" target="_blank" share="facebook"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-info ax-icon ax-round" target="_blank" share="twitter"><i class="ax-iconfont ax-icon-twitter-f"></i></a> <a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="google"><i class="ax-iconfont ax-icon-google-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="pinterest"><i class="ax-iconfont ax-icon-pinterest-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-round" target="_blank" share="tumblr"><i class="ax-iconfont ax-icon-tumblr-f"></i></a> </div> </div>
-
<script src="https://src.axui.cn/v2.0/dist/plugins/qrcode/v1.0.0-ax/qrcode.min.js"></script>
分享前窗口
点击分享按钮直接调走会显得突兀,有时候用户仅仅是好奇点一下而已并不是真正想跳转页面,所以在跳转前使用对话框询问以便于撤销分享是蛮有用的。
如果要启用分享前对话框询问,值需要再分享按钮上加上confirm
属性即可。
<div axShare> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo" confirm><i class="ax-iconfont ax-icon-weibo-f"></i></a> </div>
页面跳转方式
用户可对分享按钮使用target="*"
属性实现新页面跳转或当页跳转。
也可以使用newPage
属性修改跳转方式,默认为true即新页面跳转分享,可设为false当页跳转分享。
<div axShare='newPage:false'> <a href="###" share="weibo" class="ax-color-danger" confirm>点击分享到微博</a> <a href="###" share="qq" class="ax-color-primary">点击分享到QQ</a> </div>
回调函数
本插件支持onShare
回调函数,在点击分享按钮后触发。支持参数name
,也就是平台名称。
-
<div id="callback"> <a href="###" share="weibo" target="_blank" class="ax-color-danger">点击分享到微博</a> </div>
-
new axShare('#callback',{ onShare:function(name){ alert(name+'已经分享了!'); } });
参数选项
document.addEventListener("DOMContentLoaded", function() { var demo1 = new axShare({ source: '',//类似分享页面的标题 title: '',//分享页面的标题 des: '',//分享页面的简介 url: window.location.href,//分享的页面,默认是当前页面的网址,比如:http://www.axui.cn/examples/index.html image: '',//分享的图片,数量一张 key: '',//微博的key,仅微博分享使用 origin: window.location.origin,//根域名,默认是当前页面的根域名,比如:http://www.axui.cn qrTitle: '在微信里点击“发现”,再点击“扫一扫,”
',//微信分享中的文字 qrSize: 180,//QR系统中尺寸单位是px newPage: true,//点击后是否在新页面打开分享页面,默认打开新页面 dialogText: '确定分享本页面?',//跳转提示窗口的文字 onShare: '',//回调函数 }); });
便可将本文分享至朋友圈。
本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。