九宫格
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;
}
