html布局以及基础样式代码如下
响应式九宫格html, body { color:#222; margin:0; padding: 0; text-decoration: none; }
ul { list-style: none outside none; margin:0; padding: 0; }
body { background-color:#eee; }
ul li:nth-child(8n+1) {background-color:#36A1DB}
ul li:nth-child(8n+2) {background-color:#678ce1}
ul li:nth-child(8n+3) {background-color:#8c67df}
ul li:nth-child(8n+4) {background-color:#84d018}
ul li:nth-child(8n+5) {background-color:#14c760}
ul li:nth-child(8n+6) {background-color:#f3b613}
ul li:nth-child(8n+7) {background-color:#ff8a4a}
ul li:nth-child(8n+8) {background-color:#fc5366}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
方法一：浮动+宽度百分比
关键代码：
body ul:after { clear: both; content: " "; display: block; }
ul li{ float:left; width: 30%; height:30%; margin-top: 2.5%; margin-left: 2.5%; }
方法二：flex布局+宽度百分比
关键代码：
ul{ display: flex;justify-content: space-between;flex-wrap: wrap;}
ul li{width: 30%; margin-top: 2.5%; }
