[散修弟子]CSS-987|2016年04月07日的日报-技能树.IT修真院

发表于： 2016-04-07 23:14:29

1 1611

今天完成的任务：了解了HTML、CSS的基本概念以及盒子模型，并试着完成了一个九宫格。

明日计划的任务：学会display的用法，nginx简单配置以及学会F12调试。

遇到的问题：1、一开始完成九宫格，发现用左对齐(float-left）后，九个格子会排成一列。试了好久，终于发现只要控制父元素的宽度和高度就能让格子三个一列的排列在一起。

2、在完成九宫格的过程中，需要慢慢的翻着W3Cschool的教程，看见有些标签也回忆不起用法，感觉好生疏。

收获：通过第一天的学习，发现自己的自学能力有多差，还有英语的重要性！！！！而今天最大的收获就是发现自己在完成任务的过程中，挺开心，希望自己明天能继续努力学习！！！

最后附上今天的九宫格代码，希望各位前辈看看有没有什么问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.muwei{width:304px; height:304px; margin:0 auto;}

.jiu-1{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 2px 1px 0;}

.jiu-2{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 2px 0 0;}

.jiu-3{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 0 2px 0;}

.jiu-4{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 2px 2px 0;}

.jiu-5{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 2px 2px 0;}

.jiu-6{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 0 2px 0;}

.jiu-7{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 2px 0 0;}

.jiu-8{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 2px 0 0;}

.jiu-9{width:100px; height:100px; background:orange; border-radius:0.3em; float:left; margin:0 0 0 0;}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

返回列表