CSS布局-tutorial css-php.cn

一. 概述一下理念

bootstrap基于H5开发。提倡移动先行（媒询声明是必须的），对浏览器支持面不是很广。

响应式图片：max-width:100% height:auto;

可以加上：.img-responsive类

排版方面的基本样式为：

body的margin为0，背景色为白色，行间距为20/14倍

使用Normalize.css库，使各个浏览器差别最小化

居中容器container有一个最大范围。（最大左右margin为auto，和设备有关）

二. 文字基础排版（全局设置）

1.标题（h标记和small标记）

<h1>header1<small>small标记的副标题</small></h1>
<h2>header2<small>small标记的副标题</small></h2>
<h3>header3<small>small标记的副标题</small></h3>
<h4>header4<small>small标记的副标题</small></h4>
<h5>header5<small>small标记的副标题</small></h5>
<h6>header6<small>small标记的副标题</small></h6>

Salin selepas log masuk

所有标题元素里的内容的字体颜色都是灰色（#999999），行间距都为1。

内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%；而在h4、h5、h6下则是75%。

A. 字体大小为14px，间距为20px。p元素的margin-bottom为行间距一半（10px）。

B. 突出显示

当你有一段文字，想高亮显示，又不想获得和h标记一样的权重时，可以class="lead"

<span class="lead">email me</span>

Salin selepas log masuk

如图.lead和h1的对比效果：

2. 强调文本

3. 缩略语abbr和.initialism

两者都可以实现下划虚线悬停手型效果需要搭配title属性使用。

4. 地址address

用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。

<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr>(123) 456-7890
</address>
<address>
    <strong>汤姆大叔</strong><br>
    <a href="mailto:#">tomxu@outlook.com</a>
</address>

Salin selepas log masuk

效果如图

5. 引用blockquote

引用的一般格式是

<blockquote>
    <p>爱情不是你想买想买就能买</p>
    <small>出自<cite>爱情买卖</cite></small>
</blockquote>

Salin selepas log masuk

当然，small换成footer也是一样的效果。

默认是左对齐的，想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。

6. 列表

（1）ul-li无序列表

bootstrap下，普通列表的ul-li框架和默认基本是一样的。

A. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。

注意：如果是列表嵌套列表，对祖父级的ul应用.list-unstyle类，孙代li是不会继承的。

B. 内联列表：正常的ul-li是竖着显示的。在很多场合，最典型的就是导航，需要把li打横排列。这时可以使用内联列表的.list-inline类

 
<ul class="list-inline">
            <li>home</li>
            <li>article</li>
            <li>about</li>
        </ul>

Salin selepas log masuk

（2）有序列表ol-li

更换了字体，显示更加柔和

（3）dl-dt-dd定义列表

定义列表包括了描述信息，bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。

<dl>
    <dt>标题1</dt>
    <dd>描述1</dd>
    <dt>标题2</dt>
    <dd>描述2</dd>
    <dt>标题3</dt>
    <dd>描述3</dd>
</dl>

Salin selepas log masuk

我想在横向展示一个商品列表，包括描述信息。如果给dl加上class="dl-horizontal"

7. 代码

包括code单行代码，kbd用户输入代码和pre多行代码块。

代码样式的用法示例如下：

<code><body></body></code><br>
<kbd><body></body></kbd>
<pre class="brush:php;toolbar:false"><body></body>

Salin selepas log masuk

（1）code

code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色

（2）kbd

kbd表示需要用户输入，可以配合input元素使用。

请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码

Salin selepas log masuk

（3）多行代码块pre

pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。

粘贴进去会有空格。

类似还有可以格式化代码。用较为标准的字体和行间距显示

8.其它H5标记补充

（1）,也可以使用.mark

<span style="font-family: "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", å¾®è½¯é›…é»‘, Tahoma, Arial, sans-serif;"><p class="mark">this is mark text</p></span><br/>

Salin selepas log masuk

（2）del标记和s标记

<del>I am delated.</del>

Salin selepas log masuk

