H5移動web開發

2D轉換

坐标系

在開發過程中，平面中的X軸和Y軸的方向跟平常數學中的方向不一樣，一般情況下：

X軸正方向：水準向右
Y軸正方向：垂直向下

移動

文法：
- transform 轉換；
- translate :移動固定的px值或者相對于自身寬度或者高度的百分數；

<style>

    /* 單獨使用 */
    /* 固定的PX值：正值，向右移動； */
    /* transform: translateX(100px); */
    /* 百分數：相對于自身寬高 */
    /* transform: translateX(200%); */
    /* transform: translateY(100%);
    
    /* 合起來寫 */
    /* transform: translate(100px, 100px); */
    /* transform: translate(-100px, -100px); */
    /* transform: translate(-50%, -50%); */
    /* transform: translate(50px, 100%); */
</style>

與定位的差別:
- 定位的元素會脫離标準流，在頁面中不占據位置，有可能會影響頁面中其他盒子的位置布局。
- transform:translate()不會脫離标準流，對其他盒子不會産生影響，可以用來微調頁面中的盒子。
- 定位會使行内元素變為塊級元素。
- transform:translate()對行内元素完全不起作用。

用移動實作盒子的居中

核心思想：用定位實作盒子居中的時候不用考慮盒子本身的寬高
- 代碼

<style>
   .father {
       position: relative;
       margin: 50px auto;
       width: 800px;
       height: 600px;
       background-color: cyan;
   }
   .son {
       position: absolute;
       top: 50%;
       left: 50%;
       /* 不用再去計算子盒子的寬高 */
       transform: translate(-50%, -50%);
       width: 309px;
       height: 253px;
       background-color: darkorange;
   }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

效果

移動web開發H5移動web開發

旋轉

文法：

transform:rotate(度數)  機關是deg,正值是順時針；

特點：中心點預設在盒子中間

旋轉的中心點設定

文法：可以影響旋轉的效果；一般情況下不設定該屬性，使用預設值；

/* 中心點位置：改變距離原點的位置 */
      /* 一般情況下：不動 */
      /* transform-origin: 100px 100px; */
      /* 相對于：自身寬高的來說 */
      /* transform-origin: 100% 100%; */
      /* 方位名詞 */
      /* transform-origin: left bottom; */
      /* 用處：根據場景改變中心點位置 */

旋轉—下拉三角案例

核心思想：滑鼠點選下拉三角按鈕時，由角度向下的按鈕旋轉至角度向上的按鈕。
樣式需求：

移動web開發H5移動web開發

代碼：

<style>
   .box {
       position: relative;
       margin: 50px auto;
       width: 300px;
       height: 40px;
       background-color: #cccccc;
   }

   .box span {
       display: block;
       position: absolute;
       top: 10px;
       right: 10px;
       transform: rotate(45deg);
       width: 15px;
       height: 15px;
       border-right: 2px solid #222222;
       border-bottom: 2px solid #222222;
       transition: all 0.3s;
   }

   .box span:active {
       /* 225= 45+180 */
       /* 旋轉：相對于一開始的狀态 45deg */
       /* 旋轉是基于上一個狀态值進行旋轉； */
       /* 也就是說旋轉是基于最開始的狀态進行旋轉,
       如過以上一個旋轉的狀态作為參考,
       旋轉的度數要加上上一個狀态旋轉的度數  */
       transform: rotate(225deg);
    }
</style>
</head>

<body>
    <div class="box">
        <span></span>
    </div>
</body>

縮放

文法：

/* 長度、寬度方向 縮放比 沒有機關 */
transform:scale(2,3);

/* 長度、寬度方向 縮放為同一個比例*/
transform:scale(2);
transform:scale(0.5);

特點：
- transform: 後面所有的屬性都不會影響其他盒子的位置，不會影響整個布局；
- 縮放：會使下面的文字，CSS屬性，子元素都會被跟着縮放

2D轉換的綜合寫法

核心思想：不能上下寫，因為會覆寫層疊

/* 移動、旋轉、縮放 寫在一起 */


 /* CSS樣式層疊 */
 /* transform: translateX(800px); */
 /* 樣式層疊： 下面會把上面 層疊掉*/
 /* transform: rotate(90deg)

 /* 先寫的是移動，再次是旋轉 一般用這個*/
 /* transform: translateX(800px) rotate(90deg) scale(1.5)
 /* 特點：旋轉寫在移動前面，旋轉會改變盒子初始化的軸向，X軸方向就會被改變；不常用*/
 transform: rotate(90deg) translateX(800px) scale(1.5);

動畫

定義

文法:@keyframes:動畫名稱 {}
一個動畫的執行過程：在CSS樣式中定義動畫，執行動畫的元素調用動畫的名稱，給定動畫的執行時間。

/* 聲明動畫、定義動畫  動畫名稱*/
@keyframes dong_h {
    /* 寫錯單詞了 這個狀态不生效，從div初始化樣式開始生效 */
    form {
        /* CSS 代碼 */
        width: 200px;
        height: 200px;
        background-color: red;
        transform: translateX(0);
    }
    to {
        width: 300px;
        height: 300px;
        background-color: blue;
        transform: translateX(800px);
    }
}
/* 2.調用 給誰調用 */
div {
    width: 200px;
    height: 200px;
    background-color: red;
    /* 名稱、時間 */
    animation-name: dong_h;
    animation-duration: 2s;
}

序列

文法：時間節點，設定這個節點下的CSS狀态。

<style>
 /* 1.定義動畫 */
    
    @keyframes dh {
      /* 使用% ：動畫序列，時間節點的CSS狀态設定 */
      0% {
        transform: translate(0, 0);
        background-color: #ccc;
      }
      50% {
        transform: translate(800px, 0);
        background-color: red
      }
      100% {
        /* 使用transform 各自屬性的設定，一定是基于上一個狀态的變化  */
        transform: translate(800px, 600px);
        background-color: blue
      }
    }
    /* 2.調用和時間設定 */
    
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      animation-name: dh;
      animation-duration: 3s;
    }
</style>

屬性

各個屬性的定義

/* ----------------------------------------------速度曲線【重點】 */
/* 1.速度曲線 預設值ease: 慢-快-慢*/
/* linear：勻速 速度一直不變 常用*/
/* 連續動畫 */
/* animation-timing-function: linear; */
/* 不連續的，一小步一小步在跳，使用場景： UI給我們是分幀圖，格子圖；*/
/* animation-timing-function: steps(8); */
/* -----------------------------------------------動畫延遲 */
/*animation-delay: 2s;*/
/* -----------------------------------------------動畫次數*/
/* 設定具體次數 */
/* animation-iteration-count: infinite; *//*infinite(無限循環)*/
/* ---------------------------------------------- 動畫方向:不常用*/
/* animation-direction: normal; */
/* reverse:100-0  */
/* animation-direction: reverse; */
/* alternate:輪次 0-100-0-100... 至少執行兩次動畫*/
/* animation-direction: alternate; */
/* -----------------------------------------------動畫等待狀态 或結束狀态的位置 【重點】*/
/* 不需要設定等待 */
/* forwards：向前0---->100%;  */
/* 設定後：控制動畫結束的時候，停留在100% 狀态 */
/* 不設定：動畫停在初始化狀态 */
/* animation-fill-mode: forwards; */
/* ========================================== */
/* 需要設定等待 delay */
/* backwards：向後0；*/
/* 不設定的作用：動畫等待，在初始化位置等待 */
/* 設定後的作用：控制元素在哪等待，在0%等待,不是初始化狀态 */
/* animation-fill-mode: backwards; */
/* ========================================== */
/* both: forwards+backwards*/
/* 停：100% */
/* 等：0% */
/* animation-fill-mode: both; */

簡寫

文法

<style>
animation: name duration timing-function delay iteration-count direction fill-mode;
/* 各個位置上描述單詞：看到簡寫上的單詞知道啥意思即可 */
/* 特點：有某個屬性設定，就設定；沒有的話，就不設定 */
/* fill-mode:動畫最後停在哪？開始等在哪？ */
/* animation: dongh 2s linear reverse; */
</style>

案例-大資料熱點圖

效果

移動web開發H5移動web開發

步驟：
- 第一步：布局；
  - 整體地圖布局；
  - 點的布局：父級，點的子盒子，一個圈(絕對居中！)；
第二步：分析動畫；先要完成一個圈的擴散動畫；
- 第一印象，感覺是縮放，縮放的特點（CSS設定屬性跟着縮放，陰影就會變大，變粗，第一印象）
  - 思考：縮放看起來是變大了，還有什麼可以設定變大？直接改變圈的大小（width/height）
  - 動畫序列 CSS樣式設定：如何控制大小：怎麼變化？
    - 大小：從小變大；5px --15px–25px–35px–>45px ：width/height
    - 透明度：看不見---->看到見----->看不見：opacity：0~1；
  - 動畫屬性：animation: name duration timing-function delay iteration-count direction fill-mode;
