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、#brick83、#brick84 ，#brick85，#brick86，#brick87，#brick88，#brick89，#brick90，#brick91，#brick92，#brick93，#brick94，#brick95，#brick96，#brick97，#brick98，#brick99，#brick100，# 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"> </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> · 请参阅我的<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>
