網頁佈局，第三週。

靜態網頁佈局

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-格數 相對前一元素進行的偏移