发表于： 2016-02-17 22:39:58
1 1924
今天完成的事情：完成了九宫格
明天计划的事情： 彻底完成任务一任务二
遇到的问题：遇到的问题其实蛮多的。首先了解了最好用DIV完成九宫格之后，我也开始使用DIV来完成任务。但是弄好颜色 和大小之后，发现只是竖着一排，并没有3x3的效果。 后来看别人的日报之后，发现需要用浮动（float）效果。然后就加上了float:left; 和margin:5px;使每个格子都用一些距离。但是依然没有九宫格的效果，后来指定整个盒子的大小 （就是把九个Div元素用一个大的DIV元素给装起来）再指定最外面的DIV的width和height。然后居中查到用margin:0 auto; 0表示的是上下间距是0，auto就是左右两边自动，达到居中效果。然后到这里就差不多搞定了，然后边缘四个角用border-radius元素（发现设置为100px就是一个原形了。。）
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initia-scale=1.0">
<style type="text/css">
div.container {
width:510px;
height:510px;
margin:0 auto;
}
div.block {
height:150px;
width:150px;
background:orange;
float:left;
margin:5px;
border-radius:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
收获：了解了一些元素的具体使用方法，指定CSS样式后一定要加； 元素完事后要闭合>
nginx配置好了
返回列表
评论