关于用HTML制作一个七巧板

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容