- 第三步：三個圈的動畫就完成了；
  - 考慮如何形成波紋狀？每個全需要延遲的時間不一樣；delay
- 如何設定延遲？目的是想讓圈顯示均勻的分步，延遲設定得均勻；有幾個圈，就總時間/ 個數；
  - CSS設定：單獨每個設定；

代碼

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #222;
        }

        @keyframes dh {
            0% {
                opacity: 0;
                width: 5px;
                height: 5px;
            }

            25% {
                opacity: 0.5;
                width: 15px;
                height: 15px;
            }

            50% {
                opacity: 1;
                width: 25px;
                height: 25px;
            }
            75% {
                opacity: 0.5;
                width: 35px;
                height: 35px;
            }
            100% {
                opacity: 0;
                width: 45px;
                height: 45px;
            }
        }
        .map {
            position: relative;
            margin: 50px auto;
            width: 747px;
            height: 617px;
            background: url(images/map.png);
        }
        .father {
            position: absolute;
            top: 47%;
            left: 56%;
        }
        .parent {
            position: absolute;
            top: 37%;
            left: 75%;
        }
        .grandparent {
            position: absolute;
            top: 87%;
            left: 75%;
        }
        .shanghai {
            position: absolute;
            top: 61%;
            left: 87%;
        }
        .xinjiang {
            position: absolute;
            top: 35%;
            left: 20%;
        }
        .point {
            width: 5px;
            height: 5px;
            background-color: cyan;
            border-radius: 50%;
        }
        .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            box-shadow: 0 0 5px cyan;
            animation: dh 1.2s linear infinite;
        }
        .quan1 {
            animation-delay: 0s;
        }
        .quan2 {
            animation-delay: 0.4s;
        }
        .quan3 {
            animation-delay: 0.8s;
        }
        .quan4 {
            animation-delay: 1.2s;
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="father">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="parent">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="grandparent">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="shanghai">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="xinjiang">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
    </div>

案例-奔跑的熊

效果

移動web開發H5移動web開發

步驟：
- 遇到格子圖：想到格子與格子之間不連續，使用不連續的播放速度控制 steps(n)
- 如何把格子設定為一個圖檔顯示？
- 盒子大小：1600/8=寬度；高度和圖檔一樣高；
- 背景圖，超出的部分不顯示；
- 怎麼移動？往X負方向，背景圖檔的位置設定負值；
- 移動多少？整個圖的寬度；-1600p動畫：
- 0%：不移動0；
- 100%：完全移動出去 1600px;
- 怎麼變化？不連續的變化，速度曲線 steps(n)
- n?幾格圖檔就設定為多少；

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #cccccc;
        }

        @keyframes xqp {
            0% {
                left: 0;
                transform: translate(0);
            }

            100% {
                left: 50%;
                transform: translate(-50%);
            }
        }

        @keyframes zjd {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        div {
            position: absolute;
            margin-top: 200px;
            width: 200px;
            height: 100px;
            background: url(images/bear.png) no-repeat;
            animation: xqp 3s forwards, zjd 0.5s steps(8) infinite;
        }
    </style>
</head>

<body>
    <div></div>
</body>

3D轉換

3D坐标系

移動web開發H5移動web開發

移動

文法

/* 移動 自身寬度 */
/* transform: translateX(100%); */
/* 沿着Z軸 +方向 移動100px */
/* transform: translateZ(100px); */
/*  沒有厚度，%不生效*/
/* transform: translateZ(100px); */

/* 合起來 */
/* transform: translateX(100%) translateY(100%); */

/* 簡寫 XYZ軸方向的移動值*/
/* transform: translate3d(100px, 100px, 100px); */

視距

文法：

作用：
- 近大遠小的效果；
設定在哪裡：
- 加在body：以body的視角進行觀測下面所有的子元素，形成統一的透視感；【一般加在body上】。
- 加在各自父親，以各自父親的視角進行觀測下面的子元素，自己的子元素形成自己的透視感；
值的大小：越小，變化越劇烈；

旋轉

左手工具：把大拇指朝向自己眼睛，四個手指彎曲的方向，順時針方向；
文法：

/* transform: rotateX(45deg); */
      /* transform: rotateY(45deg); */
      /* transform: rotateZ(45deg); */
      /* 了解 */
      /* transform: rotate3d(1, 1, 0, 45deg); */

3D呈現

文法：

與視距的差別從兩個方面入手：**作用？**加給誰？
- 視距perspective：
  - 近大遠小，透視感；
  - body(一般情況下)、各自父親會導緻觀測角度的不同；
- 3D呈現：
  - 父親給親生子元素一個3D空間，子元素做3D轉化可呈現出來；
  - 上下級的父親上加；（你要做什麼事情，得經過你父母的同意）；可能會加多個地方；

縮放

文法：

/* 寬 縮放 */
transform: scaleX(1);
/* 高 縮放 */
transform: scaleY(1);

/* 厚度 縮放？沒有厚度 */
transform: scaleZ(1);

/* 寬，高 縮放一倍，厚度放大兩倍 ,Z軸方向縮放沒有效果*/
transform: scale3d(1,1,2)

案例-旋轉的立方體

效果

移動web開發H5移動web開發
代碼

<style>
* {
            margin: 0;
            padding: 0;
        }

        @keyframes level_1_box_am {
            0% {
                transform: rotate3d(1, 1, 1, 0deg);
            }

            20% {
                transform: rotate3d(1, 1, 0, 60deg);
            }

            40% {
                transform: rotate3d(1, 0, 0, 120deg);
            }

            60% {
                transform: rotate3d(0, 0, 0, 180deg);
            }

            80% {
                transform: rotate3d(0, 1, 1, 240deg);
            }

            100% {
                transform: rotate3d(0, 0, 1, 300deg);
            }
        }

        body {
            perspective: 800px;
        }

        .p {
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: all 4s;
            animation: level_1_box_am 5s linear infinite alternate;
        }

        .p div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
            background-color: wheat;
        }

        .p div:nth-child(1) {
            transform: translateZ(100px);
        }

        .p div:nth-child(2) {
            transform: translateX(-100px) rotateY(-90deg);
        }

        .p div:nth-child(3) {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .p div:nth-child(4) {
            transform: translateX(100px) rotateY(90deg);
        }

        .p div:nth-child(5) {
            transform: translateY(-100px) rotateX(90deg);
        }

        .p div:nth-child(6) {
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
<body>
    <div class="p">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

流式布局

viewport

浏覽器（PC、移動端）顯示頁面内容的螢幕區域；不同的螢幕的大小，我們看到的區域也是不同的；
PC端的頁面直接放入手機屏顯示，不友好。内容原因沒有設定viewport；
viewport就是為了解決上面問題；
手機浏覽器浏覽PC端頁面：
- 給HTML預設寬度 980px 移動端，頁面初始化時百分百顯示；但是頁面元素是縮小；
- 手指縮放，可以正常看見元素，但是内容超出；
原因：HTML預設為980px不是很合适；

移動web開發H5移動web開發

那麼設定HTML寬度多少為合适呢？我們眼睛能看到的，螢幕的視窗多大，設定多大就合适；

移動web開發H5移動web開發

文法：
- 預設：HTML980px；
- 理想：手機螢幕多大，HTML就設定是多大；
- meta标簽設定：标準寫法；

width=device-width：改變HTML預設的980px 為螢幕的寬度；
user-scalable: 是否允許使用者縮放螢幕值：no(0不允許) yes(1允許)；
initial-scale：初始化縮放比例；1.0：不縮放；
maximum-scale：使用者對頁面的最大縮放比例；值：比例
minimum-scale：使用者對頁面的最小縮放比例；值：比例

二倍圖

螢幕尺寸

通常我們所指的螢幕 尺寸 ，實際上指的是螢幕對角線的長度（一般用英寸來度量）如下圖所示
1英寸 = 2.54cm 絕對機關；（到哪都不會變的值）

移動web開發H5移動web開發

實體像素點

早期的螢幕，實體像素點（客觀的小燈泡）都比較大，比如玩遊戲的超級瑪麗的畫面的顆粒感很強：随着技術的進步，實體像素點會被做的越來越小；會被做小；
客觀存在。指計算機顯示裝置中的最小機關，即一個像素點的大小。每一個像素點可以了解為就是螢幕上的一個發光點。每個點可以發一個顔色，就是我們看到的畫面。

移動web開發H5移動web開發
大白話：一個蘿蔔一個坑：
- 蘿蔔：光、顔色；
- 坑：實體像素點

螢幕分辨率

螢幕分辨率：實體像素點的個數來衡量，表示螢幕水準和垂直方向的實體像素點的個數，”坑“有多少個；
iPhone3和iPhone4是同一個螢幕尺寸下，比較分辨率：

移動web開發H5移動web開發

坑會越做越小：直覺感受，畫面細膩；
- Retina（視網膜螢幕）是一種顯示技術，可以将把更多的實體像素點壓縮至一塊螢幕裡；進而達到更高的分辨率，并提高螢幕顯示的細膩程度。
坑’特點：越做越小；（iPhone4坑的寬度是iPhone3坑的寬度一半）

移動web開發H5移動web開發

圖檔分辨率

圖檔都是有顔色，圖檔分辨率。圖檔分辨率就是帶着“蘿蔔”來的；
下圖：分辨率640*426 ，提供了多少個色彩發光點（迎合實體像素點）；

移動web開發H5移動web開發

到這，誰提供顔色（圖檔），誰會提供坑（手機上客觀實體像素點）；
假設：有200*200分辨率的圖檔，展示在寬度分别是320（iphone3）、640(iphone4)分辨率的手機上，展示的效果如下：

移動web開發H5移動web開發

分析
- 200*200的分辨率的圖檔：200個顔色發光點。
- 一個實體像素點發一個顔色：兩個螢幕都需要200個實體像素點；
- 實體像素點的寬度大小：320（1）；640（0.5）；
- 是以顯示為上圖。
問題：不同的螢幕下，顯示的圖檔大小是不一樣；
- 寬度：第2個是第1個的0.5倍；
- 面積：第2個是第1個的1/4倍；
目标：顯示一樣；
問題：Iphone3 和Iphone 4 顯示200*200分辨率的圖，顯示不一樣大；
- Iphone3 圖檔顯示寬度是 Iphone 4 圖檔顯示寬度 2倍；
- 分析：
  - Iphone3準備了 200 x 200實體像素點；Iphone4準備了 200 x 200實體像素點；
  - Iphone3：實體像素點長度1，Iphone4：實體像素點長度0.5
  - 長度：Iphone3 200長度；Iphone4:100長度；
- 解決：
  - 為了顯示 Iphone3 200長度；Iphone4:200長度；
  - Iphone3：實體像素點長度1，Iphone4：實體像素點長度0.5
  - 數量：Iphone3準備了 200 x 200實體像素點；Iphone4準備了 400x 400實體像素點；
  - UI：Iphone3設計200 x 200 分辨率的圖；Iphone4設計400x 400分辨率的圖；
  - Iphone4設計400x 400分辨率的圖：二倍圖；

二倍圖的由來及小結

CSS：設定寬度200px,在任何手機上顯示都是一樣的大小；高分辨率手機下，200px寬度，向螢幕要更多的實體像素點，UI按照道理設計更高分辨率的圖；
命名：
- [email protected]：二倍圖
- [email protected]：三倍圖
二倍圖怎麼使用：
- 單個圖：（一倍、或者二部，無所謂）；
  - img：CSS該怎麼設定（來自設計稿測量結果）就這麼設定；
  - 背景圖：CSS該怎麼設定（來自設計稿測量結果）就這麼設定；
- 二倍精靈圖：
  - 1在設計稿進行測量，寫入代碼；
  - 2.操作二倍精靈圖：
    - 想要在一倍精靈圖進行測量，但是沒有一倍精靈圖
    - 通過PS FW 等比縮小為原來的一半；
    - 進行測量，寫入代碼；
  - 3.引入精靈圖作為背景圖檔，控制精靈圖大小 background-size 為一倍圖大小；
  - 4.關閉軟體，不要儲存圖；

background-size

文法：

/* 兩個參數：有可能變形 */
 /* background-size: 500px 100px; */
 /* 設定一個參數：px 等比變化*/
 /* background-size: 500px; */
 /* 設定 % :目前盒子寬度*/
 /* background-size: 50%; */
 /* 關鍵字 */
 /* cover：覆寫，絕對不留白 */
 /* background-size: cover; */
 /* contain：包含，絕對顯示全*/
 /* background-size: contain; */

寫頁面：設計稿，UI切圖；
- 單個圖：
  - img：怎麼控制大小？width / height
  - 背景圖：background-size
- 精靈圖：
  - 背景圖：
    - 位置：background-position:
    - 大小：background-size:

二倍精靈圖的使用

如果給你二倍圖：
- 單個二倍圖檔；設定完CSS寬度高度 px 值，按照我的設定進行顯示大小；
- 二倍精靈圖：好多小圖示都在上面；
二倍精靈圖的使用：
- 1.在UI設計稿上面測量出符合設計的要求的頁面元素大小；寫代碼；
- 2.看圖檔的是個二倍圖精靈圖：我想測量在1:1比例上測量；
  - 在FW内：先等比所小圖的一半，在縮小的的圖内進行圖示位置測量；
  - 在代碼，引入圖，按照剛才的測量，寫入圖示的坐标；
  - 設定背景圖檔大小：按照縮小一半後的寬高進行設定的；
- 3.千萬不要儲存圖檔，否則就會改變二倍圖的分辨率；

div {
      /* 在UI設計稿上面進行測量 15*15px */
      width: 15px;
      height: 15px;
      /* 背景圖引入 二倍圖*/
      background: url('./imgs/jd-sprites.png') no-repeat;
      /* 寫入測量坐标 在縮小後的圖上面進行測量 */
      background-position: -83px 0;
      /* 在FW 縮小後 設定 ,不控制圖檔的分辨率，顯示大小 */
      background-size: 199px;
    }

CSS3盒子模型

文法：盒子總寬 = CSS設定width ,border/padding 向内擠；

/* 寬度固定後，再次增加你的border padding，向外走 */
/* 盒子的總寬= 設定CSS width + border +padding */
/* width: 140px;
   height: 100px;
   background-color: #ccc;
   border-right: 10px solid blue;
   border-left: 10px solid blue;
   padding: 0 20px; */

/* CSS盒子模型: 再次增加你的border padding，向内走*/
/* 盒子的總寬  = 設定的CSSwidth */
/* 場景：調整頁面的布局 ，設定padding值和border向内擠；*/
   box-sizing: border-box;/*CSS3盒子模型核心屬性*/
   width: 200px;
   height: 100px;
   background-color: #ccc;
   border-right: 10px solid blue;
   border-left: 10px solid blue;
   padding: 0 20px;

聖杯布局

應用場景：（重點掌握）
- 左側固定寬度，右側随意拉伸。
- 左右固定寬度，中間随意拉伸。
方法一：
- 左右兩邊寬度固定，中間通過父盒子的padding值（父盒子左右的padding值一般情況下大于等于左右盒子的寬度）擠出來的，中間盒子的寬度為100%。

/* 左右兩邊的寬度是固定的 */
    /* 中間區域随意拉伸； */
    .p {
      width: 100%;
      height: 600px;
      position: relative;
      box-sizing: border-box;
      padding: 0 200px;
    }
    
    .p .left {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #222;
    }
    
    .p .right {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #222;
    }
    
    .p .mid {
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }

方法二：
- 左右兩邊寬度固定，中間通過自己的margin值（自己的margin值一般情況下大于等于左右盒子的寬度）擠出來的，并且自己不能設定寬度。

/* 左右兩邊的寬度是固定的 */
    /* 中間區域随意拉伸； */
    /* 如果寬度不是通過width設定來，顯示有寬度，設定左右margin值，向内擠； */
    /* div {
      width: 100%;
      height: 50px;
      background-color: #ccc;
      margin: 0 100px;
    } */
    
    .p {
      width: 100%;
      height: 600px;
      position: relative;
    }
    
    .p .left {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #222;
    }
    
    .p .right {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #222;
    }
    
    .p .mid {
      /* 預設寬度100% */
      margin: 0 200px;
      height: 100%;
      background-color: #ccc;
    }

方法三：
- 左右兩邊寬度固定，中間是通過flex布局，把主軸上剩餘空間全部占有。

<style>
    .p {
      width: 100%;
      height: 100px;
      border: 1px solid #000;
      display: flex;
      /* row */
    }
    
    .left {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    
    .mid {
      /* 把主軸上剩餘空間 全部占有*/
      flex: 2;
      height: 80px;
      background-color: pink;
    }
    
    .right {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="p">
    <span class="left">left</span>
    <span class="mid"></span>
    <span class="right">right</span>
  </div>
</body>

流式布局特點

傳統布局（流式布局）：
- 寬度：使用百分比控制，浮動（清除浮動）
- 高度：通過子元素撐起來；

案例-京東頁面

效果：

移動web開發H5移動web開發

HTML頁面

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 頂部 start -->
    <header>
        <a href="#">
            <img src="images/close.png" alt="">
        </a>
        <a href="#">
            <img src="images/logo.png" alt="">
        </a>
        <a href="#">打開京東APP，購物更輕松</a>
        <a href="#">立即打開</a>
    </header>
    <!-- 頂部 end -->
    <!-- 廣告欄 banner start -->
    <section>
        <div class="search">
            <div class="left">
                <img src="images/s-btn.png" alt="">
            </div>
            <div class="mid">
                <span class="jd">
                    <img src="images/jd.png" alt="">
                </span>
                <span class="liner"></span>
                <span class="fd"></span>
            </div>
            <div class="right">登入</div>
        </div>
        <div class="bannerBg">
            <a href="#"><img src="upload/banner.dpg" alt=""></a>
        </div>
    </section>
    <!-- 廣告欄 banner end -->
    <!-- 小家電 start -->
    <section class="jiadian">
        <a href="#">
            <img src="upload/pic11.dpg" alt="">
        </a>
        <a href="#">
            <img src="upload/pic22.dpg" alt="">
        </a>
        <a href="#">
            <img src="upload/pic33.dpg" alt="">
        </a>
    </section>
    <!-- 小家電 end -->
    <!-- 導航欄 start -->
    <nav>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京東超市</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>全球購</span>
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京東充值</span>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京東超市</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>全球購</span>
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京東充值</span>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京東超市</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>全球購</span>
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京東充值</span>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京東超市</span>
        </a>
    </nav>
    <!-- 導航欄 end -->
    <!-- 抽獎區域 start -->
    <section class="choujiang">
        <a href="#"><img src="upload/new1.dpg" alt=""></a>
        <a href="#"><img src="upload/new2.dpg" alt=""></a>
        <a href="#"><img src="upload/new3.dpg" alt=""></a>
    </section>
    <!-- 抽獎區域 end -->
</body>

</html>

CSS代碼

/* body的初始化樣式 */
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    background-color: #ccc;
}
a {
    text-decoration: none;
}

/* -----------------頂部------------------------ */
header {
    width: 100%;
    height: 45px;
    background-color: #333;
}
header a {
    float: left;
    line-height: 45px;
    text-align: center;
    color: #fff;
}
header a:nth-child(1) {
    width: 8%;
}
header a:nth-child(1) img {
    width: 10px;
}
header a:nth-child(2) {
    width: 10%;
}
header a:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
    padding-bottom: 4px;
}
header a:nth-child(3) {
    width: 57%;
    height: 45px;
}
header a:nth-child(4) {
    width: 25%;
    height: 45px;
    background-color: #ff3040;
}

/* -------------廣告欄banner------------------------ */
.search {
    position: fixed;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
}
.search .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search .left img{
    margin: 14px 0 0 15px ;
    width: 20px;
}
.search .right {
    position: absolute;
    top: 0;
    right: 5px;
    width: 40px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
}
.search .mid {
    overflow: hidden;
    margin: 7px 50px 0;
    height: 30px;
    background-color: #fff;
    border-radius: 15px;
}
.search .mid .jd{
    display: block;
    float: left;
    margin: 7px 0 0 13px;
    width: 20px;
    height: 15px;
}
.search .mid .jd img {
    width: 20px;
}
.search .mid .liner {
    display: block;
    float: left;
    margin: 7px 0 0 5px;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.search .mid .fd {
    display: block;
    float: left;
    margin: 7px 0 0 5px;
    width: 15px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat;
    background-size: 199px;
    background-position: -83px 0;
}
section .bannerBg a {
    display: block;
}
section .bannerBg img {
    width: 100%;
}
/* ---------------------小家電---------------------- */
.jiadian {
    width: 100%;
    overflow: hidden;
}
.jiadian a {
    display: block;
    float: left;
    width: 33.3%;
}
.jiadian a img {
    width: 100%;
}
/* -----------------------導航欄------------------- */
nav {
    margin: 20px 0;
    overflow: hidden;
}
nav a {
    float: left;
    width: 20%;
    margin-top: 10px;
    text-align: center;
}
nav a img {
    margin: 10px 0;
    width: 40px;
}
nav a span {
    display: block;
}
/*-------------------- 抽獎區域 -----------------*/
.choujiang a {
    float: left;
}
.choujiang a img {
    width: 100%;
}
.choujiang a:nth-child(1) {
    width: 50%;
}
.choujiang a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
    box-sizing: border-box;
}

flex布局

介紹

對比：
- 傳統布局：
  - 相容性好；布局繁瑣；浮動，清除浮動；
  - 局限性，不能在移動端很好的布局；
- flex布局：
  - 操作友善，布局極其簡單，移動端使用比較廣泛；
  - PC端浏覽器支援情況比較差：
使用：如果是PC端頁面布局，最好采用傳統方式；如果是移動端或者是不考慮相容的pc則采用flex；
特點：flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性操作，
- 任何一個标簽都可以指定使用 flex 布局。
- 當為父盒子設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性将失效。
- 使用思想上和傳統盒子完全不同，不要再想子元素是塊級元素、行内元素等，
- flex通過行和列的思路來控制布局；
面試：flex布局又叫伸縮布局、彈性布局、伸縮盒布局、彈性盒布局；
名稱：
- 采用 Flex 布局的元素，稱為 Flex 容器（flexcontainer），父級簡稱"容器"。
- 它的所有子元素自動成為容器成員，稱為 Flex 項目（flexitem），簡稱"項目"。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-6x1RyNhg-1573225537003)(E:\前端學習\自己記錄的筆記\images\002.png)]

