设计达人

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. Spring事务解析3-增强方法的获取

    从InfrastructureAdvisorAutoProxyCreator的层次结构中可以看到,InfrastructureAdvisorAutoProxyCreator间接实现了SmartInst ...

  2. BZOJ 2342 回文串-Manacher

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2342 思路:先跑一遍Manacher求出p[i]为每个位置为中心的回文半径,因为双倍回文串 ...

  3. Console.log，Window.alert，Document.write三者区别

    1.Console.log不会阻断程序继续进行,在控制台可以看到测试结果. 2.Window.alert弹出框会阻断程序运行,在弹出框可以看到测试结果. 3.Document.write不会阻断程序继 ...

  4. [技术学习]js正则表达式汇总

    一.常用正则表达式关键字 ".":任意字符 "*":任意个数 "+":任意个数,至少一个 "?":0-1个 " ...

  5. PHP 二分查找(详细)

    <?php //        PHP 二分查找 function search($arr, $sea){ $low = 0;                // 确定数组的开始的下标 $len ...

  6. CSS3-给网页添加图片

    给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...

  7. 8VC Venture Cup 2016 - Final Round (Div. 2 Edition)

    暴力 A - Orchestra import java.io.*; import java.util.*; public class Main { public static void main(S ...

  8. 贪心 Codeforces Round #288 (Div. 2) B. Anton and currency you all know

    题目传送门 /* 题意:从前面找一个数字和末尾数字调换使得变成偶数且为最大 贪心:考虑两种情况:1. 有偶数且比末尾数字大(flag标记):2. 有偶数但都比末尾数字小(x位置标记) 仿照别人写的,再 ...

  9. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  10. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...