网页布局，第三周。

静态网页布局

1.兼容性

常见的浏览器兼容问题
    所谓的浏览器兼容性问题，是指由于不一样的浏览器对同⼀段代码有不一样的解析，形成⻚⾯显⽰效果不统⼀的状况。
问题⼀：不一样浏览器的标签默认的外补丁和内补丁不一样
    CSS⾥ *{margin:0;padding:0;}
    备注：这个是最多见的也是最易解决的⼀个浏览器兼容性问题，⼏乎全部的CSS⽂件开头都会⽤通配符*来设置各个标签
    的内外补丁是0。
     CSS hack
    我不多使⽤hacker的，多是个⼈习惯吧，我不喜欢写的代码IE不兼容，而后⽤hack来解决。不过hacker仍是⾮常好⽤
    的。使⽤hacker我能够把浏览器分为3类： IE6 ； IE7和遨游；其余（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
    ◆IE7 遨游认识的hacker是星号 
    2.条件注释
    <!--[if lte IE 6]> 这段⽂字仅显⽰在 IE6及IE6如下版本。  <![endif]-->
    <!--[if gte IE 6]> 这段⽂字仅显⽰在 IE6及IE6以上版本。  <![endif]-->
    <!--[if gt IE 6]> 这段⽂字仅显⽰在 IE6以上版本（不包含IE6）。  <![endif]-->
    <!--[if IE 5.5]> 这段⽂字仅显⽰在 IE5.5。  <![endif]-->
    <!--在 IE6及IE6如下版本中加载css-->
    <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
    缺点是在IE浏览器下可能会增长额外的HTTP请求数。

2.less和sass

less
1.变量
        声明：@nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    #header { color: @light-blue; }
    输出：
    #header { color: #6c94be; }
**2.混合**
    .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
    而后把你须要的标题进行调试
    #menu a {
        color: #111;
        .bordered;
    }
    .post a {
        color: red;
        .bordered;
    }
    经过koala进行编译，刷新后：
    #menu a {
        color: #111;
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }
    .post a {
        color: red;
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }
**3.带参数混合**
    在 LESS 中，你还能够像函数同样定义一个带参数的属性集合.
        .border-radius (@radius) {
        border-radius: @radius;
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
    }
    而后在其余 class 中像这样调用它：
    #header {
        .border-radius(4px);
    }
    .button {
        .border-radius(6px);
    }
方法2：
    .border-radius (@radius: 5px) {
        border-radius: @radius;
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
    }
    因此如今若是咱们像这样调用它的话：
    #header {
        .border-radius;
    }
###全部的标签都必须是先声明后使用；必须经过koala这个中间媒介才能完成less的使用，若是说想要在一个less文件里导入一个副的less文件；声明部分书写@inport：“文件名”

2.sass

和less同样，只是前缀名改成了$

3.网页布局

1.布局

12列式间距20px 3 6 3三格式布局——经常使用
16列式：间距20px 3 3 6 4 四个是布局
24列式和36列式不经常使用

2.bootstrap

bootstrap是目前应用比较普遍的一种框架
是基于jquery封装的一种框架是采用12列式自带响应式布局的框架
引入bootstrap文件：
一个css文件两个js文件
.min文件是压缩过的文件包特色就是方便使网页加载速度更快

3.兼容IE

两种方法：
在utf-8以前写上<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if it IE9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>(针对ie8)
<![endif]-->

4.容器 用container爆过页面上的内容可实现居中对齐 5.推和拉 .col-md-push-格数 .col-md-pull-格数 他们都是对前一个元素进行的操做 6.列偏移 .col-md-offset-格数 相对前一元素进行的偏移