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
最终的效果如图，简单的小屋就完成了。