1. 首先看下九宫格的效果图:
2. html代码比较简单,如下:
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
3. css代码也不多 : )
* { padding: 0; margin: 0; }
.main {
background-color: #fff;
100%;
padding-bottom: 100%;
padding-left: 0.5%;
padding-top: 0.5%;
}
.main>div {
31%;
padding-bottom: 31%;
border: 1% solid #fff;
background-color: mediumpurple;
border-radius: 3%;
float: left;
margin: 1%;
}
接下来分析一下如何实现等宽高的,这里主要使用 padding-bottom 属性来实现高与宽一样的!
1. padding 属性 : 当该属性的值用%表示时, 是基于父元素的宽度的百分比 的内边距。
上面的css代码就是通过设置padding与宽度的百分比一致来实现等宽高的格子的 : )
2. 要实现九个格子固定位置, 还要计算出每个格子的宽度以及边距margin, 这些是根据项目的实际情况计算的 : )
但上面仅仅是实现没有内容的九宫格,如果往里面添加内容,是会乱的, 所以下面说一下如果往格子里添加内容(完整代码):
<!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=no">
<meta name="format-detection" content="telephone=no">
<title>九宫格</title>
<style>
* { padding: 0; margin: 0; }
.main {
background-color: #fff;
100%;
padding-bottom: 100%;
padding-left: 0.5%;
padding-top: 0.5%;
}
.main .box {
31%;
padding-bottom: 31%;
border: 1% solid #fff;
background-color: mediumpurple;
border-radius: 3%;
float: left;
margin: 1%;
position: relative; /*父元素给相对定位*/
}
.main .box .content {
position: absolute; /*子元素给绝对定位*/
100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="content">
格子1
</div>
</div>
<div class="box">
<div class="content">
格子2
</div>
</div>
<div class="box">
<div class="content">
格子3
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
格子内部是一个和格子等宽高的div元素,我们可以在这个标签内添加图标文字,组成一个好看的导航栏 : )
好啦,本次的分享就写到这里啦, 不懂的可以在下面留言 : )