Html, Css製作顯示簡單的小屋

做網頁開發，有時候需要在頁面呈現一些小場景，比如顯示一個球，顯示一間小屋，顯示一棵小樹等等，有時會結合圖片來顯示，有時直接用html+css來顯示。
下面我們一起來看下，直接用html+css來顯示一間簡單的小屋。

操作方法

（01）我們先寫個容器div，小房就放在這個容器裡，看下html程式碼，<div class="fang_zi"> </div>和小房的css樣式，主要是設定position: relative; 讓容器裡的元素定位是相對於這個容器來定位。_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）最終的效果如圖，簡單的小屋就完成了。