文法：

容器屬性

flex-direction

文法：作用确認主軸的方向，
特點：子元素會在主軸上進行排布，按照主軸選擇正方向進行排布；
思想：
- 不要再想這些元素是塊級、行内等（不要用傳統的知識解釋今天的學習）；
- 隻要父親設定flex布局，親生子元素設定寬高就生效；

/* 1.主軸的選擇 */
      /* row:選擇水準向右為主軸 預設值*/
      /* 特點：子元素會在主軸上，按照主軸正方向進行排布 */
      /* flex-direction: row; */
      /* 主軸：行，從右到左 */
      /* flex-direction: row-reverse; */
      /* 主軸：列，從上到下  */
      /* flex-direction: column; */
      /* 主軸：列，從下到上  */
      flex-direction: column-reverse;

justify-content

文法：控制子元素在主軸上對齊方式；
特點：如果要使用該屬性，先要把主軸的去向決定；

/* 1.主軸的選擇 */
      /* row:主軸：行，選擇水準向右 */
      /* justify-content 控制子元素在主軸上  排布方式 */
      /* flex-start：預設值，從主軸頭部開始  */
      /* justify-content: flex-start; */
      /* flex-end: 從尾部開始對齊 */
      /* justify-content: flex-end; */
      /* justify-content: center; */
      /* space-around:剩餘空間環繞在子元素周圍*/
      /* justify-content: space-around; */
      /* justify-content: space-between; */

