用Bootstrap做一个历史朝代表
引入CDN,算好需要合并的单元格。
<!DOCTYPE html>
<html> <head>
<!-- 移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8" />
<title>朝代表</title>
<!-- bootstrap-cssCDN链接 -->
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<!-- jqueryCDN链接 -->
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- bootstrap-jsCDN链接 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<h1 class="text-center">历史朝代表</h1>
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="2">朝 代</th>
<th>起 讫</th>
<th>都 城</th>
<th>今 地</th>
</tr>
</thead>
<tr>
<th colspan="2">夏</th>
<td>约前2146-1675年</td>
<td>安邑</td>
<td>山西夏县</td>
</tr>
<tr>
<th colspan="2">商</th>
<td>约前1675-1029年</td>
<td>亳</td>
<td>河南商丘</td>
</tr>
<tr>
<th rowspan="2">周</th>
<th>西周</th>
<td>约前1029-771年</td>
<td>镐京</td>
<td>陕西西安</td>
</tr>
<tr>
<th>东周</th>
<td>前770-256年</td>
<td>洛邑</td>
<td>河南洛阳</td>
</tr>
<tr>
<th colspan="2">秦</th>
<td>前221-207年</td>
<td>咸阳</td>
<td>陕西咸阳</td>
</tr>
<tr>
<th rowspan="2">汉</th>
<th>西汉</th>
<td>前206—公元25</td>
<td>长安</td>
<td>陕西西安</td>
</tr>
<tr>
<th>东汉</th>
<td>25—220</td>
<td>洛阳</td>
<td>河南洛阳</td>
</tr>
<tr>
<th rowspan="3">三国</th>
<th>魏</th>
<td>220-265</td>
<td>洛阳</td>
<td>河南洛阳</td>
</tr>
<tr>
<th>蜀</th>
<td>221-263</td>
<td>成都</td>
<td>四川成都</td>
</tr>
<tr>
<th>吴</th>
<td>222-280</td>
<td>建业</td>
<td>江苏南京</td>
</tr>
<tr>
<th colspan="2">西晋</th>
<td>265-317</td>
<td>洛阳</td>
<td>河南洛阳</td>
</tr>
<tr>
<th rowspan="2">东晋
<br>十六国</th>
<th>东晋</th>
<td>317-420</td>
<td>建康</td>
<td>江苏南京</td>
</tr>
<tr>
<th>十六国</th>
<td>304-439</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<th rowspan="4">南朝</th>
<th>宋</th>
<td>420-479</td>
<td>建康</td>
<td>江苏南京</td>
</tr>
<tr>
<th>齐</th>
<td>479-502</td>
<td>建康</td>
<td>江苏南京</td>
</tr>
<tr>
<th>梁</th>
<td>502-557</td>
<td>建康</td>
<td>江苏南京</td>
</tr>
<tr>
<th>陈</th>
<td>557-589</td>
<td>建康</td>
<td>江苏南京</td>
</tr>
<tr>
<th rowspan="6">北朝</th>
<th rowspan="2">北魏</th>
<td rowspan="2">386-534</td>
<td>平城</td>
<td>山西大同</td>
</tr>
<tr>
<td>洛阳</td>
<td>河南洛阳</td>
</tr>
<tr>
<th>东魏</th>
<td>534-550</td>
<td>邺</td>
<td>河北临漳</td>
</tr>
<tr>
<th>北齐</th>
<td>550-577</td>
<td>邺</td>
<td>河北临漳</td>
</tr>
<tr>
<th>西魏</th>
<td>535-557</td>
<td>长安</td>
<td>陕西西安</td>
</tr>
<tr>
<th>北周</th>
<td>557-581</td>
<td>长安</td>
<td>陕西西安</td>
</tr>
<tr>
<th colspan="2">隋</th>
<td>581-618</td>
<td>大兴</td>
<td>陕西西安</td>
</tr>
<tr>
<th colspan="2">唐</th>
<td>618-907</td>
<td>长安</td>
<td>陕西西安</td>
</tr>
<tr>
<th rowspan="6">五代十国</th>
<th>后梁</th>
<td>907-923</td>
<td>汴</td>
<td>河南开封</td>
</tr>
<tr>
<th>后唐</th>
<td>923-936</td>
<td>洛阳</td>
<td>河南洛阳</td>
</tr>
<tr>
<th>后晋</th>
<td>936-946</td>
<td>汴</td>
<td>河南开封</td>
</tr>
<tr>
<th>后汉</th>
<td>947-950</td>
<td>汴</td>
<td>河南开封</td>
</tr>
<tr>
<th>后周</th>
<td>951-960</td>
<td>汴</td>
<td>河南开封</td>
</tr>
<tr>
<th>十国</th>
<td>902-979</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<th rowspan="2">宋</th>
<th>北宋</th>
<td>960-1127</td>
<td>开封</td>
<td>河南开封</td>
</tr>
<tr>
<th>南宋</th>
<td>1127-1279</td>
<td>临安</td>
<td>浙江杭州</td>
</tr>
<tr>
<th colspan="2">辽</th>
<td>907-1125</td>
<td>皇都(上京)</td>
<td>内蒙古 巴林左旗</td>
</tr>
<tr>
<th colspan="2">西夏</th>
<td>1038-1227</td>
<td>兴庆府</td>
<td>宁夏银川</td>
</tr>
<tr>
<th rowspan="3" colspan="2">金</th>
<td rowspan="3">1115-1234</td>
<td>会宁</td>
<td>阿城(黑龙江)</td>
</tr>
<tr>
<td>中都</td>
<td>北京</td>
</tr>
<tr>
<td>开封</td>
<td>河南开封</td>
</tr>
<tr>
<th colspan="2">元</th>
<td>1206-1368</td>
<td>大都</td>
<td>北京</td>
</tr>
<tr>
<th colspan="2">明</th>
<td>1368-1644</td>
<td>北京</td>
<td>北京</td>
</tr>
<tr>
<th colspan="2">清</th>
<td>1616-1911</td>
<td>北京</td>
<td>北京</td>
</tr>
<tr>
<th colspan="2">中华民国</th>
<td>1912-1949</td>
<td>南京</td>
<td>江苏南京</td>
</tr>
<tr>
<th colspan="5" class="text-center">中华人民共和国1949年10月1日成立，首都北京。</th>
</tr>
</table>
</div>
</div>
</body> </html>
成品图：
用Bootstrap做一个历史朝代表的更多相关文章
- 用bootstrap做一个背景可轮转的登录界面
用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...
- .net，mvc使用bootstrap做一个标准后台
今天准备搭一个公用后台,使用bootstrap,方便今后开发,顺便mark一下 后期列表页将使用kendo-ui,增强后台的效果 下面是代码... login页面 @{ Layout = null; ...
- Bootstrap 做一个简单的母版页
随便搭的一个母版页,不太好看,只是为了看效果....请勿吐槽. 效果如图: 一.新建母版页,引入Bootstrap相关js文件 <link href="../css/bootstrap ...
- 使用bootstrap做一个响应式的页面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 做一个 App 前需要考虑的几件事
做一个 App 前需要考虑的几件事 来源:limboy的博客 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...
- 做一个App前需要考虑的几件事
本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...
- ［转载］做一个 App 前需要考虑的几件事
本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...
随机推荐
- day 26 面向对象知识网
1. 成员 - 变量 - 静态字段,类变量 - 方法 - 类方法 - 静态方法 - 实例方法 - 属性2. 对象的嵌套3. 特殊方法 __init__ new call getitem... add ...
- Android Binder机制介绍
做过Android开发的同学可能有些体会,入门初期,工作内容主要是实现各式各样的UI界面,以及实现应用的业务逻辑.在这个阶段,我们会逐渐熟悉View系统,逐渐学会实现各种各样的界面以及动画效果.再往后 ...
- Vsftp与PAM虚拟用户
使用yum 安装vsftp yum install vsftpd pam pam-* db4 db4-* 创建一个保存用户及密码的文件 cd /etc/vsftpd/ touch virtual_lo ...
- iptables filter表案例、iptables nat表应用 使用介绍
第7周第4次课(5月10日) 课程内容: 10.15 iptables filter表案例10.16/10.17/10.18 iptables nat表应用 扩展1. iptables应用在一个网段 ...
- C语言博客作业10
一.本周教学内容&目标 第4章 循环结构 4.5 综合介绍循环结构的程序设计,涉及到多个典型算法.要求学生能够根据实际情况,选择合适的算法.合理的循环结构,熟练的编写程序. 二.本周作业头 这 ...
- split分割（拆分）文件
split分割(拆分)文件 需求:指定文件大小拆分文件 # ll -h test/ |grep vmcore -rw-r--r-- 1 root root 12G 12月 7 00:20 vmco ...
- 简单易学的机器学习算法——决策树之ID3算法
一.决策树分类算法概述 决策树算法是从数据的属性(或者特征)出发,以属性作为基础,划分不同的类.例如对于如下数据集 (数据集) 其中,第一列和第二列为属性(特征),最后一列为类别标签,1表示是 ...
- 小白的springboot之路（七）、事务支持
0-前言 事务管理对于企业级应用来说必不可少,用来确保数据的完整性和一致性: 1-开启事务 spring boot支持编程式事务和声明式事务,用声明式事务即可: spring boot开启事务非常简单 ...
- WebGPU学习（三）:MSAA
大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例 下一篇博文 WebGPU学习(四):Alpha To Cov ...
- lerna式升级
有段时间没更新博客了,是时候更新一波了. 之前不是vue-next出了吗,然后就去学习了一下,发现整个目录不是那么熟悉了,变成这样了: 于是就这个线索去研究了一下,发下这是用的 lerna + yar ...