设计达人

http://www.shejidaren.com/30-minimal-app-icons.html

CSS栅格：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.         <title>Bootstrap的HTML标准模板</title>
  9.         <!-- Bootstrap -->
  10.         <link href="css/bootstrap.min.css" rel="stylesheet">
  11.         <!--你自己的样式文件 -->
  12.         <link href="css/your-style.css" rel="stylesheet">
  13.         <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
  14.         <!--[if lt IE 9]>
  15.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  16.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  17.         <![endif]-->
  18.     </head>
  19.  
  20.     <style>
  21.         .row {
  22.             margin-bottom: 20px;
  23.         }
  24.         .row .row {
  25.             margin-top: 10px;
  26.             margin-bottom: 0px;
  27.         }
  28.         [class*="col-"] {
  29.             padding-top: 15px;
  30.             padding-bottom: 15px;
  31.             background-color: #eee;
  32.             background-color: rgba(86, 61, 124, .15);
  33.             border: 1px solid #ddd;
  34.             border: 1px solid rgba(86, 61, 124, .2);
  35.         }
  36.     </style>
  37.  
  38.     <body>
  39.         <div class="container">
  40.             <div class="row">
  41.                 <div class="col-md-1">col-md-1</div>
  42.                 <div class="col-md-1">col-md-1</div>
  43.                 <div class="col-md-1">col-md-1</div>
  44.                 <div class="col-md-1">col-md-1</div>
  45.                 <div class="col-md-1">col-md-1</div>
  46.                 <div class="col-md-1">col-md-1</div>
  47.                 <div class="col-md-1">col-md-1</div>
  48.                 <div class="col-md-1">col-md-1</div>
  49.                 <div class="col-md-1">col-md-1</div>
  50.                 <div class="col-md-1">col-md-1</div>
  51.                 <div class="col-md-1">col-md-1</div>
  52.                 <div class="col-md-1">col-md-1</div>
  53.                 <div class="col-md-1">col-md-1</div>
  54.                 <div class="col-md-1">col-md-1</div>
  55.             </div>
  56.         </div>
  57.     </body>
  58.  
  59. </html>

CSS网页中插入代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.         <title>Bootstrap的HTML标准模板</title>
  9.         <!-- Bootstrap -->
  10.         <link href="css/bootstrap.min.css" rel="stylesheet">
  11.         <!--你自己的样式文件 -->
  12.         <link href="css/your-style.css" rel="stylesheet">
  13.         <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
  14.         <!--[if lt IE 9]>
  15.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  16.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  17.         <![endif]-->
  18.     </head>
  19.  
  20.     <body>
  21.         <div class="container">
  22.             <!--内联代码-->
  23.             For example <code>&lt;section&gt;</code>as inline;
  24.             </br>
  25.             我希望现在能键入<kbd>cmd</kbd>命令
  26.             <pre>
  27.             Sample text here...代码段
  28.             </pre>
  29.  
  30.             <var>x</var> = <var>y</var>+<var>z</var>
  31.             </br>
  32.             <samp>输出：Hello world</samp>
  33.         </div>
  34.     </body>
  35.  
  36. </html>

CSS表格：

1.

2.3.4

5.表格紧凑，6.警告提醒等颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.         <title>Bootstrap的HTML标准模板</title>
  9.         <!-- Bootstrap -->
  10.         <link href="css/bootstrap.min.css" rel="stylesheet">
  11.         <!--你自己的样式文件 -->
  12.         <link href="css/your-style.css" rel="stylesheet">
  13.         <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
  14.         <!--[if lt IE 9]>
  15.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  16.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  17.         <![endif]-->
  18.     </head>
  19.  
  20.     <body>
  21.         <div class="container">
  22.             <table class="table table-striped table-bordered table-hover">
  23.                      <!--1无边框表格,2斑马线,3加边框,4鼠标悬停-->
  24.                 <thead>
  25.                     <tr>
  26.                         <th>表格标题</th>
  27.                         <th>表格标题</th>
  28.                         <th>表格标题</th>
  29.                     </tr>
  30.                 </thead>
  31.                 <tbody>
  32.                     <tr>
  33.                     <td>表格单元格</td>
  34.                     <td>表格单元格</td>
  35.                     <td>表格单元格</td>
  36.                     </tr>
  37.                     <tr>
  38.                     <td>表格单元格</td>
  39.                     <td>表格单元格</td>
  40.                     <td>表格单元格</td>
  41.                     </tr>
  42.                     <tr>
  43.                     <td>表格单元格</td>
  44.                     <td>表格单元格</td>
  45.                     <td>表格单元格</td>
  46.                     </tr>
  47.                     <tr>
  48.                     <td>表格单元格</td>
  49.                     <td>表格单元格</td>
  50.                     <td>表格单元格</td>
  51.                     </tr>
  52.                 </tbody>
  53.             </table>
  54.         </div>
  55.     </body>
  56.  
  57. </html>