flex-wrap和flex-flow

flex-wrap：控制子元素是否換行，預設不換行，子元素在主軸上進行合理壓縮；

/* 預設不換行 */
/* 特點：如果子項目的加起來的總寬超過父親的寬度，子項目的寬度會被合理的壓縮 */
/* wrap：換行*/
flex-wrap: wrap;

flex-flow：複合屬性，确認主軸方向，控制是否換行。一般不用；

align-items

文法：控制子元素（項目）整體在側軸上對齊方式；

/* 主軸的選擇 row，側軸預設：Y軸*/
      /* !!! 控制 子元素 單行 在側軸上對齊方式 */
      /* flex-start : 側軸的頭部開始對齊 */
      /* align-items: flex-start; */
      /* 側軸的尾部開始對齊 */
      /* align-items: flex-end; */
      /* 側軸上居中 */
      align-items: center;
      /* stretch：在側軸方向上進行拉伸 */
      /* 規則：如果在側軸方向上進行拉伸，CSS設定子元素不能在側軸方向有大小的設定 */
      /* 如果子元素在側軸方向有大小的設定，拉伸不生效 */
      /* align-items: stretch; */

場景:

移動web開發H5移動web開發

flex布局：
- 思想：不要再想這些子元素是塊級元素等，flex布局，子元素設定寬高就生效；
- 觀測：子元素是行排布、列排布；決定？确認主軸的方向；
- 考慮側軸上對齊方式：center;
文法：
- 确認主軸方向
- 主軸上元素的整體在側軸上對齊方式；

其他

非應用補充知識：
- 屬性align-items：控制的是單行；
- 設定換行：變為多行；多行下，每一行為單行，控制的是每個的側軸上的對齊方式；
- 活動範圍：側軸對齊方式，就以每個單行的範圍進行對齊；

.p {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
      /* 父級：容器 */
      display: flex;
      /* 預設主軸：row */
      /* 預設不換行：元素會被合理的壓縮 */
      flex-wrap: wrap;
      /* 側軸對齊預設值；flex-start 側軸頭部*/
      /* 在側軸方向 進行拉伸 ，特點：不能設定控制側軸反向的CSS屬性 */
      align-items: stretch;
    }
    
    .son {
      width: 100px;
      /* height: 100px; */
      background-color: #ccc;
    }

align-content

文法：控制子元素（多行）在側軸上對齊方式

