天貓商品牆

• 網格狀佈局：

1.  ul li 佈局

2.  float: left; 使得元素在一行。注意： 父元素解決高度塌陷

3.  ul 設定固定寬，使得元素擠下去

4.  給父元素加一個 padding-left 和 padding-top 使得 背景色縫隙 充當 網格最左邊的邊線

5.  給 li 同意加 一個 margin-right 和 margin-bottom，使得 背景色縫隙 充當 網格線

• li 的結構
• 3D 空間

  • <div class
     
    ="double_face">
        <div class="img_nav_back">
            <img src="./img/"/>
        </div>
    
        <div class="img_nav_front">
            <img src="./img/"/>
        </div>
    </div>

     

  • 加背景要給兩張圖片的 父元素 div 加

• mask 遮罩
  • 1

• 切換按鈕
  • 滑鼠進入，無過渡動畫    #btn:hover { transition: 0; }
  • 滑鼠離開，有過渡動畫
  • 點選計次
  • 翻轉延遲差（斜線陣列控制，取餘獲得列數）
    • • colNum = arrIndex % 總列數;
      • rowNum = Math.floor(arrIndex / 總列數);
      • 延時 arr[i] = (coLnum+rowNum)*100; 毫秒