v3首页
v2首页
核心
实例
资源
关于
v1.0

Headline 板块标题

使用标题

本框架定义了h1~h6号标题，具体数值如下：

  • h1：字号28px，行高44px，加粗，一个页面应该只出现一次
  • h2：字号22px，行高34px，加粗，可作为section子板块的标题出现，一个页面可多次出现
  • h3：字号18px，行高30px，加粗，可作为section子板块的标题出现，一个页面可多次出现
  • h4：字号16px，行高28px（随系统），加粗，可作为列表子项标题出现
  • h5：字号14px，行高28px（随系统），加粗，可在正文中突出某些文字
  • h6：字号14px，行高28px（随系统），不加粗，与正文表现相同

中国是以汉族为主体民族的多民族国家

中国是以汉族为主体民族的多民族国家

中国是以汉族为主体民族的多民族国家

中国是以汉族为主体民族的多民族国家

中国是以汉族为主体民族的多民族国家
中国是以汉族为主体民族的多民族国家

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

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

板块间隔

ax-headline表示板块标题，默认文本居中，字号等于h2字号。ax-title是必须的，可以增加其他元素以丰富板块间隔，比如ax-des、ax-adorn和ax-sign。

伟大的中国
伟大的中国
中国是以汉族为主体民族的多民族国家
THE GREAT CHINA
伟大的中国
伟大的中国
中国是以汉族为主体民族的多民族国家
                                 <div class="ax-headline">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                </div>


                                <div class="ax-headline">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline">
                                    <div class="ax-adorn">THE GREAT CHINA</div>
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                </div>


                                <div class="ax-headline">
                                    <span class="ax-sign ax-xxl ax-borderless"><i class="ax-iconfont ax-icon-global"></i></span>
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

对齐

板块标题默认居中对齐，使用ax-align-left和ax-align-right分别实现居左和居右布局，风格上会稍微有点变化。

伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
                                <div class="ax-headline ax-align-left">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-align-right">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

尺寸

板块标题定义了3个尺寸，默认尺寸是ax-md，字号等同于h2；ax-sm字号等同于h3；为了突出，ax-lg字号等同于h1字号+4px。

伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
                                <div class="ax-headline ax-sm">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-lg">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

颜色

板块标题定义了6个颜色，分别是：ax-primary、ax-success、ax-error、ax-warning、ax-info和ax-question。

伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
                                <div class="ax-headline">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-primary">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-success">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-error">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-warning">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-info">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-question">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

对板块标题使用颜色之后，如果是左对齐或者右对齐，风格将有点变化。

伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
                                <div class="ax-headline">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-primary ax-align-left">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-success ax-align-left">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-error ax-align-left">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-warning ax-align-right">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-info ax-align-right">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-question ax-align-right">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

风格

板块标题定义了3个风格，分别是：ax-style-simple简约、ax-style-dash短横、ax-style-underline下划线，更多风格可自行设计。

伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
伟大的中国
中国是以汉族为主体民族的多民族国家
                                <div class="ax-headline ax-style-simple">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-style-dash">
                                    <div class="ax-body"><span class="ax-title">伟大的中国</span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

                                <div class="ax-headline ax-style-underline">
                                    <div class="ax-body"><span class="ax-title"><i>伟大的中国</i></span></div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

TAB和更多

结合ax-badge、ax-dot、ax-menu-tab、ax-more制作可用于tab和更多的板块标题。

