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;
width: 100%;
padding-bottom: 100%;
padding-left: 0.5%;
padding-top: 0.5%;
}
.main>div {
width: 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;
width: 100%;
padding-bottom: 100%;
padding-left: 0.5%;
padding-top: 0.5%;
}
.main .box {
width: 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; /*子元素給絕對定位*/
width: 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元素,我們可以在這個標簽內添加圖標文字,組成一個好看的導航欄 : )
好啦,本次的分享就寫到這里啦, 不懂的可以在下面留言 : )