（3）ins标记和u标记

下划线，ins定义已经被插入文档中的文本。u标记语义和ins不同，如果文本不是超链接，就不要对其使用u标记

（4）对齐相关

——text-left

——text-center

——text-right

文本居左中右。

——text-justify：自己判断——齐行定义单词间的间隔对齐，跟避头尾法则类似。注意css3中也有相应的属性。

——text-nowrap：浏览器缩小时始终保持1行

（5）大小写相关：

text-lowercase小写

text-uppercase大写

text-capitalize首字母大小

【例3.1】文本排版练习

<div class="text-justify">
        <h3 class="text-center">I am afraid <small>William Shakespeare</small></h3>
        <p class="text-capitalize">you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</p>
        <p><mark>This is why I am afraid, you say that u love me too.</mark></p>
        <ins><em>译文</em></ins>
        <p>你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。</p>
        <p>你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。</p>
</div>

Salin selepas log masuk

三. 表格相关css

表格实现是给table加上.table类

【例3.2】做一个5行5列的表格，记录信息

<table>
                    <thead><tr>
                        <td>ID</td>
                        <td>TITLE</td>
                        <td>AUTHOR</td>
                        <td>PUBDATE</td>
                        <td>PRICE</td>
                    </tr></thead>
                     
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>西游记</td>
                            <td>吴承恩</td>
                            <td>10.99</td>
                            <td>2010-1-1</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>20.99</td>
                            <td>2010-1-2</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>水浒传</td>
                            <td>施耐庵</td>
                            <td>30.99</td>
                            <td>2010-1-3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>红楼梦</td>
                            <td>曹雪芹</td>
                            <td>40.99</td>
                            <td>2010-1-4</td>
                        </tr>
                    </tbody>
                </table>

Salin selepas log masuk

无任何class样式时显示：

1.table基础样式

（1）给table标签加上class="table"，效果就变为：

秒变高富帅了有木有？

（2）隔行变色.table-striped

table-striped：斑马线

使用CSS3的:nth-child实现。

（3）添加边框

使用.table-bordered可以为所有单元格添加1px的边框。

（4）悬停高亮

使用.table:hover可以让当前行悬停高亮

（5）紧凑型表格

table-condensed:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。

代码清单

<table class="table table-bordered table-striped table-hover table-condensed">
                    <thead><tr>
                        <td>ID</td>
                        <td>TITLE</td>
                        <td>AUTHOR</td>
                        <td>PUBDATE</td>
                        <td>PRICE</td>
                    </tr></thead>
                      
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>西游记</td>
                            <td>吴承恩</td>
                            <td>10.99</td>
                            <td>2010-1-1</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>20.99</td>
                            <td>2010-1-2</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>水浒传</td>
                            <td>施耐庵</td>
                            <td>30.99</td>
                            <td>2010-1-3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>红楼梦</td>
                            <td>曹雪芹</td>
                            <td>40.99</td>
                            <td>2010-1-4</td>
                        </tr>
                    </tbody>
                </table>

Salin selepas log masuk

2.行级元素tr的样式

（1）.active

表示当前激活的信息。跟鼠标悬停.table-hover显示的样式一样（较深的灰色）

（2）.success

<tr class="success">
                            <td>2</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>20.99</td>
                            <td>2010-1-2</td>
                        </tr>

Salin selepas log masuk

（3）.info

如果给table添加info的class

（4）.warning

warning显示为黄色

（5）.danger

小结：如果table应用了table-hover当鼠标悬停时相应的颜色也会加深一点，如果应用了table-striped，在高亮行使用tr样式，原来的浅灰色会被覆盖。

3.响应式的表格

表格过宽时，一味地自适应是不现实的。

把table标签用一个容器包装，容器class命名为.table-responsive
加了之后在大屏幕显示有了1px solid black的边框。在屏幕小于768时消失，在768px时出现滚动条.（注在四大名著表格中是直到330px才出现滚动条。）

【例3.3】一个超简单布局练习——第一个bootstrap网页

