设计达人

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>&lt;section&gt;</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表格的更多相关文章

  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. Liferay 6.2 改造系列之一：源码编译和服务启动

    一.导入源码 源码可以从Liferay的官方网站上下载.http://www.liferay.com/downloads/liferay-portal/available-releases 下载后解压 ...

  2. 制作caffe中的test.txt和val.txt

    find -name *.jpeg |cut -d '/' -f2-3> train.txt(图片在当前文件夹) find train/dog -name *.JPEG |cut -d '/' ...

  3. Uva 839 Not so Mobile

    0.最后输出的yes no的大小写 1.注意 递归边界   一直到没有左右子树 即b1=b2=false的时候 才返回 是否 天平平衡. 2.注意重量是利用引用来传递的 #include <io ...

  4. http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html

    http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html

  5. BZOJ2652 : 三角板

    首先旋转坐标系,假设$(x,y)$被$(X,Y)$遮挡等价于$X\leq x$且$Y\leq y$. 对于每种坐标系建立两棵线段树: 第一棵按$x$维护已经加入的点的$y$的最小值: 第二棵按$x$维 ...

  6. 20145308刘昊阳 《Java程序设计》第1周学习总结

    20145308刘昊阳 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 Java平台概论 1.1Java不只是语言 Java最早取名Oak,后改名Java Java三大平台J ...

  7. 关于禁止ipad的home键解决方法

    参考http://www.toolsandapplications.com/guided-access-how-to-disable-the-home-button-on-ipad/

  8. NOIp 2014 #3 寻找道路 Label:图论

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...

  9. 《深入浅出Windows Phone 8.1 应用开发》基于Runtime框架全新升级版

    <深入浅出Windows Phone 8.1 应用开发>使用WP8.1 Runtime框架最新的API重写了上一本<深入浅出Windows Phone 8应用开发>大部分的的内 ...

  10. Redis_Jedis使用总结

    目录:1.pipeline2.跨jvm的id生成器3.跨jvm的锁实现(watch multi)4.redis分布式 1. Pipeline 官方的说明是:starts a pipeline,whic ...