/* 預設不換行 */
      flex-wrap: wrap;
      /* 側軸上 單行 預設值：flex-start，看成每個單行 */
      /* align-items: flex-start; */
      /* ------------------------------------------------------- */
      /* align-content: 控制多行對齊方式，把多行看成一個整體*/
      /* 沒有預設值 */
      /* align-content: flex-start; */
      /* 側軸尾部對齊 */
      /* align-content: flex-end; */
      /* align-content: center; */
      /* space-around：剩餘空間，環繞 */
      /* 把剩餘空間分到兩個行之間 */
      /* align-content: space-between; */
      /* 在側軸上進行拉伸： */
      /* align-content: stretch; */

案例

移動web開發H5移動web開發

整體：行排布，預設row;
局部：
- 列排布；
- 側軸上居中對齊；
特點：整體的flex布局隻是對整體下的子元素有flex布局的影響，單獨子元素形成新的flex布局，需要重新寫display:flex;
代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 1000px;
      height: 200px;
      border: 1px solid #000;
      display: flex;
      /* 預設主軸：row */
    }
    /* son要進行flex布局 */
    
    .son {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      /* 單獨去管理自己的兒子為flex，單獨寫； */
      display: flex;
      /* 主軸：列 */
      flex-direction: column;
      /* 側軸上居中 */
      align-items: center;
    }
    
    .img {
      width: 50px;
      height: 50px;
      margin: 50px 0;
      background-color: #222;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
  </div>
</body>

</html>

項目屬性

flex

作用：flex劃分主軸上剩餘空間給子元素
份數：正常使用，用整數；把所有的子元素的份數加起來N份，剩餘空間分成N份，再看每個子元素占有幾份；
%：正常使用，比較保證加起來是100%；

.s_1 {
      /* 控制子元素在主軸方向，去占有剩餘空間，效果：我們可以直接通過屬性flex設定寬度 */
      /* flex：數字（整數） ，占有的份數*/
      /* flex: 百分數，正常操作：保證所有的子元素的百分數加起來為100%，不然會出現問題 */
      flex: 20%;
      /* width: 100px; */
      height: 100px;
      background-color: #ccc;
    }
    
    .s_2 {
      flex: 20%;
      /* width: 100px; */
      height: 100px;
      background-color: #222;
    }

align-self

文法：控制單個項目（子元素）在側軸上自己的對齊方式；

移動web開發H5移動web開發

預設值為auto的特别之處：
- 預設值auto，如果父級設定了align-items ，auto繼承父級元素上設定側軸的對齊方式：align-items 屬性；
- 如果父級沒有設定align-items 屬性，auto預設值會變為strecth；（注意側軸方向上控制元素大小的CSS設定要注釋掉）

.p {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
      display: flex;
      /* 主軸row */
      /* align-items: center; */
    }
    
    .son {
      /* auto：預設值，如果父親設定了 align-items，auto會繼承父級的設定 */
      /* align-self: auto; */
      /* 規則： 如果沒有設定 align-items，那麼auto變為 拉伸 stretch*/
      /* 拉伸規則：沿着哪個軸拉伸？側軸，在側軸方向不能有CSS控制大小的設定 */
      width: 100px;
      /* height: 100px; */
      background-color: #ccc;
    }

子元素設定flex:1

.son {
      
      /* width: 100px; */
      /* 主軸:把剩餘空間均分掉 */
      flex: 1;
      
      /* align-self: auto; */
      /* 規則： 如果沒有設定 align-items，那麼auto變為 拉伸 stretch*/
      /* 拉伸規則：沿着哪個軸拉伸？側軸，在側軸方向不能有CSS控制大小的設定 */
      background-color: #ccc;
    }

order（了解）

文法：控制子元素的排布順序，值越小，越前。可以取負值；
可以設定為負數；注意和 z-index 不一樣。這裡是表示位數；

.item {
    order: <number>;
}

案例-攜程頁面

效果

移動web開發H5移動web開發

html代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 頂部搜尋區域 start -->
    <header>
        <div class="left">
            搜尋:目的地/酒店/景點/航班号
        </div>
        <div class="right">
            <div class="img"></div>
            <div class="info">我 的</div>
        </div>
    </header>
    <!-- 頂部搜尋區域 end -->
    <!-- banner區域 start -->
    <div class="banner">
        <a href="#"><img src="upload/focus.jpg" alt=""></a>
    </div>
    <!-- banner end-->
    <!-- 導航區域1 start -->
    <div class="nav_1">
        <a href="#">
            <span class="img"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img2"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img3"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img4"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img5"></span>
            <span class="info">景點·玩樂</span>
        </a>
    </div>
    <!-- 導航區域1 end -->
    <!-- nav區域 start -->
    <nav>
        <div class="top">
            <span class="box">
                <a href="#">酒店住宿</a>
                <img src="images/hotel.png" alt="">
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
        </div>
        <div class="top">
            <span class="box">
                <a href="#">酒店住宿</a>
                <img src="images/hotel.png" alt="">
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
        </div>
        <div class="top">
            <span class="box">
                <a href="#">酒店住宿</a>
                <img src="images/hotel.png" alt="">
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
        </div>
    </nav>
    <!-- nav區域 end -->
    <!-- 導航區域2 start -->
    <div class="nav_2">
        <a href="#">
            <span class="img"></span>
            <span class="info">電話費</span>
        </a>
        <a href="#">
            <span class="img img2"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img3"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img4"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img5"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img6"></span>
            <span class="info">電話費</span>
        </a>
        <a href="#">
            <span class="img img7"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img8"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img9"></span>
            <span class="info">景點·玩樂</span>
        </a>
        <a href="#">
            <span class="img img10"></span>
            <span class="info">景點·玩樂</span>
        </a>
    </div>
    <!-- 導航區域1 end -->
    <!-- 熱門活動 start-->
    <div class="hot">
        <h2>
            <a href="#" title="熱門活動"></a>
        </h2>
        <div class="right">
            <a href="#">擷取更多福利</a>
        </div>
    </div>
    <!-- 熱門活動 end-->
    <!-- 産品區域 start -->
    <div class="good">
        <div class="row">
            <a href="#"><img src="upload/pic1.jpg" alt=""></a>
            <a href="#"><img src="upload/pic2.jpg" alt=""></a>
        </div>
        <div class="row">
            <a href="#"><img src="upload/pic3.jpg" alt=""></a>
            <a href="#"><img src="upload/pic4.jpg" alt=""></a>
        </div>
        <div class="row">
            <a href="#"><img src="upload/pic5.jpg" alt=""></a>
            <a href="#"><img src="upload/pic6.jpg" alt=""></a>
        </div>
    </div>
    <!-- 産品區域 end -->
</body>

</html>

CSS代碼

body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  /* font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei; */
  color: #000;
  font-size: 14px;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
}
/* ------------頂部搜尋區域 -------------------- */
header {
  position: fixed;
  max-width: 540px;
  min-width: 320px;
  height: 44px;
  width: 100%;
  background-color: #f6f6f6;
  border-bottom: 1px solid #cccccc;
  display: flex;
}
header .left {
  flex: 1;
  position: relative;
  margin: 7px 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  line-height: 30px;
  padding-left: 30px;
  background-color: #f6f6f6;
  color: #888888;
}
header .left::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  width: 15px;
  height: 15px;
  background: url(../images/sprite.png) no-repeat -58px -278px;
  background-size: 104px;
}
header .right {
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2eaae0;
  font-size: 12px;
}
header .right .img {
  margin: 3px 0;
  width: 23px;
  height: 23px;
  background: url(../images/sprite.png) no-repeat -59px -194px;
  background-size: 104px;
}
/* -------------------banner區域-------------- */
.banner {
  padding: 45px 0 3px;
}
.banner a img {
  width: 100%;
}
/* -------------------導航區域1------------- */
.nav_1 {
  margin: 3px 5px;
  height: 64px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
}
.nav_1 a {
  flex: 1;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav_1 a .img {
  margin: 5px 0;
  width: 32px;
  height: 32px;
  background: url(../images/localnav_bg.png) no-repeat 0 0;
  background-size: 32px;
}
.nav_1 a .img2 {
  background: url(../images/localnav_bg.png) no-repeat 0 -32px;
  background-size: 32px;
}
.nav_1 a .img3 {
  background: url(../images/localnav_bg.png) no-repeat 0 -64px;
  background-size: 32px;
}
.nav_1 a .img4 {
  background: url(../images/localnav_bg.png) no-repeat 0 -96px;
  background-size: 32px;
}
.nav_1 a .img5 {
  background: url(../images/localnav_bg.png) no-repeat 0 -128px;
  background-size: 32px;
}
.nav_1 a .info {
  color: #666666;
}

/* ----------nav---------- */
nav {
  border-radius: 5px;
  overflow: hidden;
}
nav .top {
  height: 88px;
  display: flex;
  background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}
nav .top:nth-child(2) {
  margin: 5px 0;
  background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}
nav .top:nth-child(3) {
  background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}
nav .top .box {
  flex: 1;
  display: flex;
  flex-direction: column;
}
nav .top .box:nth-child(n+2){
  border-left: 1px solid #fff;
}
nav .top .box img {
  width: 70%;
  padding-left: 25px;
}
nav .top .box a {
  flex: 1;
  text-align: center;
  line-height: 43px;
  color: #fff;
}
nav .top .box a:nth-child(2) {
  border-top: 1px solid #fff;
}
/* -------------------導航區域2------------- */
.nav_2 {
  margin: 3px 5px;
  height: 150px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.nav_2 a {
  flex: 20%;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav_2 a .img {
  margin: 4px 0;
  width: 48px;
  height: 45px;
  background: url(../images/subnav-bg.png) no-repeat 0 2px;
}
.nav_2 a .img2 {
  background: url(../images/subnav-bg.png) no-repeat 0 -50px;
}
.nav_2 a .img3 {
  background: url(../images/subnav-bg.png) no-repeat 0 -108px;
}
.nav_2 a .img4 {
  background: url(../images/subnav-bg.png) no-repeat 0 -170px;
}
.nav_2 a .img5 {
  background: url(../images/subnav-bg.png) no-repeat 0 -224px;
}
.nav_2 a .img6 {
  background: url(../images/subnav-bg.png) no-repeat 0 -280px;
}
.nav_2 a .img7 {
  background: url(../images/subnav-bg.png) no-repeat 0 -338px;
}
.nav_2 a .img8 {
  background: url(../images/subnav-bg.png) no-repeat 0 -396px;
}
.nav_2 a .img9 {
  background: url(../images/subnav-bg.png) no-repeat 0 -444px;
}
.nav_2 a .img10 {
  background: url(../images/subnav-bg.png) no-repeat 0 -495px;
}
.nav_2 a .info {
  color: #666666;
}
/* ---------------熱門活動------------- */
.hot {
  padding: 5px 0 0 10px;
  height: 55px;
  background-color: #fff;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
.hot h2 {
  float: left;
  height: 20px;
  width: 75px;
  background: url(../images/hot.png) no-repeat 0 -18px;
  background-size: 79px;
}
.hot .right {
  float: right;
  position: relative;
  margin: 12px 5px 0 0;
  padding: 5px 0 5px 10px;
  width: 114px;
  background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
  border-radius: 16px;
  box-sizing: border-box;
}
.hot .right::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.hot .right a {
  color: #fff;
}
/* --------------------産品區域---------------- */
.good {
  background-color: #fff;
  margin-bottom: 4px;
}
.good .row {
  /* width: 100%; */
  display: flex;
}
.good .row a {
  flex: 1;
  border-bottom: 1px solid #eee;
}
.good .row a:nth-child(1) {
  border-right: 1px solid #eee;
}
.good .row a img {
  width: 100%;
}

線性漸變

以前隻是一個顔色，現在可以出現漸變顔色；
文法：

/* 起始方向，顔色1，顔色2，...*/
background: -webkit-linear-gradient(30deg, red, blue);

/* 1.必須有私有字首*/
/* 2.起始方向：可以為方向名詞left 或 deg度數，預設從上到下*/
/* 3.顔色個數：最少2兩個顔色*/

rem 布局

介紹

流式布局、flex布局在寬度上控制的布局，高度基本上靠内部子元素撐起來，内部子元素有高度；
rem布局，最為直覺的效果，頁面全部元素現實等比縮放，包括文字，盒子大小；
實作頁面所有元素的等比變化效果；
知識點：
- 螢幕變化，能感覺到螢幕變了，頁面跟着變化；媒體查詢：
- 怎麼變？變的是一個根基，隻要是和根基有關系的盒子，都會發生改變；rem

媒體查詢

作用：感受到螢幕的變化；該可以根據螢幕不同的寬，進而獲得不同的樣式，然後實作不同的樣式顯示；
文法：
- CSS3 新文法，是一個查詢螢幕的過程，通過查詢目前螢幕尺寸屬于哪個範圍，進而有哪個範圍的樣式生效；
- 感受螢幕變化，螢幕變化就是寬度的變化，通過預設定，當螢幕到了我已經預設定的變化的範圍，就會把我提前設定好的樣式進行生效；
- mediatype (media feature) 都是它的查詢條件
```
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
           
```
- mediatype：媒體類型；查詢不同的終端裝置； screen最為常用：查詢目前設定的螢幕；
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-QXrUtvqT-1573225537006)(E:\前端學習\自己記錄的筆記\images\screen.png)]
- and|not|only：關鍵字；将多個條件連接配接在一起共同查詢；
  - and：可以将多個媒體特性連接配接到一起，相當于“且”的意思；最為常用；生活中：“我既要娶白富美，又要走上人生颠覆”；
  - not：排除某個媒體類型，相當于“非”的意思，可以省略。生活：“我喜歡看電影，除了恐怖片”；
  - only：指定某個特定的媒體類型，可以省略。生活：“我這輩子非你不嫁”；
- (media feature)：媒體特性；
  - 對于螢幕 screen，螢幕的寬度就是一個特性；

移動web開發H5移動web開發

執行個體：
- 查詢條件加小括号；
- min-width/max-width：最小界值，最大界值；查詢條件包含等于号；

/* 寬度的最小界值500px，大于等于500px */
@media screen and (min-width:500px) {
    body {
        background-color: red;
    }
}

/* 作用：感受 螢幕 變化 */
    /* @media 定義媒體查詢的關鍵字  */
    /* mediatype： screen 螢幕*/
    /* and: 且 */
    /*  () 文法：不能省略*/
    /* media feature：條件 寬度 */
    /* 當 感受螢幕 當螢幕寬度是500px */
    /*下面設定的 CSS-Code; 會生效  */
    /* @media screen and (width:500px) {
      body {
        background-color: red;
      }
    } */
    /* min-width:最小值；從500px開始  >=500px  */
    /* @media screen and (min-width:500px) {
      body {
        background-color: red;
      }
    } */
    /* max-width：最大緻，終點是500px w <=500px*/
    
    @media screen and (max-width:500px) {
      body {
        background-color: red;
      }
    }

檔位劃分

檔位：劃分的不同範圍

/* - 檔位1：w<540px w<=539px; */
    /*     
    @media screen and (max-width:539px) {
      body {
        background-color: green;
      }
    } */
    /* - 檔位2 : 540px<=w and w< 640px; */
    /* @media screen and (min-width:540px) and (max-width:639px) {
      body {
        background-color: blue;
      }
    } */
    /* - 檔位3 : 640px<=w */
    /* @media screen and (min-width:640px) {
      body {
        background-color: pink;
      }
    } */
    /* -------------------------------------------優化寫法 */
    
    @media screen and (min-width:0px) {
      body {
        background-color: green;
      }
    }
    
    @media screen and (min-width:540px) {
      body {
        background-color: blue;
      }
    }
    
    @media screen and (min-width:640px) {
      body {
        background-color: pink;
      }
    }

特點：為什麼要從min-wdith，代碼抒寫友善，從小到大；
了解：資源引入

<!-- 320px~640px -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<!-- n>=640px -->
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

rem機關

文法：

/* 媒體查詢：感受螢幕的變化，進入我的設定範圍，下面的設定就會生效 */
    /* 下面CSS設定就會生效：設定1rem背後代表值； */
    /* 頁面中所有的元素都使用px 轉化為 rem機關，等比效果 */
    
    @media screen and (min-width:0px) {
      /* 設定1rem=20px */
      html {
        font-size: 20px;
      }
    }
    
    @media screen and (min-width:540px) {
      /* 設定1rem=30px */
      html {
        font-size: 30px;
      }
    }
    
    @media screen and (min-width:640px) {
      /* 設定1rem=40px */
      html {
        font-size: 40px;
      }
    }
    
    div {
      width: 10rem;
      height: 10rem;
      background-color: #ccc;
    }

等比原理：
- 媒體查詢：感受螢幕變化；
- 變化下設定什麼：根基rem ，設定不同檔位下1rem 背後代表的 px值；
- 實作等比變化效果；

Less

介紹

less : 讓你寫更少的代碼，實作相同的效果；
Less（Leaner Style Sheets 的縮寫）是一門 CSS 擴充語言，它擴充了CSS的動态特性。 CSS 預處理言語。
常見的CSS預處理器：Sass、Less、Stylus 。
預處理器是程式中處理輸入資料，産生能用來輸入到其他程式的資料的程式。
Less中文網址：http://lesscss.cn/

安裝

線上安裝：online 需要聯網
- 搜尋 Easy LESS
- 安裝完畢插件，重新加載下 vscode。
- 測試：儲存一下 .less 檔案，會自動生成 .css 檔案。

移動web開發H5移動web開發

變量

變量是指沒有固定的值，可以改變的。
我們CSS中的一些顔色和數值等經常使用，可以設定為變量；
文法：

//@變量名:值;
@bg:#333;
.box_1 {
  background-color: @bg;
}

.box_2 {
  background-color: @bg;
}

命名規則：
- 必須有@為字首
- 不能包含特殊字元~=+、不能以數字開頭
- 大小寫敏感區分；

嵌套

類似HTML一樣寫LESS結構；
文法：

/* css 寫法 */
#header .logo {
  width: 300px;
}

/* less 寫法 */
#header {
  .logo {
      width: 300px;
  }
}

