发表于： 2016-08-20 00:04:07
3 1216
今天完成的事：九宫格算是弄明白一些了。
1.把九宫格设置成居中：margin: 0 auto
2.添加圆角：border-radius: 5%
3.把九宫格做成自适应：用%。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>text1:九宫格</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
border: 2px solid gray;
width: 400px;
height: 400px;
margin: 0 auto;
}
.box1{
width: 30%;
height: 30%;
float: left;
background: orange;
margin: 2% 0 0 2%;
border-radius: 5%;
}
</style>
<body>
<div id="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>
结果：
明天计划的事情：任务一剩下的做完。
收获：总结一下，通过做九宫格，学到的知识：
1.做九宫格首先用到的就是盒子模型，因为是块级元素，它是单独霸占一行的，设置成内联元素就不能设置边距，所以就要用到float。九个格子要先放到一个大盒子里，设置好格子的宽和高后，加上float属性，九个格子会自动逐行排列，一行占满了，就会另起一行。
2.昨天一直不太理解margin怎么设置，后来看了师兄们的属性后日报才理解（还是那句话：日报比百度管用）。如果设置成左浮动，那么只需要设置左边界和上边界就行了（因为是左浮动，就是向左看齐，看左不看有；因为是从上往下排列，看上不看下），3个盒子的宽加上4个边界的宽（实际上只设置了3个，最右边的边界是100%减剩下）接近100%就行了（看师兄的日报说正好是100%会出问题，就强迫症也没办法了）。
3.加的圆角是抄的别人的，自己改成%，发现也能用。
总的来说，就是学会了简单的网页布局，整体的布局有了才好写网页。
返回列表
评论