发表于: 2016-08-19 00:43:49
1 1337
今天终于是把住的问题解决了,接着搞!
今天完成的事:整半天才把九宫格的雏形弄出来。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>九宫格</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 2px solid gray;
width: 360px;
height: 360px;
}
.box1{width: 100px;
height: 100px;
float: left;
background: orange;
margin: 10px;
}
</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>
成果展示:
明天计划的事:九宫格还不太完善,明天整完。
遇到的问题:主要是一开始想的太复杂了,把每个“盒子”都设置了一边,也没弄好。后来又看了看盒子模型和浮动定位,也看了别人的日报,才做到这一步。但是还不太明白总的宽度设置成多少正好,%也不会算,我这是随便试出来的。。。
收获:人生中第一次写代码,努力吧!
评论