今天完成的事情：

完成了一个九宫格布局，看到任务详情中的效果展现图，第一印象就是九个方块都是圆角，另外这个颜色是orange。

ps: 由于没学多久，前段时间在视频网站上看视频学习，但是往往边看视频没法做到边练习的效果，也是因为自己懒吧，所以光顾着看了，现在要自己写，哪怕是很简单，心里还是觉得没底，觉得无从下手

我的思路是先量好效果展现图上单个方块的width（120px）和height（120px），然后乘以3,小方块的margin先给个2px，所以得出九宫格整体的width和height同是372px（120*3+12）。

开始写代码，先写一个外框的div，width: 372px; height: 372px; 然后在里面写9个div，分别设为：width: 120px; height: 120px; margin: 2px; background: orange; float: left;

写好了打开看下效果，和效果展现图做对比，发现几个地方存在问题：

第一，颜色对应不上，设置orange的颜色要浅很多，所以明显效果展现图的颜色不是orange；

第二，前面就有留意的圆角问题，要怎么才能设置成圆角；

第三，每个方块的间距比效果图的稍微窄了些。

针对以上问题，

第一个颜色问题，我先是查了下效果展现图的图片格式是PNG，然后再百度“如何得到PNG图片上的准确颜色值”查到有说可以通过PS打开图片然后吸取图片上的颜色，从而得到了准确的background-color: #e8830d; 

第二个圆角问题，由于以前没有遇到过，也很想知道怎么样可以达到效果图上的效果，依然百度“怎么设置圆角”从而知道了border-radius 它可以更具体的分别设置左上，右上，左下，右下四个角不同程度的样式，但是很明显 效果展现图中四个角的圆角是一致的，所以先是给了它2px 刷新看了下感觉还不够，改成5px再看了下觉得基本一样了

第三个每个方块的间距问题margin改成3px,再刷新一看跟效果展现图对照下觉得可以了。

总结：

附：完成图

明天计划的事情：

学习配置Nginx

遇到的问题：

1.不过在进行调整margin的过程我发现外边的盒子只要设置width就可以，width的值如果小于378px右边的三个小盒子因为装不下会换行排到下面去，但是height不管怎么设置都不会影响最终的效果（各位师兄，我这个疑惑还请帮忙指点下）

2.这里我还遇到了一个常规问题，我在用

<style type="text/css">

引入内部样式表的时候发现会出错，不明白是哪里出错了，所以改成的引入外部样式表。还请各位师兄指点下

收获：

感觉今天还是收获挺大的，之前看HTML，CSS的课程视频的时候看着都挺简单，只是知识量大需要大量记忆而已，所以往往心不在焉，有点走马观花的在看。但是今天到了自己实际写代码的时候才感觉到不管碰到什么样的问题，再简单的问题，如果没有找到问题所在然后去解决它，那这个问题就是自己无法跨越的坎，所以今天最大的收获是，在以后的学习中一定要多写，能自己写出来的东西才算掌握