关于用HTML制作一个七巧板

      大家都知道七巧板用很多图形(例如:等腰直角三角形,平行四边形,正方形)做成的,因为上课时老师讲完了三角形如何构造的,那么老师突发奇想布置了这样一个作业。

关于用HTML制作一个七巧板_第1张图片

        当大家看见了这个作业时,一开时想到了很多办法,我当时第一反应先构造图形,再定位在一个容器里,可是当我动手去做的时候发现并不是那么容易,尤其算一些边长的时候很是烦躁。后来我突发奇想,把这个大正方形分成了16个小正方形先排列出来,然后再去改颜色,让其达到效果,做的时候你会发现排列起来还是有点难度,首先div不能同行排列,当你转换成inline-block标签时,所有的就变成一行了。然后就想到了把容器固定一个宽度,后来你会发现你做的图形是下面的这样。

关于用HTML制作一个七巧板_第2张图片

后来查找资料才知道这是因为代码换行被解析了,查找资料让我在父级给一个font-size:0;然后才解决出来。通过这次作业懂了不少东西,值得我记下来。。。

你可能感兴趣的:(关于用HTML制作一个七巧板)