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讓其顯示在屋頂前面，并遮住橢圓的一半。
06
看下頁面現在的效果。有了小房的形狀了。
07
再加上個門，完整的html如圖。
<div class="qian">
<div class="men"></div>
</div>
08
為門加上css樣式，除了設置寬，高，背景色，關鍵的也是定位，通過設置left, top屬性，可以讓門顯示在墻壁的下方中間。
left: 54px;
position: absolute;
top: 88px;
09
最終的效果如圖，簡單的小屋就完成了。
End