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> ...
随机推荐
- AngularJS学习之HTML DOM
1.AngularJS为HTML DOM元素的属性提供了绑定应用数据的指令: 2.ng-disabled指令:直接绑定应用程序数据到HTML的disable属性: <div ng-app=&qu ...
- CSS 样式使用
[attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. ...
- 【转】Docker 常用命令
转载: http://blog.csdn.net/zhang__jiayu/article/details/42611469 docker images:列出本地所有镜像 docker searc ...
- NUC_HomeWork1 -- POJ2067(最短路)
C - Fire Station Description A city is served by a number of fire stations. Some residents have comp ...
- 福建红色文化VR/AR实体体验馆正式启用
(12月13日),福建红色文化网上展示馆上线暨福建红色文化VR/AR实体体验馆启动仪式在福建省革命历史纪念馆举行.省委常委.宣传部长高翔出席仪式并宣布启动上线. 福建红色文化网上展示馆和VR/AR实体 ...
- ACM: 还是畅通工程-并查集-最小生成树-解题报
还是畅通工程 Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description 某省调查乡村交通 ...
- [知识点]C++中的运算符
1.前言 之前最开始学习语法和基础知识的时候,基本上最简单的运算符有所接触,当时对于位运算这种东西完全没有概念.今天对C++中出现的部分运算符尤其是位运算符进行一些总结. 2.+ - * / % 这些 ...
- BZOJ 1012 题解
1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 8468 Solved: 3702[Submi ...
- iOS 开发技巧总结
1.添加定时器的常用代码 - (void)delayEnableTabButton { self.tabChannelButton.enabled = NO; [self appendTimer]; ...
- mysql的小总结
1.什么是数据库 ? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数 ...