CSS3_天猫商品墙

天猫商品墙

• 网格状布局：

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; 毫秒

CSS3_天猫商品墙

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9957251.html