Html, Css制作显示简单的小屋

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

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

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

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

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

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

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

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

07、再加上个门,完整的html如图。
<divclass="qian">
<divclass="men"></div>
</div>

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

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