flex布局绘制国际象棋棋盘
纯属无聊，选择样式写的很烂。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<title>Title</title>
<style>
article {
width: 800px;
height: 800px;
display: flex;
border: solid 2px yellowgreen;
margin: 50px auto;
flex-wrap: wrap;
}
article div {
width: 100px;
height: 100px;
box-sizing: border-box;
}
article :nth-child(16n+1),
article :nth-child(16n+3),
article :nth-child(16n+5),
article :nth-child(16n+7),
article :nth-child(16n+10),
article :nth-child(16n+12),
article :nth-child(16n+14),
article :nth-child(16n+16) {
background-color: #ddd;
}
article :nth-child(16n+2),
article :nth-child(16n+4),
article :nth-child(16n+6),
article :nth-child(16n+8),
article :nth-child(16n+9),
article :nth-child(16n+11),
article :nth-child(16n+13),
article :nth-child(16n+15) {
background-color: black;
}
</style>
</head>
<body>
<article id="outline">
</article>
<script>
for(let i = 1; i <= 64; i++)
{
let div = document.createElement("div");
document.getElementById("outline").appendChild(div);
}
</script>
</body>
</html>
