日报第二天

今天完成的事

今天勉强跟到了步骤十八，完成了一个黄色的，随窗口大小改变的，九宫格。

效果如图

实现的步骤：

1.先做了个与页面同宽的大盒子，用来装九宫格。

2.准备用<span>标签做黄格子，先设定样式。

3.设定宽为大盒子宽的31%；高用“padding-bottom”也设定为大盒子宽的31%；background-color: yellow将方块设为黄色；float: left左浮动；

   border: 10px solid #FFF在黄方块外加条白色10px的白边作为九宫格的分割。

4.到这，样式就写完了。

5.在写好的九个方块中引入上面写好的样式，完成效果。

明天的计划

1.把今天还未解决的1.2.号问题解决掉。

2再看看开发者工具的用法

3.研究研究viewport和配置nginx 让网页可以通过手机访问。

遇到的问题

1.一开始设置方块高度“height：31%”不随页面大小而改变，也不与宽度相同，无非形成正方形。后来找到了padding-bottom 百分比时也是相对于父元素的宽度这样才和方块的宽度相同，变为了正方形，同时满足缩放。

还有三个未解决的问题。

1.九宫格在页面过大或过小时，会产生显示不全或错位的现象（上图）。

2.九宫格的方块应当为圆角，而我的现在还是方角。

3.开发者工具没看明白怎么用，没有get到点，怎么用它来调整九宫格。

收获

今天算是正经写出了个东西了，把盒子、浮动、样式这些放在一起用了用，有了一个整体的感觉了。

问题还是很多呀，进度也慢，明天下午没课多进行一点，加油!