伟大的中国
更多
伟大的中国
北京 天津 乌鲁木齐
伟大的中国中国是以汉族为主体民族的多民族国家
北京 天津 乌鲁木齐
更多
伟大的中国GREAT
北京 天津 乌鲁木齐
更多
伟大的中国
北京 天津 乌鲁木齐
更多
中国是以汉族为主体民族的多民族国家
                                <div class="ax-headline ax-style-tab ax-row">
                                    <div class="ax-body ax-col"><span class="ax-title">伟大的中国</span></div>
                                    <a href="###" class="ax-more">更多<i class="ax-iconfont ax-icon-right"></i></a>
                                </div>


                                <div class="ax-headline ax-style-tab ax-row">
                                    <div class="ax-body ax-col"><span class="ax-title">伟大的中国</span><i class="ax-dot"></i></div>
                                    <div class="ax-menu-tab">
                                        <a href="###" class="ax-item ax-active"><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>
                                    <a href="###" class="ax-more ax-iconfont ax-icon-plus-o-f"></a>
                                </div>


                                <div class="ax-headline ax-style-tab ax-row">
                                    <div class="ax-body ax-col"><span class="ax-title">伟大的中国</span><span class="ax-des">中国是以汉族为主体民族的多民族国家</span></div>
                                    <div class="ax-menu-tab">
                                        <a href="###" class="ax-item ax-active"><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>
                                    <a href="###" class="ax-more">更多<i class="ax-iconfont ax-icon-right"></i></a>
                                </div>

                                <div class="ax-headline ax-style-tab ax-row">
                                    <div class="ax-body ax-col"><span class="ax-title">伟大的中国</span><span class="ax-badge">GREAT</span></div>
                                    <div class="ax-menu-tab">
                                        <a href="###" class="ax-item ax-active"><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>
                                    <a href="###" class="ax-more">更多<i class="ax-iconfont ax-icon-right"></i></a>
                                </div>

                                <div class="ax-headline ax-style-tab">
                                    <div  class="ax-row">
                                        <div class="ax-body ax-col"><span class="ax-title">伟大的中国</span></div>
                                        <div class="ax-menu-tab">
                                            <a href="###" class="ax-item ax-active"><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>
                                        <a href="###" class="ax-more">更多<i class="ax-iconfont ax-icon-right"></i></a>
                                    </div>
                                    <div class="ax-des">中国是以汉族为主体民族的多民族国家</div>
                                </div>

结合本框架基础代码制作能tab切换的栏目标题，更多tab用法请点击这里。

伟大的中国中国是以汉族为主体民族的多民族国家
北京 天津 乌鲁木齐
  • 北京市，简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心。截至2018年，全市下辖16个区，总面积16410.54平方千米，2019年末，常住人口2153.6万人，城镇人口1865万人，城镇化率86.6%，常住外来人口达794.3万人。
  • 天津，简称“津”，别称津沽、津门，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市，环渤海地区的经济中心，亚太区域海洋仪器检测评价中心 ，国际性综合交通枢纽。截至2018年，全市下辖16个区，总面积11966.45平方千米，2019年末，常住人口1561.83万人，城镇人口1303.82万人，城镇化率83.48%。
  • 乌鲁木齐，通称乌市，旧称迪化，是新疆维吾尔自治区首府，国务院批复确定的中国西北地区重要的中心城市和面向中亚西亚的国际商贸中心。截至2019年，全市下辖7个区、1个县，总面积14216.3平方千米，建成区面积436平方千米，常住人口355.2万人，城镇人口261.57万人，城镇化率74.61%。
                                    <div class="ax-tab">
                                    <div class="ax-headline ax-style-tab ax-row">
                                        <div class="ax-body ax-col"><span class="ax-title">伟大的中国</span><span class="ax-des">中国是以汉族为主体民族的多民族国家</span></div>
                                        <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>
                                        </div>
                                    </div>
                                    <ul class="ax-tab-content">
                                        <li>北京市，简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心。截至2018年，全市下辖16个区，总面积16410.54平方千米，2019年末，常住人口2153.6万人，城镇人口1865万人，城镇化率86.6%，常住外来人口达794.3万人。</li>
                                        <li>天津，简称“津”，别称津沽、津门，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市，环渤海地区的经济中心，亚太区域海洋仪器检测评价中心 ，国际性综合交通枢纽。截至2018年，全市下辖16个区，总面积11966.45平方千米，2019年末，常住人口1561.83万人，城镇人口1303.82万人，城镇化率83.48%。</li>
                                        <li>乌鲁木齐，通称乌市，旧称迪化，是新疆维吾尔自治区首府，国务院批复确定的中国西北地区重要的中心城市和面向中亚西亚的国际商贸中心。截至2019年，全市下辖7个区、1个县，总面积14216.3平方千米，建成区面积436平方千米，常住人口355.2万人，城镇人口261.57万人，城镇化率74.61%。</li>
                                    </ul>
                                </div>