7.表格滚动条：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.         <title>Bootstrap的HTML标准模板</title>
  9.         <!-- Bootstrap -->
  10.         <link href="css/bootstrap.min.css" rel="stylesheet">
  11.         <!--你自己的样式文件 -->
  12.         <link href="css/your-style.css" rel="stylesheet">
  13.         <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
  14.         <!--[if lt IE 9]>
  15.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  16.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  17.         <![endif]-->
  18.     </head>
  19.  
  20.     <body>
  21.         <div class="container table-responsive">
  22.             <!--表格-->
  23.             <table class="table table-striped table-bordered table-hover table-condensed">
  24.                 <!--1无边框表格,2斑马线,3加边框,4鼠标悬停,
  25.                          5表格紧凑，6警告提醒等颜色
  26.                      -->
  27.                 <thead>
  28.                     <tr class="active">
  29.                         <th>表格标题</th>
  30.                         <th>表格标题</th>
  31.                         <th>表格标题</th>
  32.                     </tr>
  33.                 </thead>
  34.                 <tbody>
  35.                     <tr class="info">
  36.                         <td>表格单元格表格标题表格标题</td>
  37.                         <td>表格单元格表格标题表格标题</td>
  38.                         <td>表格单元格表格标题表格标题</td>
  39.                     </tr>
  40.                     <tr class="warning">
  41.                         <td>表格单元格表格标题</td>
  42.                         <td>表格单元格表格标题</td>
  43.                         <td>表格单元格表格标题</td>
  44.                     </tr>
  45.                     <tr class="danger">
  46.                         <td>表格单元格表格标题</td>
  47.                         <td>表格单元格表格标题</td>
  48.                         <td>表格单元格表格标题</td>
  49.                     </tr>
  50.                     <tr class="success">
  51.                         <td>表格单元格表格标题</td>
  52.                         <td>表格单元格表格标题</td>
  53.                         <td>表格单元格表格标题</td>
  54.                     </tr>
  55.                 </tbody>
  56.             </table>
  57.         </div>
  58.     </body>
  59.  
  60. </html>

Bootstrap css栅格 + 网页中插入代码+css表格的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. CSS在网页中应用的方式_嵌入式

    内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...

  3. 网页中插入Flash动画（.swf）代码和常用参数设置

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  4. 使用<script>标签在HTML网页中插入JavaScript代码

    新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...

  5. 在网页中插入背景音乐代码(html)

    有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如 ...

  6. prism.js——让网页中的代码更好看

    粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...

  7. 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

    一:网页中插入flash代码如下:  当然里面的很多属性可以去掉,根据具体的需求而定.  我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...

  8. [转载]在网页中插入media，RealPlayer等控件

    [转载]在网页中插入media,RealPlayer等控件 (2012-11-02 20:27:43) 转载▼ 标签: 转载   原文地址:在网页中插入media,RealPlayer等控件作者:Mo ...

  9. 网页中插入javascript的几种方法

    网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...

随机推荐

  1. CentOS下Redis安装配置小结

    Redis是REmote DIctionary Server的缩写. 是一个使用 C 语言写成的,开源的 key-value 非关系型数据库.跟memcached类似,不过数据可以持久化. Redis ...

  2. VS2013单元测试及代码覆盖率分析--Xunit

    1,Javaweb中有jmeter.jacoco.ant.badboy等集成测试代码覆盖率的方式,C#代码的覆盖率怎么测试呢?VS2013的IDE上本身并未集成测试的工具,以下讲解VS2013中C#代 ...

  3. Android内存进程管理机制

    参考文章: http://www.apkbus.com/android-104940-1-1.htmlhttp://blog.sina.com.cn/s/blog_3e3fcadd0100yjo2.h ...

  4. mvn exec用法，运行jar后台驻留进程

    java工程如果打包成war,那依赖的jar包都会被包含进去. 不过如果开发java的后台驻留进程,那一般会打包成jar包的形式,要想在运行进程的时候找到所有的依赖包,基本有如下两种方式: 方式一: ...

  5. HIT2739 The Chinese Postman Problem（最小费用最大流）

    题目大概说给一张有向图,要从0点出发返回0点且每条边至少都要走过一次,求走的最短路程. 经典的CPP问题,解法就是加边构造出欧拉回路,一个有向图存在欧拉回路的充分必要条件是基图连通且所有点入度等于出度 ...

  6. django 后台管理

    修改 admin.py from myapp.models import * from django.contrib import admin # Register your models here. ...

  7. 【BZOJ1426】收集邮票 期望

    [BZOJ1426]收集邮票 Description 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的, ...

  8. 使用javamail发信过程中的一些问题及解决方法

    http://www.blogjava.net/TrampEagle/archive/2006/05/26/48326.html 今天在研究javamail发信的过程中,出现了一些小问题,现总结如下, ...

  9. box-sizing的相关属性

    box-sizing有三个属性,分别是:content-box,border-box,inherit (1)content-box:在宽度和高度之外绘制元素的内边距和边框(默认属性) (2)borde ...

  10. 学习js正则表达式

    function UrlRegEx(url) { //如果加上/g参数,那么只返回$0匹配.也就是说arr.length = 0 var re = /(\w+):\/\/([^\:|\/]+)(\:\ ...