HTML中用 div 绘制一个简单的房子

昨天上午老师给我们简单讲了 CSS 中的 div，下午让我们画一个房子练手。我们可以将 div 理解成为一个盒子，而盒子中又可以放别的盒子，每个盒子中的内容互不影响，相对独立。因此，只要将图形中的内容进行细分，然后利用 div 进行嵌套封装。可以类比 Office 中的图形组合，将部分图形组合之后，它们的相对位置就不在发生变化，然后再跟其他的图形组合，直至组合到所有的图形位置，这样整个图形中元素都相对固定了。不得不吐槽的是，用 div 画图真的十分鸡肋，由于需要 div 的层层嵌套，代码量十分冗杂，因此，这个代码权当是加深对 div 的理解了。代码写的比较随心所欲，不过我是不想再优化了。