交集|僞類|僞元素選擇器，文法：

/* css寫法 */
a:hover{
    color:red;
}

/* less寫法 */
a{
  &:hover{
      color:red;
  }
}

運算

任何數字、顔色或者變量都可以參與運算。
Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
文法：

// 數字
width: 200px - 50;

// 顔色
background-color: #666 - #222;

// 變量
@border: 5px;
border: @border solid red;

// 注意：運算符中間左右有個空格隔開 1px * 5

機關選擇：
- 如果兩個值之間隻有一個值有機關，則運算結果就取該機關
- 對于兩個不同的機關的值之間的運算，運算結果的值取第一個值的機關

rem布局-方案1

rem+媒體查詢+less 方案
操作過程：
- 第一步：
  - **原稿實作：**先拿到設計稿：假設為750px；頁面上所有的元素，在750px設計稿上進行測量，代碼實作；（流式、flex）
- 第二步：
  - **2.1 準備各個檔位下的rem **：提前準備好各個檔位下的HTML 的font-size大小；
  - 2.2 拿到目前尺寸的rem：因為我現在是750px的設計稿，是以可以得到750px這個尺寸屬于的檔位下的HTML 的font-size大小，也就是750px設計稿下的1rem值。
  - 2.3 計算比例：把頁面剛才所有的元素的PX值替換為 rem 比例值；（82px 82/50rem）;
  - 達到目标：那麼，屏變化時，1rem(基礎塊)也會變化，自然就是等比縮放；

