Html Css制作显示简单的小屋

做网页开发，有时候需要在页面呈现一些小场景，比如显示一个球，显示一间小屋，显示一棵小树等等，有时会结合图片来显示，有时直接用html+css来显示。
下面我们一起来看下，直接用html+css来显示一间简单的小屋。

操作方法

【步骤01】

我们先写个容器div，小房就放在这个容器里，
看下html代码，
<div class="fang_zi">

</div>
和小房的css样式，主要是设置position: relative; 让容器里的元素定位是相对于这个容器来定位。
.fang_zi {
position: relative;
}

【步骤02】

然后开始做屋顶，也是用一个div来完成。屋顶的css样式如图。主要是设置宽，高，和设置边角弧度，让其呈现成一个椭圆。
<div class="fang_zi">
<div class="wd"></div>
</div>

【步骤03】

现在的页面上显示的只是一个椭圆的屋顶。如图

【步骤04】

接着是主要的墙壁，也是用一个div来呈现。
<div class="fang_zi">
<div class="wd"></div>
<div class="qian">
</div>
</div>

【步骤05】

墙壁的css样式，设置宽，高，设置背景色，并加上投影效果。
background-color: #f07957;
box-shadow: 1px 1px 3px #000;
关键是设置定位为绝对定位，position: absolute;
然后设置 top让其显示在屋顶前面，并遮住椭圆的一半。

【步骤06】

看下页面现在的效果。有了小房的形状了。

【步骤07】

再加上个门，完整的html如图。
<div class="qian">
<div class="men"></div>
</div>

【步骤08】

为门加上css样式，除了设置宽，高，背景色，关键的也是定位，通过设置left, top属性，可以让门显示在墙壁的下方中间。
left: 54px;
position: absolute;
top: 88px;

【步骤09】

最终的效果如图，简单的小屋就完成了。