九宮格
1 主頁面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宮格</title>
<link rel="stylesheet" href="css/beauty.css"/>
</head>
<body>
<div id="box">
<!-- 創建一個大盒子，里面有九個小盒子 -->
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
<div id="box8">8</div>
<div id="box9">9</div>
</div>
</body>
</html>
2 CSS美化
2.1 默認樣式
*{
/* *是通配符，給所有元素去除默認樣式 */
padding: 0;
margin: 0;
border: 0;
}
body{
width: 100%;
height: 100%;
}
2.2 九宮格大盒子
margin: 0 auto; 盒子水平居中
#box{
width: 306px;
height: 306px;
/* 盒子居中 */
margin: 0 auto;
/* 設置邊框 */
border: solid 2px;
border-color: black;
}
2.3 九宮格小盒子
line-height: 100px; 設置與邊框等同，使文字上下垂直居中
#box div{
position: relative;
width: 100px;
height: 100px;
/* 設置邊框 */
border: solid 1px;
border-color: aqua;
/* 設置行高，使文字上下垂直居中 */
line-height: 100px;
/* 設置字體大小 */
font-size: 100px;
/* 使文字水平居中 */
text-align: center;
}
2.4 位置問題
從2.3圖中位置根據position: relative;相對定位進行調整
#box1{
position: relative;
}
#box2{
top: -102px;
left: 102px;
}
#box3{
top: -204px;
left: 204px;
}
#box4{
top: -204px;
}
#box5{
top: -306px;
left: 102px;
}
#box6{
top: -408px;
left: 204px;
}
#box7{
top: -408px;
}
#box8{
top: -510px;
left: 102px;
}
#box9{
top: -612px;
left: 204px;
}
3 九宮格
主頁面index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宮格</title>
<link rel="stylesheet" href="css/beauty.css"/>
</head>
<body>
<div id="box">
<!-- 創建一個大盒子，里面有九個小盒子 -->
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
<div id="box8">8</div>
<div id="box9">9</div>
</div>
</body>
</html>
頁面美化beauty.css
*{
/* *是通配符，給所有元素去除默認樣式 */
padding: 0;
margin: 0;
border: 0;
}
body{
width: 100%;
height: 100%;
}
#box{
width: 306px;
height: 306px;
/* 盒子居中 */
margin: 0 auto;
/* 設置邊框 */
border: solid 2px;
border-color: black;
}
#box div{
position: relative;
width: 100px;
height: 100px;
/* 設置邊框 */
border: solid 1px;
border-color: aqua;
/* 設置行高，使文字上下垂直居中 */
line-height: 100px;
/* 設置字體大小 */
font-size: 100px;
/* 使文字水平居中 */
text-align: center;
}
/* 設置盒子的位置 */
#box1{
position: relative;
}
#box2{
top: -102px;
left: 102px;
}
#box3{
top: -204px;
left: 204px;
}
#box4{
top: -204px;
}
#box5{
top: -306px;
left: 102px;
}
#box6{
top: -408px;
left: 204px;
}
#box7{
top: -408px;
}
#box8{
top: -510px;
left: 102px;
}
#box9{
top: -612px;
left: 204px;
}