rem布局-方案2

rem+flexible.js+less

和上個方案實作原理一樣，都是通過改變1rem(基礎塊)大小實作頁面整體元素改變；
這個方案更為推薦；

flexible.js

簡介：手機淘寶團隊出的簡潔高效移動端适配庫；和flex布局沒有任何關系
github位址：https://github.com/amfe/lib-flexible
不是通過設定CSS媒體查詢設定font-size，通過 JS 設定font-size，效果是螢幕變化一點，就有一個rem重新計算；

1rem背後代表的值

劃分10份；
設定在HTML标簽上；

function setRemUnit () {
    // docEl.clientWidth JS擷取目前螢幕的寬度
    // 除以10,得到基礎塊
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

步驟

1.flexible.js去實作連續變化，也是上面的430個檔位；
2.拿到UI設計稿，原稿實作；頁面上所有的元素，在設計稿上進行測量，代碼實作；（流式、flex）隻要是UI給圖上有标注，就是寫出來；先全部實作出來，一會統一替換；
- 在哪裡寫？less檔案
- 需要把生成的css檔案進行引入index.html；
3.設計稿寬度/10 ：1rem=??px；
4.統一替換：44/54rem;

響應式布局

響應原理

介紹

響應式布局通過同一份代碼快速、有效适配手機、平闆、PC裝置等所有的螢幕
位置：手機端(單獨制作)；<-----響應式（三端）----->PC(單獨制作)
響應布局的涉及到知識點：
- 感受到螢幕寬度的變化，媒體查詢；
- 下面要設定：布局知識：傳統布局方案（百分數控制寬度、浮動、清除浮動、定位）

檔位劃分

媒體查詢：檔位劃分；市場上預設的劃分；三個節點、四個檔位
- w<768 超小螢幕（xs : extra small）（手機，學習rem布局裡面的檔位劃分都是在這個範圍）
- 768<= w <992 小屏裝置（sm : small）（平闆）
- 992<= w <1200 中等螢幕（md: medium）（小顯示屏的PC顯示器）
- 1200<=w 大寬屏裝置（lg: large）（大桌面顯示器）

移動web開發H5移動web開發

文法：把市場上所有螢幕包括在内；

/* 1. 超小螢幕下 xs  小于 768  布局容器的寬度為 100% */
@media screen and (min-width: 0px) {
}

/* 2. 小螢幕下 sm  大于等于768  布局容器改為 750px */
@media screen and (min-width: 768px) {
}

/* 3. 中等螢幕下 md 大于等于 992px   布局容器修改為 970px */
@media screen and (min-width: 992px) {
}

/* 4. 大螢幕下 lg 大于等于1200 布局容器修改為 1170 */
@media screen and (min-width: 1200px) {
}

版心

不同的檔位下，版心不同；
檔位設定：版心；
所有的子元素都是歸于版心下，不同的版心寬度，意味着子元素要以不同的布局排版滿足使用者浏覽友好的需求；
文法：

/* 1. 超小螢幕下 xs  小于 768  布局容器的寬度為 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/* 2. 小螢幕下 sm  大于等于768  布局容器改為 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 3. 中等螢幕下 md 大于等于 992px   布局容器修改為 970px */
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 4. 大螢幕下 lg 大于等于1200 布局容器修改為 1170 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

注意：
- 媒體查詢使用符号的相關：min-，max-包含等号，後面是數值機關為px；
- 除超小屏以外：版心的寬度設定都是小于目前檔位最小界值，比如 min-width: 768px，版心是750px；原因：兩邊留白白，使用者體驗好。
- 以上市場預設劃分，可根據自己需求添加檔位；

布局

不同的檔位下，布局不同；

/* md 中屏以上 */
@media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
      [class*="col-md-1"] {
        width: 8.333333%;
      }
      [class*="col-md-2"] {
        width: 16.666666%;
      }
      [class*="col-md-3"] {
        width: 25%;
      }
      [class*="col-md-4"] {
        width: 33.3333333%;
      }
      [class*="col-md-5"] {
        width: 41.6666666666%;
      }
      [class*="col-md-6"] {
        width: 50%;
      }
      [class*="col-md-7"] {
        width: 58.33333333333%;
      }
      [class*="col-md-8"] {
        width: 66.66666666666%;
      }
      [class*="col-md-9"] {
        width: 75%;
      }
      [class*="col-md-10"] {
        width: 83.33333333%;
      }
      [class*="col-md-11"] {
        width: 91.66666666%;
      }
      [class*="col-md-12"] {
        width: 100%;
      }
    }

多個使用類字首會單獨生效？多個使用，意味着有多個檔位，若目前螢幕屬于某個檔位，直接該檔位類字首生效；

// md檔位
@media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
      [class*="col-md-1"] {
        width: 8.333333%;
      }
}

// lg 檔位
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
    [class*="col-lg-1"] {
        width: 8.333333%;
    }
}

原理：媒體查詢，内部設定不同的版心和類名；

bootstrap

利用架構 bootstrap 可非常快地搭建出響應式頁面；

重點

栅格系統：預設好寬度的類名（各個檔位）
響應式工具：

介紹

Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端響應式架構。
網址：
- 中文網：http://www.bootcss.com/
- 官網：http://getbootstrap.com/
架構：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在架構本身，有預制樣式庫、元件和插件。使用者要按照架構所規定的某種規範進行開發。

移動web開發H5移動web開發

版本：
- 2.x.x：停止維護，代碼不夠簡潔，功能不夠完善。
- 3.x.x：目前使用最多，穩定，不支援IE6-IE7。對 IE8 支援，界面效果不好，偏向用于開發響應式布局、移動裝置優先的WEB 項目。【!】
- 4.x.x：最新版，目前還不是很流行；

使用初始化

移動web開發H5移動web開發

index.html 初始化：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 要求 目前網頁 使用 IE浏覽器 最高版本的核心 來渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 視口的設定：視口的寬度和裝置一緻，預設的縮放比例和PC端一緻，使用者不能自行縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <title>Bootstrap Template</title>

    <!-- Bootstrap 的檔案引入 已經有初始化檔案 Normalize.css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--解決ie9以下浏覽器對html5新增标簽的不識别，并導緻CSS不起作用的問題-->
    <!--解決ie9以下浏覽器對 css3 Media Query  的不識别 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
    <!-- 條件注釋:解決小于IE9的版本一些問題 -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

條件注釋：滿足條件，下面代碼連結就會送出請求；

布局容器

版心設定：Bootstrap 需要為頁面内容包裹一個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類。
.container：設定不同檔位下的版心的寬度；
- 超小屏（xs : extra small）：手機； 0px <=w ；版心寬度為100%
- 小屏（sm : small）：平闆； 768px<=w ；版心寬度定為 750px
- 中屏（md: medium）：桌面；992px<=w ；版心寬度定為 970px
- 大屏（lg: large）：大桌面；1200px<=w ；版心寬度定為 1170px
.container-fluid：百分百寬度；
特點：
- 所有元素為CSS3盒子模型；
- 布局盒子有左右15pxpadding值；

預制類名

排版：初始化标簽設定

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p>...</p>

