axui表单导航弹窗按钮卡片评论等示例代码
代码语言：html
所属分类：布局界面
代码描述：axui表单导航弹窗按钮卡片评论等示例代码，包括手风琴、正文、列表、步骤、表格、闪烁等
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="email=no" />
<meta name="wap-font-scale" content="no" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AXUI前端框架|斧子框架，面向设计的自主国产前端框架</title>
<meta name="description" content="AXUI前端框架是面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。AXUI前端框架原则是能用css写的不用js；能用js写的不用插件；能用插件的不重复引用插件。核心文件只有ax.css和ax.js，加载速度飞快。">
<meta name="keywords" content="前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师,">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ax.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ax-response.css">
</head>
<body>
<main>
<div class="ax-tab">
<div class="ax-tab-nav ax-menu-tab">
<a href="###" class="ax-item"><span class="tab_title">表单</span></a>
<a href="###" class="ax-item"><span class="tab_title">导航</span></a>
<a href="###" class="ax-item"><span class="tab_title">弹窗</span></a>
<a href="###" class="ax-item"><span class="tab_title">按钮</span></a>
<a href="###" class="ax-item"><span class="tab_title">卡片</span></a>
<a href="###" class="ax-item"><span class="tab_title">列表</span></a>
<a href="###" class="ax-item"><span class="tab_title">手风琴</span></a>
<a href="###" class="ax-item"><span class="tab_title">评论</span></a>
<a href="###" class="ax-item"><span class="tab_title">正文</span></a>
<a href="###" class="ax-item"><span class="tab_title">步骤</span></a>
<a href="###" class="ax-item"><span class="tab_title">闪烁</span></a>
<a href="###" class="ax-item"><span class="tab_title">表格</span></a>
<a href="###" class="ax-item"><span class="tab_title">更多实例...</span></a>
</div>
<div class="ax-break-line"></div>
<ul class="ax-tab-content">
<li>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
姓名：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入登录名称" type="text">
</div>
</div>
<div class="ax-form-txt ax-color-danger">
<span class="ax-iconfont ax-icon-close-o-fill"></span> 你错了
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
姓名：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入登录名称" value="只读的input" readonly type="text">
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
姓名：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入登录名称" value="李畅" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
单选：
</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6">
<label class="ax-radio"><input name="fix-clock" value="0" checked="" type="radio"><span>军事类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-radio"><input name="fix-clock" value="1" type="radio"><span>人物志类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-radio"><input name="fix-clock" value="2" disabled="" type="radio"><span>娱乐类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-radio"><input name="fix-clock-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
复选：
</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock" value="0" checked="" type="checkbox"><span>军事类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock" value="1" type="checkbox"><span>人物志类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock" value="2" disabled="" type="checkbox"><span>娱乐类</span></label>
</div>
<div class="ax-col ax-col-6">
<label class="ax-checkbox"><input name="fix-clock-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
您十年前在深圳的曾用名是什么：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入登录名称" type="text">
</div>
</div>
<span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
选择房子：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8">
<input name="username" placeholder="几室" value="" type="text">
</div>
<span class="ax-bunch-txt">室</span>
<div class="ax-col ax-col-8">
<input name="username" placeholder="几厅" value="" type="text">
</div>
<span class="ax-bunch-txt">厅</span>
<div class="ax-col ax-col-8">
<input name="username" placeholder="几卫" value="" type="text">
</div>
<span class="ax-bunch-txt">卫</span>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
手机验证码：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入验证码" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
单价：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入商品单价" value="" type="text">
</div>
</div>
<span class="ax-form-txt ax-color-ignore">单位(元)</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
名称(头像)：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入登录名称" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span>
</div>
</div>
<a href="###" class="ax-form-head" style="background-image:url(https://www.jq22.com/img/cs/500x500-1.png),url(images/loading.gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
名称(图片)：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入登录名称" value="" type="text">
</div>
</div>
<a href="###" class="ax-form-img"><img src="https://www.jq22.com/img/cs/500x500-3.png"></a><span class="ax-form-txt ax-color-des">李创江</span>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
选择文件：
</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
<input type="file">
</div>
</div>
</div>
<a href="###" class="ax-form-head" style="background-image:url(https://www.jq22.com/img/cs/500x500-2.png),url(images/loading.gif);"></a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
评论：
</div>
<div class="ax-flex-block">
<div class="ax-form-input">
<textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">
评论(只读)：
</div>
<div class="ax-flex-block">
<div class="ax-form-input">
<textarea name="" cols="" rows="" placeholder="写评论" readonly=""></textarea>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-form-input">
<button type="button" class="ax-btn ax-primary ax-full">提交button</button>
</div>
</div>
</div>
</div>
</li>
<li>
<ul class="ax-menu ax-menu-light " id="menu01">
<li>
<a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">长安区</span></a></li>
<li><a href="###"><span class="ax-name">桥西区</span></a></li>
<li><a href="###"><span class="ax-name">新华区</span></a></li>
<li><a href="###"><span class="ax-name">裕华区</span></a></li>
<li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
</ul>
</li>
<li><a href="###"><span class="ax-name">邢台</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">桥西区</span></a></li>
<li><a href="###"><span class="ax-name">桥东区</span></a></li>
<li><a href="###"><span class="ax-name">沙河市</span></a></li>
<li><a href="###"><span class="ax-name">南宫市</span></a></li>
<li><a href="###"><span class="ax-name">邢台县</span></a></li>
</ul>
</li>
<li><a href="###"><span class="ax-name">邯郸</span></a></li>
<li><a href="###"><span class="ax-name">保定</span></a></li>
<li><a href="###"><span class="ax-name">衡水</span></a></li>
</ul>
</li>
<li>
<a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">成都</span></a></li>
<li><a href="###"><span class="ax-name">南充</span></a></li>
<li><a href="###"><span class="ax-name">绵阳</span></a></li>
</ul>
</li>
<li>
<a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
<ul>
<li><a href="###"><span class="ax-name">南宁</span></a></li>
<li><a href="###"><span class="ax-name">柳州</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="popbr">bottom-right</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="popb">bottom</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="popbl">bottom-left</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="poprt">right-top</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center"></div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="poplt">left-top</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="popr">right</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="pops">直接显示</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="popl">left</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="poprb">right-bottom</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="popc">center</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="poplb">left-bottom</a>
</div>
</div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-break-xl"></div>
<div class="ax-row">
<div class="ax-col ax-col-8" style="text-align: left;">
<a href="###" class="ax-btn ax-primary" id="poptr">top-right</a>
</div>
<div class="ax-col ax-col-8" style="text-align: center">
<a href="###" class="ax-btn ax-primary" id="popt">top</a>
</div>
<div class="ax-col ax-col-8" style="text-align: right">
<a href="###" class="ax-btn ax-primary" id="poptl">top-left</a>
</div>
</div>
</li>
<li>
<a href="###" class="ax-btn ">默认按钮</a>
<a href="###" class="ax-btn ax-primary">主色按钮</a>
<a href="###" class="ax-btn ax-secondary">secondary</a>
<a href="###" class="ax-btn ax-success">success</a>
<a href="###" class="ax-btn ax-danger">danger</a>
<a href="###" class="ax-btn ax-warning">warning</a>
<a href="###" class="ax-btn ax-info">info</a>
<a href="###" class="ax-btn ax-ad">ad</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-disabled">默认按钮</a>
<a href="###" class="ax-btn ax-primary ax-disabled">主色按钮</a>
<a href="###" class="ax-btn ax-secondary ax-disabled">secondary</a>
<a href="###" class="ax-btn ax-success ax-disabled">success</a>
<a href="###" class="ax-btn ax-danger ax-disabled">danger</a>
<a href="###" class="ax-btn ax-warning ax-disabled">warning</a>
<a href="###" class="ax-btn ax-info ax-disabled">info</a>
<a href="###" class="ax-btn ax-ad ax-disabled">ad</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-primary ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-disabled"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-success ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-danger ax-icon"><span class="ax-iconfont ax-icon-shield-fill"></span></a>
<a href="###" class="ax-btn ax-warning ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
<a href="###" class="ax-btn ax-info ax-icon"><span class="ax-iconfont ax-icon-star"></span></a>
</li>
<li>
<div class="ax-padding">
<div class="ax-grid ax-space-xxl">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-12">
<div class="ax-card-block">
<div class="ax-img">
<a href="###" class="ax-figure" style="background-image:url(https://www.jq22.com/img/cs/500x500-3.png),url(images/loading.gif);"></a>
</div>
<div class="ax-title">
<a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a>
</div>
<div class="ax-des">
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。
</div>
<div class="ax-from">
<span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span>2019年1月2日</span>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-card-block ax-padding-lr">
<div class="ax-img">
<a href="###" class="ax-figure" style="background-image:url(https://www.jq22.com/img/cs/500x500-4.png),url(images/loading.gif);"></a>
</div>
<div class="ax-title">
<a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a>
</div>
<div class="ax-des">
埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
</div>
<div class="ax-keywords">
关键字：<span>威尼斯</span><span>暴雨</span><span>最高纪录</span>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-card-block ax-padding-lr">
<div class="ax-img">
<span class="ax-flag ax-left ax-danger"><i>HOT</i></span>
<a href="###" class="ax-figure" style="background-image:url(https://www.jq22.com/img/cs/500x500-1.png),url(images/loading.gif);"></a>
</div>
<div class="ax-title">
<a href="###" class="ax-ell-title">在蔚蓝世界探寻沉船遗迹：多米尼加新建一家“海底博物馆”</a>
</div>
<div class="ax-des">
“畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。
</div>
<div class="ax-keywords">
关键字：<span>威尼斯</span><span>暴雨</span><span>最高纪录</span>
</div>
</div>
</li>
<li class="ax-grid-block ax-col-12">
<div class="ax-card-block ax-padding-lr">
<div class="ax-img">
<a href="###" class="ax-figure" style="background-image:url(https://www.jq22.com/img/cs/500x500-2.png),url(images/loading.gif);"></a>
</div>
<div class="ax-title">
<a href="###" class="ax-ell-title">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a>
</div>
<div class="ax-des">
俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
</div>
<div class="ax-from">
<span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
<span>2019年1月2日</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<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>
<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>
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(images/default-head.jpg),url(images/loading.svg);"></span>
<div class="ax-col">
<span class="ax-ell">南航与英航签署联营合作协议代码共享</span>
</div>
<span class="ax-arrow ax-iconfont ax-icon-right"></span>
</div>
</a>
<a href="###" class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(),url(images/loading.svg);"></span>
<div class="ax-col">
<span class="ax-ell">12月，到英国大城小镇看“亮灯”</span>
</div>
<span class="ax-arrow ax-iconfont ax-icon-right"></span>
</div>
</a>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://www.jq22.com/img/cs/500x500-1.png),url(images/loading.svg);"></span>
<div class="ax-col">
<a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a>
</div>
<span class="ax-arrow">234次</span>
<a href="###" class="ax-arrow ax-iconfont ax-icon-right"></a>
</div>
</div>
<div class="ax-info-block">
<div class="ax-row">
<span class="ax-head" style="background-image:url(https://www.jq22.com/img/cs/500x500-2.png),url(images/loading.svg);"></span>
<div class="ax-col">
<a href="###" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a>
</div>
<span class="ax-arrow">98次</span>
<a href="###" class="ax-arrow ax-iconfont ax-icon-right"></a>
</div>
</div>
</li>
<li>
<div class="ax-accordion ax-border ax-radius">
<div class="ax-item">
<div class="ax-panel-header">
中华民族
</div>
<div class="ax-panel-body">
<div class="ax-break-line"></div>
<div class="ax-padding">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-item">
<div class="ax-panel-header">
历史进程
</div>
<div class="ax-panel-body">
<div class="ax-break-line"></div>
<div class="ax-padding">
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
</div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-item">
<div class="ax-panel-header">
人口规模
</div>
<div class="ax-panel-body">
<div class="ax-break-line"></div>
<div class="ax-padding">
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-accordion ax-border ax-radius">
<div class="ax-item">
<div class="ax-panel-header ax-row">
<div class="ax-col">
<span class="ax-title">中华民族</span>
</div>
<span class="ax-operate ax-more"><i class="ax-iconfont
ax-icon-right"></i></span>
</div>
<div class="ax-panel-body">
<div class="ax-break-line"></div>
<div class="ax-padding">
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-item ax-show">
<div class="ax-panel-header ax-row">
<div class="ax-col">
<span class="ax-title">历史进程</span>
</div>
<span class="ax-operate ax-more"><i class="ax-iconfont
ax-icon-right"></i></span>
</div>
<div class="ax-panel-body">
<div class="ax-break-line"></div>
<div class="ax-paddin.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0