- 1.background-size: cover讓背景圖填滿
- 2.background-repeat: no-repeat;讓填滿模式為非重複式
- 3.background: rgba(0,0,0,.5); 第4個屬性 alpha讓顏色為半透明
- 4.z-index: -999;讓背景能放在底部 ref http://www.astralweb.com.tw/full-screen-backround-image/
- 5.flexbox中的 justify-content:center讓內部的div置中對齊
- 6.flexbox中的 inline-flex 使用 flex-direction:row 讓每個div用row排列對齊
- 7.flexbox中的 flex-wrap: wrap設定讓 inline-flex 有換行的樣式
- 8.利用空白的div防止 不滿3格會置中的情況
- 9.利用 white-space: nowrap;不換行 text-overflow:ellipsis;以及 overflow:hidden達成文字過長顯示...