按鈕：

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

輔助類樣式：

<!-- 上下文顔色 muted 靜音-->
<p class="text-muted">...</p>

<!-- 下拉三角 -->
<span class="caret"></span>

字型圖示

使用：
- 拿來即用，開袋即食；
- 修改樣式：重新設定類名，注意權重問題；

栅格系統

作用：設定子元素在不同檔位下的布局，提前寫好了；

介紹

栅格系統，在各個檔位下，控制子元素布局不同；将版心寬度均分為12份；
各個檔位下都有預制好的類字首：

移動web開發H5移動web開發

類字首：
- 超小屏（xs : extra small）：手機；
- 小屏（sm : small）：平闆；
- 中屏（md: medium）：桌面；
- 大屏（lg: large）：大桌面；
栅格系統用于通過一系列的**行（row）與列（column）**的組合來建立頁面布局，你的内容就可以放入這些建立好的布局中，控制不同的檔位下，列的子元素占有幾份

基本使用

文法：

<!-- 中屏和以上占有6份 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
  	<div class="col-md-6">.col-md-6</div>
  </div>
</div>

<!-- 各個檔位下，按照各個檔位下布局 -->
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">1</div>
  	<div class="col-md-6 col-lg-8">2</div>
  </div>
</div>

特點：
- 單一類字首：各個檔位下的類字首，為包括目前且向上生效；例如：.col-md-6為中屏和以上占有6份；
- 多個類字首：分别按照各個檔位列劃分生效；
- 每個子項：預設左右15px的padding；
- 行（.row）可以去除父容器左右15px的padding值：.row的左右margin為-15px；

嵌套

操作：可以在已經分好的子元素中内部，繼續進行列的劃分（共12份）；.
效果：繼續在分好的布局内繼續劃分；
文法：

<!-- 直接嵌套 -->
<div class="col-sm-4">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
</div>

<!-- 使用row嵌套 -->
<div class="col-sm-4">
    <!-- 加1個行 row 這樣可以表現出抵消父元素的左右15padding值 而且高度自動和父級一樣高; -->
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移

操作：是劃分好的子項進行列的份數偏移
場景：左右布局，居中布局；
文法：

<!-- 左右對齊-->
<div class="row">
    <!-- 如果隻有一個盒子 那麼就偏移 = 12-4-4  -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

<!-- 居中-->
<div class="row">
     <!-- 如果隻有一個盒子 那麼就偏移 = (12 - 8) /2 -->
     <div class="col-md-8 col-md-offset-2">中間盒子</div>
</div>

列排序（了解）

操作：劃分份數的子項，按照列的份數進行排序；
效果：左右布局改變順序，不常用；

移動web開發H5移動web開發

文法：

<!-- 列排序 -->
<div class="row">
    <div class="col-md-4 col-lg-4 col-lg-push-8"></div>
    <div class="col-md-8 col-lg-8 col-lg-pull-4"></div>
</div>

響應式工具

預制類名，可以控制元素在各個檔位下進行顯示或隐藏；
文法：

移動web開發H5移動web開發

注意：和列類字首的參數形成對比記憶，
- col-xs-* 是超小屏（包含）以上的螢幕都是這個份數的劃分；
- 響應式工具隻是**對目前檔位下的類字首類名生效；**檔位劃分應該是封閉式；

案例-阿裡百秀

效果

移動web開發H5移動web開發

HTML代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <!-- 要求 目前網頁 使用 IE浏覽器 最高版本的核心 來渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 視口的設定：視口的寬度和裝置一緻，預設的縮放比例和PC端一緻，使用者不能自行縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BX-實戰01</title>
    <!-- Bootstrap 的檔案引入 已經有初始化檔案 Normalize.css-->
    <link href="./bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet">
    <!-- 引入我們CSS -->
    <link rel="stylesheet" href="./css/index.css">
    <!--解決ie9以下浏覽器對html5新增标簽的不識别，并導緻CSS不起作用的問題-->
    <!--解決ie9以下浏覽器對 css3 Media Query  的不識别 -->
    <!-- 條件注釋:小于IE9的版本 -->
    <!--[if lt IE 9]>
            <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
          <![endif]-->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="left col-md-2">
                <div class="logo">
                    <a href="#">
                        <img src="./images/logo.png" alt="" class="hidden-xs">
                    </a>
                    <span class="visible-xs">阿裡百秀</span>
                </div>
                <nav class="clearfix">
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活館
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活館
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活館
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活館
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活館
                    </a>
                </nav>
            </div>
            <div class="mid col-md-7">
                <div class="imgs clearfix">
                    <a href="#">
                        <img src="./upload/5.png" alt="">
                        <span>阿裡百秀</span>
                    </a>
                    <a href="#">
                        <img src="./upload/1.jpg" alt="">
                        <span>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</span>
                    </a>
                    <a href="#">
                        <img src="./upload/2.jpg" alt="">
                        <span>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</span>
                    </a>
                    <a href="#">
                        <img src="./upload/3.jpg" alt="">
                        <span>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</span>
                    </a>
                    <a href="#">
                        <img src="./upload/4.jpg" alt="">
                        <span>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</span>
                    </a>
                </div>
                <div class="news">
                    <div class="one">
                        <div class="row">
                            <div class="col-sm-9">
                                <h3>生活館 關于指甲的10個健康知識 你知道幾個？</h3>
                                <p class="text-muted hidden-xs">alibaixiu 釋出于 2015-11-23</p>
                                <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裡知識吧！</p>
                                <p class="text-muted">閱讀(2417)評論(1)贊 (18)
                                    <span class="hidden-xs">标簽：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>
                                </p>
                            </div>
                            <div class="col-sm-3 hidden-xs">
                                <img src="./upload/1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="one">
                        <div class="row">
                            <div class="col-sm-9">
                                <h3>生活館 關于指甲的10個健康知識 你知道幾個？</h3>
                                <p class="text-muted hidden-xs">alibaixiu 釋出于 2015-11-23</p>
                                <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裡知識吧！</p>
                                <p class="text-muted">閱讀(2417)評論(1)贊 (18)
                                    <span class="hidden-xs">标簽：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>
                                </p>
                            </div>
                            <div class="col-sm-3 hidden-xs">
                                <img src="./upload/1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right col-md-3">
                <div class="zg">
                    <a href="#">
                        <img src="./upload/zgboke.jpg" alt="">
                    </a>
                </div>
                <div class="box">
                    <button type="button" class="btn btn-danger ">Primary</button>
                    <h4>歡迎加入中國部落格聯盟</h4>
                    <p>這裡收錄國内各個領域的優秀部落格，是一個全人工編輯的開放式部落格聯盟交流和展示平台......</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS代碼

@media screen and (min-width: 1280px) {
  .container {
    width: 1280px;
  }
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.left .logo {
  background-color: blue;
  text-align: center;
}
.left .logo img {
  max-width: 100%;
}
.left .logo span {
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 18px;
}
.left nav {
  border-bottom: 1px solid #222;
}
.left nav a {
  display: block;
  padding-left: 35px;
  height: 50px;
  line-height: 50px;
  background-color: #ccc;
  color: #000;
}
.left nav a:hover {
  background-color: #ffffff;
  color: #000;
}
@media screen and (max-width: 991px) {
  .left nav {
    border-bottom: 1px solid #222;
    margin-bottom: 10px;
  }
  .left nav a {
    float: left;
    width: 20%;
  }
}
.mid .imgs {
  border-bottom: 1px solid #ccc;
}
.mid .imgs a {
  position: relative;
  float: left;
  width: 25%;
  height: 133px;
  border-left: 10px solid #fff;
  border-bottom: 10px solid #fff;
}
.mid .imgs a img {
  width: 100%;
  height: 100%;
}
.mid .imgs a:first-child {
  width: 50%;
  height: 266px;
  border-left: 0;
}
.mid .imgs a:first-child span {
  font-size: 24px;
}
.mid .imgs a span {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px;
  width: 100%;
  height: 44px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.7);
}
.mid .news {
  padding: 5px 0;
}
.mid .news .one {
  border-bottom: 1px solid #ccc;
}
.mid .news img {
  margin-top: 5px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .mid .imgs a {
    width: 50%;
    border: 0;
    border-bottom: 10px solid #fff;
  }
  .mid .imgs a:first-child {
    width: 100%;
  }
  .mid .imgs a:nth-child(2n) {
    border-right: 5px solid #fff;
  }
  .mid .imgs a:nth-child(2n+3) {
    border-left: 5px solid #fff;
  }
  .mid .news {
    padding: 5px 0;
  }
  .mid .news .one {
    border-bottom: 1px solid #ccc;
  }
  .mid .news img {
    margin-top: 5px;
    width: 100%;
  }
}
.right .zg img {
  width: 100%;
}
.right .box {
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid #ccc;
}
.right .box button {
  border-radius: 0;
}
.right .box h4 {
  margin-top: 25px;
}