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> ...
随机推荐
- json数据实际应用
JSON序列化输出 var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-sch ...
- iOS10 UI教程视图调试
iOS10 UI教程视图调试 iOS10 UI教程视图调试,当视图很复杂的时候,层次结构就不会很简单了.Xcode可以通过视图(View)调试帮助开发者解决层次结构复杂的问题.视图调试是在Xcode ...
- ZJOI2016 Round 1 之前
day 0 中午要出发了,很虚.. 主要原因: 1.在转语言 2.模板还没有系统整理过 3.最近代码能力感觉要狗带 4.急于想为联赛翻盘... MARK几个未完成的任务 1.字符串处理再去看看..实在 ...
- 键盘按钮keyCode大全，keyCode列表对照表
目录 [显示] 1js获取键盘按键对应的keyCode 2字母和数字键的键码值 3数字键盘上的键的键码值和功能键键码值 4控制键键码值 js获取键盘按键对应的keyCode <!doctype ...
- BestCoder Round #72 (div.2)
后面的题目补不懂了 暴力 1001 Clarke and chemistry 这题也把我搞死了..枚举系数判断就行了 #include <cstdio> #include <algo ...
- Trie + DP LA 3942 Remember the Word
题目传送门 题意:(训练指南P209) 问长字符串S能由短单词组成的方案数有多少个 分析:书上的做法.递推法,从后往前,保存后缀S[i, len-1]的方案数,那么dp[i] = sum (dp[i+ ...
- Linux 积累
Unable to locate package 解决办法: sudo apt-get update
- jQuery入门第三天
每个HTML元素根据继承属性都有父parent元素. 举个例子,h3 元素的父元素是 <div class="container-fluid">,<div cla ...
- linux建立ssh信任关系
一.建立SSH信任将A主机做为客户端(发起SSH请求 ip:192.168.200.170)将B主机作为服务器端(接收ssh请求 ip:192.168.200.149)以上以主动发起SSH登录请求 ...
- CentOS 6.6 下配置软RAID5
在虚拟机中增加4块5G的硬盘 安装依赖包 yum install -y parted mdadm 查看一下硬盘信息fdisk -l