X-man

导航

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>&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>
View Code

 

posted on 2015-07-28 19:43  雨钝风轻  阅读(509)  评论(0)  编辑  收藏  举报