1.bootstrap做了一个表格

花了一下午做了一个表格：大致是这样：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>广发互联小贷</title>

<meta name="keywords" content="广发互联小贷" />

<meta name="description" content="广发互联小贷" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="#ffa74d">

<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<style>

	tr td {

		vertical-align: middle !important;

	}

	.warning td[rowspan]:first-child {

		background-color: #d9edf7;

	}

	.col-xs-full{

		padding: 0

	}

	.label-addition {

		font-size: 22px;

    	padding: 10px 0;

	}

</style>

<body>

	<div class="container-fluid">

		<div class ="row">

			<div class="col-md-12 label-primary text-center label-addition">

				<h1 class="label">零售系统运营数据-关键指标</h1>

			</div>

			<div class="col-xs-12 col-xs-full">

				<div class="table-responsible">

					<table class="table table-bordered" align="center">

						<thead>

							<tr class="info">

								<th colspan=2>零售系统-运营</th>

								<th>累计</th>

								<th>2016/8/14</th>

							</tr>

						</thead>

						<tbody>

							<tr>

								<td rowspan=3 class="info">注册</td>

								<td>关注微信公众号用户量</td>

								<td>1580</td>

								<td>23</td>

							</tr>

							<tr class="warning">

								<td>注册成功用户量</td>

								<td>735</td>

								<td>2</td>

							</tr>

							<tr>

								<td>注册转化率(注册成功/关注公众号)</td>

								<td>24.49%</td>

								<td>23.31%</td>

							</tr>

							<tr class="warning">

								<td rowspan=4>授信</td>

								<td>授信申请笔数</td>

								<td>387</td>

								<td>11</td>

							</tr>

							<tr>

								<td>授信通过笔数</td>

								<td>221</td>

								<td>7</td>

							</tr>

							<tr class="warning">

								<td>授信总额度(万元)</td>

								<td>11491</td>

								<td>326</td>

							</tr>

							<tr>

								<td>平均授信额度(万元)</td>

								<td>52.00</td>

								<td>46.00</td>

							</tr>

							<tr class="warning">

								<td rowspan=3>放款</td>

								<td>放款笔数</td>

								<td>183</td>

								<td>128</td>

							</tr>

							<tr>

								<td>放款总金额(万元)</td>

								<td>6921</td>

								<td>59</td>

							</tr>

							<tr class="warning">

								<td>笔均放款金额(万元)</td>

								<td>37.82</td>

								<td>14.75</td>

							</tr>

						</tbody>

					</table>

				</div>

			</div>

		</div>

	</div>

	<script src="js/deps/zepto.js"></script>

	<script type="js/deps/bootstrap.min.js"></script>

	<script src="js/statistics/genernal.js"></script>

</body>

</html>

以后遇到类似的表格就可以参考下了。

2.Font Awesome3.0 使用

很多图标都可以下载直接使用。非常方便

bootstrap做了一个表格的更多相关文章

  1. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  2. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  3. Flask---使用Bootstrap新建第一个demo

    Flask---使用Bootstrap新建第一个demo 参考自http://www.jianshu.com/p/417bcbad82fb 还有<Flask web开发> 前端用到Boot ...

  4. 如何将excel中的一个表格内容转成xml格式的文件

    转自:http://www.cnblogs.com/sansi/archive/2012/02/06/2340471.html 感谢作者,解决了折磨我几天的问题,顿时心情开朗~ ----------- ...

  5. 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/

    最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...

  6. 我做了一个 HTML 可视化编辑工具，有前途吗？

    疫情在家的这段时间,我做了一个 HTML 可视化编辑工具,做的时候信心满满,差不多完成了,现在反而不如以前信心足了,这玩意有用吗?代码地址: https://github.com/vularsoft/ ...

  7. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  8. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  9. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

随机推荐

  1. [Java入门笔记] Java语言基础（四）：流程控制

    流程控制指的是在程序运行的过程中控制程序运行走向的方式.主要分为以下几种: 顺序结构 顺序结构,顾名思义,是指程序从上往下逐步顺序执行.中间没有任何的判断和跳转. 分支结构 Java提供两种分支结构: ...

  2. 实战:rsync+inotify实现数据实时同步

    Linux 内核从 2.6.13 版本开始提供了 inotify 通知接口,用来监控文件系统的各种变化情况,如文件存取.删除.移动等.利用这一机制,可以非常方便地实现文件异动告警.增量备份,并针对目录 ...

  3. mysql在linux下的安装

    安装环境:系统是 centos6.5 1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6. ...

  4. 浏览器请求页面时Etag和cache的区别

    etag:简单的说就是服务器收到客户端的请求后,根据返回的内容计算出来一个etag值,返回给客户端,当客户端下次再请求相同路径的时候会带上之前的etag值,服务器端会根据这次请求应该返回的内容计算出新 ...

  5. nginx $document_uri 防止死循环

    $document_uri 表示访问的url 现在我的需求是,访问 www.xxx.com 请求到 www.xxx.com/bbs/ 在nginx配置文件中加入 if ($document_uri ! ...

  6. FeWeb基础之JavaScript简介

    FeWeb基础之JavaScript简介 1.JavaScript的基本介绍 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,它是通过嵌入或调入在标准的HTML语言中实现的.Ja ...

  7. px，em，rem

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...

  8. 输入url到页面返回的过程

    输入url后,你看到了百度的首页,那么这一切是如何发生的呢? 这个问题之前.最近.我想以后肯定还会被问到,或者问到这样的题目,如果在百度框里输入查询的字符串开始,是怎么返回你需要的东西呢. 那这什么个 ...

  9. Java迷宫游戏

    缘起: 去年(大三上学期)比较喜欢写小游戏,于是想试着写个迷宫试一下. 程序效果: 按下空格显示路径: 思考过程: 迷宫由一个一个格子组成,要求从入口到出口只有一条路径. 想了一下各种数据结构,似乎树 ...

  10. Shell（C++实现，CodeBlocks+GCC编译）

    程序效果: 只实现了login .cd .ls .cat 四个命令.而且只能在 Windows 下运行. 代码: //main.cpp 1 #include <iostream> #inc ...