一道九宫格的题目
2016-09-29 本文已影响450人
进击的前端
今天做到一道题，当时没写出来，这道题是类似九宫格的布局，而且加了高亮效果。开头用table做，但是发现table的元素并不能用z-index,
<html>
<head>
<style type="text/css">
.grid{background: #fff;width:170px;display: table;}
.grid div{width:50px; height: 50px; border: 5px solid #00f; display: inline-block;text-align: center;background-color: #eee;margin:-5px 0 0 -5px;line-height: 50px;z-index: 1;position: relative; left:5px; top:5px;}
.grid div:hover{border-color:#f00;z-index: 10;}
</style>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
尝试过用table,主要的技巧是border-collapse，但是，hover的时候position:relative没有用，absolute会偏移，不知道是什么问题，css还是太弱了啊
更新
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.box {
width: 50px;
height: 50px;
border: 2px solid blue;
display: flex;
align-items: center;
justify-content: center;
}
.box:nth-of-type(n+2){
margin-left: -2px;
}
.row:nth-of-type(n+2){
margin-top: -2px;
}
.box:hover {
border-color: red;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="row">
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</div>
</body>
</html>
