首頁>網頁設計教程>網頁特效

CSS程式碼表現一棟漂亮的房子的特效

作者：Eve Cole 更新時間：2009-06-12 19:27:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS House（3D 邊框示範 2），作者：Chris Hester</title>
<樣式類型=“文字/css”>
/* 感謝Big John在IE5/Win中的反覆測試！ */
/* http://positioniseverything.net */
* {
字型系列：Verdana、Arial、Helvetica、sans-serif；
字體大小：12px；
行高：14px；
}
身體 {
保證金：0；
填充：0；
背景顏色：#fff；
顏色：#000； // 請在此張貼海報：http: //digg.com/design/CSS_House
}
/* 將所有div定義為bricks以節省代碼。稍後覆蓋任何非磚塊的值*/
/* 先處理IE5的破盒子模型。以下規則僅適用於 IE */
/*請參閱http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* html div {
寬度：60px； /* IE5/Win 的總框寬度（邊框 + 填滿 + 寬度） */
寬度idth:52px; /* 其他版本的IE取得這個寬度 */
高度：26px； /* 盒子總高度 */
身高：18px；
}
/* 現在處理所有其他 CSS 瀏覽器 */
div {
位置：絕對；
寬度：52px；
高度：18px；
保證金：0；
填充：0；
上邊框：4px實心#f00；
左邊框：4px實心#e00；
邊框底部：4px實心#b00；
右邊框：4px實心#c00；
背景顏色：#d00；
z 索引：1；
}
* html#屋頂{
寬度：758px；
寬度idth:500px;
高度：150px；
高右：50px；
}
＃屋頂 {
頂部：4px；
左：10px；
寬度：500px；
高度：50px；
頂部邊框：0px實心#fc0；
左邊框：129px 實線#fff；
邊框底部：100px實心#575；
右邊框：129px 實線#fff；
背景顏色：#fff；
}
* html #roof2 {
寬度：632px；
寬度idth：374px；
高度：90px；
高右：40px；
}
#屋頂2 {
頂部：14px；
左：73px；
寬度：374px；
高度：40px；
頂部邊框：0px實心#fc0；
左邊框：129px 實線#fff；
邊框底部：50px實心#686；
右邊框：129px 實線#fff；
背景顏色：#fff；
z 索引：2；
}
#brick1、#brick2、#brick3、#brick4、#brick5、#brick9、#brick10、#brick11、#brick12 {上方：180px;}
#brick1 {左：30px;}
#brick2 {左：90px;}
#brick3 {左：150px;}
#brick4 {左：210px;}
* html #brick5 {
寬度：240px；
寬度idth:232px;
}
#brick5 {左：270px;寬度：232px；}
#brick9 {左：510px;}
#brick10 {左：570px;}
#brick11 {左：630px;}
#brick12 {左：690px;}
#brick13、#brick14、#brick15、#brick16、#brick17、#brick18 {上：206px;}
/* IE5/Win 一次處理所有半磚 */
* html #brick13，* html #brick15，* html #brick16，* html #brick18，* html #brick23，* html #brick24，* html #brick25，
* html #brick26，* html #brick27，* html #brick28，* html #brick29，* html #brick30，* html #brick31，* html #brick32，
* html #brick33，* html #brick34，* html #brick35，* html #brick36，* html #brick37，* html #brick38，* html #brick39，
* html #brick41，* html #brick42，* html #brick44，* html #brick61，
* html #brick79，* html #brick92，* html #brick65，* html #brick96，* html #brick66，* html #brick97，* html #brick70，
* html #brick91，* html #brick101，* html #chbrick2，* html #chbrick3，* html #chbrick6，* html #chbrick7，
* html #chbrick2，* html #chbrick3，* html #chbrick6，* html #chbrick7 {
寬度：30px；
寬度idth:22px;
}
#brick13 { /* 半磚 */
左：30px；
寬度：22px；
}
#brick14 {
左：60 像素；
寬度：172px；
}
#brick15 { /* 半磚 */
左：240px；
寬度：22px；
}
#brick16 { /* 半磚 */
左：510px；
寬度：22px；
}
#brick17 {
左：540px；
寬度：172px；
}
#brick18 { /* 半磚 */
左：720px；
寬度：22px；
}
* html #brick14，* html #brick17 {
寬度：180px；
寬度idth:172px;
}
#brick19、#brick20、#brick21、#brick34、#brick22 {上：232px;}
#brick19 {左：30px;}
#brick20 {左：210px;}
#brick21 {左：510px;}
#brick22 {左：690px;}
#brick23、#brick24、#brick25、#brick26、#brick27、#brick28、#brick29、#brick30 {
上：258px；
寬度：22px；
}
#brick31、#brick32、#brick33、#brick34、#brick35、#brick36、#brick37、#brick38 {
頂部：310px；
寬度：22px；
}
#brick39，#brick41，#brick42，#brick44 {
頂部：362px；
寬度：22px；
}
#brick40，#brick43 {上：362px;}
#brick23、#brick31、#brick39 {左：30px;}
#brick24，#brick32 {左：60px;}
#brick25，#brick33 {左：210px;}
#brick26、#brick34、#brick41 {左：240px;}
#brick27、#brick35、#brick42 {左：510px;}
#brick28，#brick36 {左：540px;}
#brick29，#brick37 {左：690px;}
#brick30、#brick38、#brick44 {左：720px;}
#磚40 {
左：60 像素；
寬度：172px；
}
#brick43 {
左：540px；
寬度：172px；
}
* html #brick40，* html #brick43 {
寬度：180px；
寬度idth:172px;
}
#brick45、#brick46、#brick47、#brick48 {上：284px;}
#brick49、#brick50、#brick51、#brick52 {上：336px;}
#brick45，#brick49 {左：30px;}
#brick46，#brick50 {左：210px;}
#brick47，#brick51 {左：510px;}
#brick48，#brick52 {左：690px;}
#brick53、#brick54、#brick55、#brick59、#brick56、#brick57、#brick58、#brick60、#brick61 {上方：388px;}
#brick53 {左：30px;}
#brick54 {左：90px;}
#brick55 {左：150px;}
#brick56 {左：210px;}
#brick57 {左：510px;}
#brick58 {左：570px;}
#brick59 {左：630px;}
#brick60 {左：690px;}
#brick61、#brick62、#brick63、#brick64、#brick65、#brick66、#brick67、#brick68、#brick69、#brick70、#brick71、#brick79、#brick80、#brick81、#brick82、#brick ，#brick85，#brick86，#brick87，#brick88，#brick89，#brick90，#brick91，#brick92，#brick93，#brick94，#brick95，#brick96，#brick97，#brick98，#brick90，#brick109，# rick101 {頂部：466px;}
#brick61、#brick62、#brick63、#brick64、#brick65、#brick66、#brick67、#brick68、#brick69、#brick70 {上方：414px;}
#brick79、#brick80、#brick81、#brick82、#brick83、#brick84、#brick85、#brick86、#brick87、#brick88、#brick89、#brick90、#brick91 {上方：154px;}
#brick92、#brick93、#brick94、#brick95、#brick96、#brick97、#brick98、#brick99、#brick100、#brick101 {上：466px;}
#brick61, #brick79, #brick92 { /* 半磚 */
左：30px；
寬度：22px；
}
#brick62、#brick80、#brick93 {左：60px;}
#brick63、#brick81、#brick94 {左：120px;}
#brick64、#brick82、#brick95 {左：180px;}
#brick65, #brick96 { /* 半磚 */
左：240px；
寬度：22px；
}
#brick83 {左：240px;}
#brick84 {左：300px;}
#brick85 {左：360px;}
#brick86 {左：420px;}
#brick87 {左：480px;}
#brick66, #brick97 { /* 半磚 */
左：510px；
寬度：22px；
}
#brick67、#brick88、#brick98 {左：540px;}
#brick68、#brick89、#brick99 {左：600px;}
#brick69、#brick90、#brick100 {左：660px;}
#brick70, #brick91, #brick101 { /* 半磚 */
左：720px；
寬度：22px；
}
#brick71、#brick72、#brick73、#brick74、#brick75、#brick76、#brick77、#brick78 {上方：440px;}
#brick71 {左：30px;}
#brick72 {左：90px;}
#brick73 {左：150px;}
#brick74 {左：210px;}
#brick75 {左：510px;}
#brick76 {左：570px;}
#brick77 {左：630px;}
#brick78 {左：690px;}
/* 深色長磚 + 煙囪 */
#brick5、#brick14、#brick17、#brick40、#brick43、#chbrick1、#chbrick2、#chbrick3、#chbrick4、#chbrick5、#chbrick6、#chbrick7、#chbrick8 {
頂部邊框：4px實心#d00；
左邊框：4px實心#c00；
邊框底部：4px實心#900；
右邊框：4px實心#a00；
背景顏色：#b00；
z 索引：2；
}
#chbrick1、#chbrick2、#chbrick4 {左：179px;}
#chbrick5、#chbrick6、#chbrick7、#chbrick8 {左：539px;}
#chbrick3 {左：209px;}
#chbrick7 {左：569px;}
#chbrick1，#chbrick5 {上：8px;}
#chbrick2，#chbrick3，#chbrick6，#chbrick7 {
頂部：34px；
寬度：22px；
}
#chbrick4，#chbrick8 {上：60px;}
/* 窗格 */
#pane1L，#pane2L，#pane3L，#pane1R，#pane2R，#pane3R {
內邊距：10px；
上邊框：4px實心#a98；
左邊框：10px實心#cba；
邊框底部：3px實心#f3e3d3；
右邊框：10px 實線#e9d8c7；
背景顏色：#666；
z 索引：3；
}
* html #pane1L，* html #pane1R {
寬度：108px；
寬度idth:68px;
高度：29 像素；
身高：18px；
}
#pane1L {
頂部：238px；
左：96 像素；
寬度：68px；
高度：18px；
上邊框：9px實心#a98；
}
* html #pane2L，* html #pane2R {
寬度：53px；
寬度idth:19px;
高度：66 像素；
高右：36px；
}
#pane2L {
頂部：291px；
左：96 像素；
寬度：19px；
高度：36px；
右邊框：4px實心#e9d8c7；
邊框底部：6px實心#f3e3d3；
}
* html #pane3L，* html #pane3R {
寬度：52px；
寬度idth:18px;
高度：66 像素；
高右：36px；
}
#pane3L {
頂部：291px；
左：152px；
寬度：18px；
高度：36px；
左邊框：4px實心#cba；
邊框底部：6px實心#f3e3d3；
}
#pane1R {
頂部：238px；
左：576px；
寬度：68px；
高度：18px；
上邊框：9px實心#a98；
}
#pane2R {
頂部：291px；
左：576px；
寬度：19px；
高度：36px；
右邊框：4px實心#e9d8c7；
邊框底部：6px實心#f3e3d3；
}
#pane3R {
頂部：291px；
左：632px；
寬度：18px；
高度：36px；
左邊框：4px實心#cba；
邊框底部：6px實心#f3e3d3；
}
#windowL，#windowR {
頂部：232px；
寬度：120px；
高度：130px；
邊框：無；
背景顏色：#fed；
z 索引：2；
}
#windowR {左：90px;}
#windowL {左：570px;}
* html p.door {
寬度：142px；
寬度idth:102px;
高度：222px；
他右：187px；
}
p.門{
寬度：102px；
高度：187 像素；
保證金：0；
內邊距：10px；
頂部邊框：9px實心#800；
右邊框：10px實心#b00；
邊框底部：6px實心#ccc；
左邊框：10px實心#b00；
背景顏色：#fed；
z 索引：2；
}
* html #inner {
寬度：182px；
寬度idth:142px;
高度：250px；
他右：222px；
}
#內部{
職位：親屬；
寬度：142px；
高度：222px；
內邊距：0 0 10px 0；
上邊框：10px實心#900；
左邊框：20px 實線#c00；
邊框底部：8px實心#ccc；
右邊框：20px實心#c00；
背景顏色：#888；
}
* html #outer {
寬度：240px；
寬度idth:182px;
高度：286 像素；
他右：250px；
}
#外層{
頂部：206px；
左：270 像素；
寬度：182px；
高度：250px；
填充：0 0 12px 0；
上邊框：10px實心#900；
左邊框：29px 實心#d00；
邊框底部：14px實心#ccc；
右邊框：29px 實心#d00；
背景顏色：#888；
}
* html #doorpane1，* html #doorpane2，* html #doorpane3，* html #doorpane4 {
寬度：39px；
寬度idth:31px;
高度：68px；
身高：60px；
}
#門板1，#門板2，#門板3，#門板4 {
寬度：31px；
高度：60px；
上邊框：4px實心#a98；
左邊框：4px實心#cba；
邊框底部：4px實心#f3e3d3；
右邊框：4px實心#e9d8c7；
背景顏色：#fed；
z 索引：3；
}
#門板1 {
頂部：250px；
左：344px；
}
#門板2 {
頂部：250px；
左：397 像素；
}
#門板3 {
頂部：359px；
左：344px；
}
#門板4 {
頂部：359px；
左：397 像素；
}
* html #handle {
寬度：23px；
寬度idth:15px;
高度：10px；
高右：2px；
}
＃處理 {
字體大小：1px； /* --- 阻止 div 成為 no */
行高：1px； /* -/ IE6 中小於 16px 高度 */
頂部：331px；
左：416px；
寬度：15px；
高度：2px；
上邊框：4px實心#fda；
左邊框：4px實心#ec9；
邊框底部：4px實心#b96；
右邊框：4px實心#ca7；
背景顏色：#db8；
z 索引：3；
}
* html #handlebase {
寬度：10px；
寬度idth:2px;
高度：23px；
高右：15px；
}
#句柄庫{
字體大小：1px； /* --- 阻止 div 成為 no */
行高：1px； /* -/ IE6 中小於 16px 高度 */
頂部：327px；
左：433px；
寬度：2px；
高度：15px；
上邊框：4px實心#fda；
左邊框：4px實心#ec9；
邊框底部：4px實心#b96；
右邊框：4px實心#ca7；
背景顏色：#666；
z 索引：2；
}
* html #textbox {
寬度：720px；
寬度idth:680px;
}
#文字方塊{
頂部：492px；
左：30px；
寬度：680px；
內邊距：20px；
高度：自動；
文字對齊：居中；
邊框：無；
背景顏色：#eee；
}
</風格>
</頭>
<正文>
<div id="屋頂"></div>
<div id="屋頂2"></div>
<div id="chbrick1"></div>
<div id="chbrick2"></div>
<div id="chbrick3"></div>
<div id="chbrick4"></div>
<div id="chbrick5"></div>
<div id="chbrick6"></div>
<div id="chbrick7"></div>
<div id="chbrick8"></div>
<div id="brick1"></div>
<div id="brick2"></div>
<div id="brick3"></div>
<div id="brick4"></div>
<div id="brick5"></div>
<div id="brick9"></div>
<div id="brick10"></div>
<div id="brick11"></div>
<div id="brick12"></div>
<div id="brick13"></div>
<div id="brick14"></div>
<div id="brick15"></div>
<div id="brick16"></div>
<div id="brick17"></div>
<div id="brick18"></div>
<div id="brick19"></div>
<div id="brick20"></div>
<div id="brick21"></div>
<div id="brick22"></div>
<div id="brick23"></div>
<div id="brick24"></div>
<div id="brick25"></div>
<div id="brick26"></div>
<div id="brick27"></div>
<div id="brick28"></div>
<div id="brick29"></div>
<div id="brick30"></div>
<div id="brick31"></div>
<div id="brick32"></div>
<div id="brick33"></div>
<div id="brick34"></div>
<div id="brick35"></div>
<div id="brick36"></div>
<div id="brick37"></div>
<div id="brick38"></div>
<div id="brick39"></div>
<div id="brick40"></div>
<div id="brick41"></div>
<div id="brick42"></div>
<div id="brick43"></div>
<div id="brick44"></div>
<div id="brick45"></div>
<div id="brick46"></div>
<div id="brick47"></div>
<div id="brick48"></div>
<div id="brick49"></div>
<div id="brick50"></div>
<div id="brick51"></div>
<div id="brick52"></div>
<div id="brick53"></div>
<div id="brick54"></div>
<div id="brick55"></div>
<div id="brick56"></div>
<div id="brick57"></div>
<div id="brick58"></div>
<div id="brick59"></div>
<div id="brick60"></div>
<div id="brick61"></div>
<div id="brick62"></div>
<div id="brick63"></div>
<div id="brick64"></div>
<div id="brick65"></div>
<div id="brick66"></div>
<div id="brick67"></div>
<div id="brick68"></div>
<div id="brick69"></div>
<div id="brick70"></div>
<div id="brick71"></div>
<div id="brick72"></div>
<div id="brick73"></div>
<div id="brick74"></div>
<div id="brick75"></div>
<div id="brick76"></div>
<div id="brick77"></div>
<div id="brick78"></div>
<div id="brick79"></div>
<div id="brick80"></div>
<div id="brick81"></div>
<div id="brick82"></div>
<div id="brick83"></div>
<div id="brick84"></div>
<div id="brick85"></div>
<div id="brick86"></div>
<div id="brick87"></div>
<div id="brick88"></div>
<div id="brick89"></div>
<div id="brick90"></div>
<div id="brick91"></div>
<div id="brick92"></div>
<div id="brick93"></div>
<div id="brick94"></div>
<div id="brick95"></div>
<div id="brick96"></div>
<div id="brick97"></div>
<div id="brick98"></div>
<div id="brick99"></div>
<div id="brick100"></div>
<div id="brick101"></div>
<div id="外部">
<div id="內部">
<p class="door">&nbsp;</p>
</div>
</div>
<div id="doorpane1"></div>
<div id="doorpane2"></div>
<div id="doorpane3"></div>
<div id="doorpane4"></div>
<div id="句柄"></div>
<div id="handlebase"></div>
<div id="windowL"></div>
<div id="pane1L"></div>
<div id="pane2L"></div>
<div id="pane3L"></div>
<div id="windowR"></div>
<div id="pane1R"></div>
<div id="pane2R"></div>
<div id="pane3R"></div>
<div id="textbox"><b>CSS House</b> 作者： <a href=" http://www.designDetector.com">Chris Hester</a> &middot; 請參考我的<a href=" http://www.designDetector.com/demos/css-house-2.html">CSS House 2</a>
<br/>
<br />建於 2003 年 10 月 16 日最後更新於 2006 年 3 月 16 日<a href=" http://www.designDetector.com/archives/03/10/3DBorderDemo2.php#comments">評論</a> | <a href=" http://www.designDetector.com/tips/3DBorderDemo2-trackbacks.html">引用</a> | <a href=" http://www.designDetector.com/archives/03/10/3DBorderDemo2.php">關於</a></div >
</正文>
</html>
相關文章