html 响应式布局 九宫格,两种方法实现响应式九宫格布局

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%; }