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

做网页开发，有时候需要在页面呈现一些小场景，比如显示一个球，显示一间小屋，显示一棵小树等等，有时会结合图片来显示，有时直接用html+css来显示。 <br/>下面我们一起来看下，直接用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让其显示在屋顶前面，并遮住椭圆的一半。