<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09sudoku</title>
<style type="text/css">
*{
font-size: 12px;
padding:0px;
margin:0px;
}
ul,ul li{
list-style: none;
}
ul.wrap {
width: 300px;
margin:200px auto;
display: flex;
flex-wrap:wrap;
}
ul.wrap li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border:1px solid #ccc;
margin-left:-1px;
margin-top:-1px;
box-sizing:border-box;
}
ul.wrap li:nth-child(3n+1){
margin-left:0px;
}
ul.wrap li:nth-child(1),ul.wrap li:nth-child(2),ul.wrap li:nth-child(3){
margin-top: 0px;
}
ul.wrap li:hover{
border-color: red;
z-index: 2;
}
</style>
</head>
<body>
<ul class="wrap">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
<li class="box">7</li>
<li class="box">8</li>
<li class="box">9</li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
