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

2022-10-17 20:45:42 发布:网友投稿来源：网友投稿

热度:94

做网页开发，有时候需要在页面呈现一些小场景，比如显示一个球，显示一间小屋，显示一棵小树等等，有时会结合图片来显示，有时直接用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
最终的效果如图，简单的小屋就完成了。