Bootstrap css栅格 + 网页中插入代码+css表格
设计达人
http://www.shejidaren.com/30-minimal-app-icons.html
CSS栅格：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head> <style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0px;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
}
</style> <body>
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
</div>
</body> </html>
CSS网页中插入代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head> <body>
<div class="container">
<!--内联代码-->
For example <code><section></code>as inline;
</br>
我希望现在能键入<kbd>cmd</kbd>命令
<pre>
Sample text here...代码段
</pre> <var>x</var> = <var>y</var>+<var>z</var>
</br>
<samp>输出：Hello world</samp>
</div>
</body> </html>
CSS表格：
1.
2.3.4
5.表格紧凑，6.警告提醒等颜色
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head> <body>
<div class="container">
<table class="table table-striped table-bordered table-hover">
<!--1无边框表格,2斑马线,3加边框,4鼠标悬停-->
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
</body> </html>
7.表格滚动条：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head> <body>
<div class="container table-responsive">
<!--表格-->
<table class="table table-striped table-bordered table-hover table-condensed">
<!--1无边框表格,2斑马线,3加边框,4鼠标悬停,
5表格紧凑，6警告提醒等颜色
-->
<thead>
<tr class="active">
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>表格单元格表格标题表格标题</td>
<td>表格单元格表格标题表格标题</td>
<td>表格单元格表格标题表格标题</td>
</tr>
<tr class="warning">
<td>表格单元格表格标题</td>
<td>表格单元格表格标题</td>
<td>表格单元格表格标题</td>
</tr>
<tr class="danger">
<td>表格单元格表格标题</td>
<td>表格单元格表格标题</td>
<td>表格单元格表格标题</td>
</tr>
<tr class="success">
<td>表格单元格表格标题</td>
<td>表格单元格表格标题</td>
<td>表格单元格表格标题</td>
</tr>
</tbody>
</table>
</div>
</body> </html>
Bootstrap css栅格 + 网页中插入代码+css表格的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- CSS在网页中应用的方式_嵌入式
内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...
- 网页中插入Flash动画（.swf）代码和常用参数设置
我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...
- 使用<script>标签在HTML网页中插入JavaScript代码
新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...
- 在网页中插入背景音乐代码(html)
有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如 ...
- prism.js——让网页中的代码更好看
粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...
- 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素
一:网页中插入flash代码如下: 当然里面的很多属性可以去掉,根据具体的需求而定. 我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...
- [转载]在网页中插入media，RealPlayer等控件
[转载]在网页中插入media,RealPlayer等控件 (2012-11-02 20:27:43) 转载▼ 标签: 转载 原文地址:在网页中插入media,RealPlayer等控件作者:Mo ...
- 网页中插入javascript的几种方法
网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...
随机推荐
- AndroidTips：解决Dialog全屏显示以及Dialog显示自动弹出输入法
继承实现一个dialog,并在onCreate里面做处理. @Override protected void onCreate(Bundle savedInstanceState) { s ...
- DOM--6 向应用程序中加入ajax
组合技术 适当的ajax时对已有技术和下列思想的组合 语义化(X)HTML标记 文档对象模型(DOM) JavaScript XML 不同浏览器中,公共XMLHttpRequest方法 open(me ...
- .NET方向高级开发人员面试时应该事先考虑的问题
(澄清一下,我发帖的目的不是用来专门给人评价这些问题的好坏的,实际上我所在 的公司就考察这些问题.而能够基本上答出来的可以说百里挑一.如果各位觉得这些问题很简单,那么基本上在.NET面试环节就没有什么 ...
- dede表单修改默认必填
默认的dedecms自定义表单却没有必填项的设置,如果要设置织梦自定义表单的必填项,需要进行额外的修改! 方法一:通过修改程序源文件实现 1.在plus文件夹下找到diy.php文件,对其进行编辑,在 ...
- c# 修饰词public, protected, private,internal,protected的区别
public: 对任何类和成员都公开, 无限制访问;protected: 仅仅对该类以及该类的派生类公开;private: 仅仅对该类公开;internal: 只能值包含该类的程序集中访问该类(只是 ...
- The 2015 China Collegiate Programming Contest H. Sudoku hdu 5547
Sudoku Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Subm ...
- BZOJ4231 : 回忆树
一个长度为$|S|$的串在树上匹配有两种情况: 1.在LCA处转弯,那么这种情况只有$O(|S|)$次,暴力提取出长度为$2|S|$的链进行KMP即可. 2.不转弯,那么可以拆成两个到根路径的询问. ...
- requestAnimationFrame制作动画：旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
- 关于jQuery的inArray 方法介绍
例如: 代码如下: $.get('aaaaa.ashx',null,function(d){ // 假设d 返回 的值为 1,3,43,23,54,67 var arr = d.split(','); ...
- 彻底弄明白之数据结构中的KMP算法
如何加速朴素查找算法? KMP,当然还有其他算法,后续介绍. Knuth–Morris–Pratt string search algorithm Start at LHS of strin ...