如图实现布局。

<body class="container">
    <header>
        <h1>Bootstrap <em>Css </em><small>Type</small></h1>
    </header>
     
    <div class="row">
        <div class="col-sm-2">
            <div>
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">link1</a></li>
                    <li class="list-group-item"><a href="#">link2</a></li>
                    <li class="list-group-item"><a href="#">link3</a></li>
                    <li class="list-group-item"><a href="#">link4</a></li>
                </ul>
                <!--列表组：list-group
                    list-group-item：单个列表元件-->
            </div>
 
        </div>
 
        <div class="col-sm-6">
            <blockquote>
                <p>Book List</p>
                <small>from <em>BookStore</em></small>
            </blockquote>
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bodered">
                    <thead>
                        <tr><td>Id</td>
                            <td>Title</td>
                            <td>Author</td>
                            <td>Proce</td>
                            <td>PubDate</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>红楼梦</td>
                            <td>曹雪芹</td>
                            <td>30</td>
                            <td>2014</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>西游记</td>
                            <td>吴承恩</td>
                            <td>25</td>
                            <td>2013</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>水浒传</td>
                            <td>施耐庵</td>
                            <td>24</td>
                            <td>2012</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>35</td>
                            <td>2015</td>
                        </tr>
                         
                    </tbody>
                </table>
            </div>
        </div>
 
        <div class="col-sm-4">
            <dl><h2>Figure</h2>
                <dt>html
                    <dd>hyper text markup language</dd>
                </dt>
                <dt>javascript
                    <dd>ecmaScript dom bom</dd>
                </dt>
                <dt>bootstrap
                    <dd>basic css componment jsplugin</dd>
                </dt>
            </dl>
 
            <blockquote class="pull-right">
                <h4>From Djtao</h4>
                <footer>Form <em>Sublime</em></footer>
            </blockquote>
        </div>
    </div>
 
    <footer class="navbar-fixed-bottom text-center">
        <p>&copy;<abbr title="djtao.top/wordpress">DJTAO</abbr></p>
    </footer>
 
    <!--基于jQuery的脚本文件  -->
    <script src="scripts/jquery.min.js"></script>
    <!-- bootstrap的jq插件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--自定义脚本文件  -->
    <script src="scripts/js.js"></script>
</body>

Salin selepas log masuk

【例3.4】进阶：购物单的模拟实现

任务描述：网站常见的购物车经常有删除操作。大于30元的货物以警告红显示，否则显示成功绿。网站根目录下一个json文件夹，里面的books.json文件包含下列信息：

[
    {
        "Id": 1,
        "Title": "红楼梦",
        "Price": 10.0
    }, {
        "Id": 2,
        "Title": "西游记",
        "Price": 20.0
    }, {
        "Id": 3,
        "Title": "三国演义",
        "Price": 30.0
    }, {
        "Id": 4,
        "Title": "水浒传",
        "Price": 40.0
    }
]

Salin selepas log masuk

从json读取数据，返回到表格中。制作一个如图所示的模拟删除效果。

先补充一点知识

Query中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据，它使用的是GET HTTP请求。使用方法如下：

$.getJSON( url ,[ data ] ,[ success(data, textStatus, jqXHR) ] )

Salin selepas log masuk

url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可选参数，这是一个回调函数，用于处理请求到的数据。

获取json数据举例：

$.getJSON(&#39;test.json&#39;, function(data){
   for (var i = 0; i < data.rows.length; i++) {
      $(&#39;#test&#39;).append(&#39;<p>&#39; + data.rows[i].realName + &#39;</p>&#39;);
   }
});

Salin selepas log masuk

（1）首先，需要获取json数据。

