用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 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...
随机推荐
- 和SharpDX坑爹的Variant刚正面
和SharpDX坑爹的Variant刚正面 几个月前我写了和篇文章<.NET中生成动态验证码>文章,其实里面藏着一个大坑.运行里面的代码,会发现运行的gif图片并没有循环播放: 细心的网友 ...
- 手把手教你优雅的编写第一个SpringMVC程序
可能之前写的文章走进SpringMVC世界,从SpringMVC入门到SpringMVC架构中的第一个springMVC入门程序讲解的不是那么优雅.细致.精巧,因此特地写这篇稍微优雅.细致.精巧一些的 ...
- kubeadm 1.16+ 初始化后 Unable to update cni config: no valid networks found in /etc/cni/net.d
问题描述: 在使用 kubeadm 工具初始化k8s后,并且安装了 flanneld 网络组建后,/var/log/messages 依旧报错, Unable to update cni config ...
- 震惊！线上四台机器同一时间全部 OOM，到底发生了什么？
案发现场 昨天晚上突然短信收到 APM (即 Application Performance Management 的简称),我们内部自己搭建了这样一套系统来对应用的性能.可靠性进行线上的监控和预警的 ...
- 大型情感剧集Selenium：8_selenium网页截图的四种方法
有时候,有时候,你会相信一切有尽头-当你的代码走到了尽头,那么保留最后一刻的状态尤为重要,此时你该如何操作?记录日志-没有将浏览器当前的状态进行截图来的直观! 那么,selenium截取截屏,有哪些方 ...
- Spring Cloud第六篇 | Hystrix仪表盘监控Hystrix Dashboard
本文是Spring Cloud专栏的第六篇文章,了解前五篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cloud ...
- [TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...
- leaflet图斑历史时空播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- 第5节：Java基础 - 必知必会（下）
第5节:Java基础 - 必知必会(下) 本小节是Java基础篇章的第三小节,主要讲述Java中的Exception与Error,JIT编译器以及值传递与引用传递的知识点. 一.Java中的Excep ...
- 回文自动机(PAM) 入门讲解
处理回文串,Manacher算法也是很不错,但在有些问题的处理上比较麻烦,比如求本质不同的子串的数量还需要结合后缀数组才能解决.今天的们介绍一种能够方便的解决关于回文串的问题的算法--PAM. 一些功 ...