css 九宫格
2018-07-01 本文已影响41人
阿昕_
效果
效果图.png
技术点
- 样式重置
- 弹性布局
- 盒模型
- margin负值
- css3选择器
- z-index
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding: 200px;
}
ul{
list-style: none;
display: flex;
flex-wrap: wrap;
width: 300px;
}
li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: -2px;
margin-top: -2px;
}
li:nth-child(3n+1){
margin-left: 0;
}
li:nth-child(-n+3){
margin-top: 0;
}
li:hover{
border: 2px solid red;
z-index: 2;
}
</style>
<body>
<ul id="wrap">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