$.getJSON("json/books.json",null,function (data){
    ...
}）

Salin selepas log masuk

在获取json成功时执行回调函数。

（2）在html文档的body中创建一个div表格区。

<div id="divBookList" class="table-responsive">
                 
</div>

Salin selepas log masuk

（3）思考下一个预想中的表格是怎样的。

<table class="table table-striped table-bodered tablel-hover">
    <thead>
      <tr><td></td></tr>
      ...
      <tr><td></td></tr>
    </thead>
    <tbody>
      <tr><td></td></tr>
      ...
      <tr><td></td></tr>
    <tbody></table>

Salin selepas log masuk

根据这一思想创建表头。把它加进html文档中。

var $tbl=$(&#39;<table>&#39;)//创建表格
            .addClass(&#39;table table-hover table-striped&#39;);//创建表格基本样式
        var $theadTr=$(&#39;<tr>&#39;).addClass(&#39;success&#39;)
            //定义父元素<tr class=&#39;success&#39;></tr>
                .append($(&#39;<td>&#39;).html(&#39;Id&#39;).addClass(&#39;danger&#39;))
                //创建一个<td class="danger">Id</td>加到父元素中
                .append($(&#39;<td>&#39;).html(&#39;Title&#39;).addClass(&#39;warning&#39;))
                //创建一个<td class="warning">Title</td>添加到父元素
                .append($(&#39;<td>&#39;).html(&#39;Price&#39;).addClass(&#39;info&#39;));
                //创建一个创建一个<td class="info">Price</td>添加到父元素
        var $thead=$(&#39;<thead></thead>&#39;);
        $thead.append($theadTr);
        $tbl.append($thead);

Salin selepas log masuk

（4）接下来要把json返回的data数据添加到tbody。

注意：按理来说，一个表格的tbody是必须创建的。如果在浏览器中查看livescript，你会发现除了thead，tfoot之外的表格主体全都包了一层tbody。但是这里就不创建了。心里清楚就好。

本例中books.json数据引入后，表述形式为data[0].Title=‘西游记’

一共有四组元素，需要遍历，用的是$.each(index,Obj)方法。需要说明的是$.each()是数组遍历的方法，两个参数不可省略,index表述索引值，Obj才是每组对象的主体。引用形式为：Obj[index].属性

$(data).each(function (index,book){}

Salin selepas log masuk

（5）在each的函数内书写创建表格主体的代码

var $tr=$(&#39;<tr></tr>&#39;)//创建一行
   .append($("<td>").html(book.Id))        //添加编号列
   .append($("<td>").html(book.Title));    //添加标题列

Salin selepas log masuk

通过这三行代码，除了price外所有的json元素都添加到表格中了。

价格是需要判断后才能给添加样式。超过30块的用红色背景，否则用绿色。

if(parseInt(book.Price)>=30){
                $tr.append($("<td>").html(book.Price).addClass("danger"));
            }else{
                $tr.append($("<td>").html(book.Price).addClass("success")); 
            }//添加价格列

Salin selepas log masuk

（6）接下来处理按钮

新创建的一列按钮需要加以下内容：

1.红色的button按钮，内容为remove；

2.为按钮绑定id

3.字体图标（class=glyphicon glyphicon-remove）

var $td=$(&#39;<td></td>&#39;);
            var $btn=$("<button>").attr(&#39;data-id&#39;,book.Id).addClass(&#39;btn btn-danger&#39;);
            //定义按钮btn的样式。
             
            var $span1=$(&#39;<span></span>&#39;).addClass("glyphicon glyphicon-remove");
            $btn.append($span1);//添加按钮的图标字体。
 
            var $span2=$($(&#39;<span>remove</span>&#39;));
            $btn.append($span2);//添加按钮的文字内容

Salin selepas log masuk

（7）点击事件

点击事件处理两个问题

a. 弹出当行id信息；b.当列消失。

$btn.click(function(){//配置按钮点击事件
                var id=$(this).attr("data-id");//获取按钮绑定的Id
 
                alert(&#39;您删除的书库编号为:&#39;+id); //弹出id
 
                $(this).parent().parent().fadeOut(600);}//隐藏当前行

Salin selepas log masuk

（8）点击函数结束后，添加表格主体到tbl中

$td.append($btn).appendTo($tr);
            $tbl.append($tr);

Salin selepas log masuk

最后在回调函数最下面，把整个表格加到网页中表格区

$tbl.appendTo($(&#39;#divBookList&#39;));

Salin selepas log masuk

基本要求就算做完了。

【改进】有明显的问题需要改进，就是数字编号。删除之后没有重排。为此需要重新整理点击事件

思路：需要一点原生js的操作。

（1）用两个计数器，count1读取，count2写入

（2）通过count2来获取当前页面可见的行数，作为购物车的物品数。但是fadeout执行需要时间，如果马上判断，就会误把正在消失的那行计入count2

（3）解决思路是，让计数器程序等到删除行消失之后延迟一点点时间再执行。比如说删除行fadOut(600)消失时间是600ms，我就通过Timout延迟620ms执行。

var oTab=document.getElementsByTagName(&#39;table&#39;)[0];
                var aRows=oTab.tBodies[0].rows;
                 
                var count1=$(this).parent().siblings().eq(0).html();
                // 把当前书籍序号加到count2上面
                // this.parentNode.parentNode.firstChild.innerHTML;
 
                alert(&#39;您删除的是购物车内第&#39;+count1+&#39;本书。书库编号为:&#39;+id); //弹出id
                // $.post("url?id="+id,null,function(){
                //     //删除成功后处理的回调函数
                //      });)
                $(this).parent().parent().fadeOut(600);//隐藏当前行
                setTimeout(function(){
                     var count2=0;
                for(i=0;i<aRows.length;i++){
                    if(aRows[i].style.display!==&#39;none&#39;){
                        count2+=1;
                        aRows[i].cells[0].innerHTML=count2;
                    }}
                },620)

Salin selepas log masuk

其它的改进：给表头第四列加一个内容名为“操作”

改进后的效果：

代码清单：

$(function(){
    //创建json,不返回任何操作
    $.getJSON("json/books.json",null,function (data){
        //读取成功时的成功时的回调函数
        var $tbl=$('')//创建表格
            .addClass('table table-hover table-striped');//创建表格基本样式
        var $theadTr=$('').addClass('success')
            //定义父元素
                .append($('加到父元素中
                .append($('添加到父元素
                .append($('添加到父元素
                .append($('');
        $thead.append($theadTr);
        $tbl.append($thead);
 
        $(data).each(function (index,book){
            var $tr=$('')//创建一行
                .append($("');
            var $btn=$("
').html('Id').addClass('danger'))
                //创建一个 Id ').html('Title').addClass('warning'))
                //创建一个 Title ').html('Price').addClass('info'))
                //创建一个创建一个 Price ').html('Operate').addClass('active'));
        var $thead=$('
").html(book.Id))        //添加编号列
                .append($(" ").html(book.Title));    //添加标题列
 
            if(parseInt(book.Price)>=30){
                $tr.append($(" ").html(book.Price).addClass("danger"));
            }else{
                $tr.append($(" ").html(book.Price).addClass("success")); 
            }//添加价格列
 
            /*新创建的一列需要加以下内容：
            1.红色的button按钮，内容为remove；
            2.字体图标（class=glyphicon glyphicon-remove）
            3.点击事件：（1）弹出删除信息；（2）当列消失。
            */
            var $td=$('

').html('Id').addClass('danger')) //创建一个	Id	').html('Title').addClass('warning')) //创建一个	Title	').html('Price').addClass('info')) //创建一个创建一个	Price	').html('Operate').addClass('active')); var $thead=$('
").html(book.Id)) //添加编号列 .append($("	").html(book.Title)); //添加标题列 if(parseInt(book.Price)>=30){ $tr.append($("	").html(book.Price).addClass("danger")); }else{ $tr.append($("	").html(book.Price).addClass("success")); }//添加价格列 /新创建的一列需要加以下内容： 1.红色的button按钮，内容为remove； 2.字体图标（class=glyphicon glyphicon-remove） 3.点击事件：（1）弹出删除信息；（2）当列消失。 / var $td=$('