做了这么多年前端，看到这个，我哭了……

jQuery3D全景效果展示插件

common.js

8月17

大 | 中 | 小

22:46tommyhu

W3C前端技术 From: 本站原创

做了这么多年前端，看到这个，我哭了……
会写几个div，放几个css，最多整点兼容性的HACK就牛逼了吗，运行下下面的代码，你会惭愧道到无地自容，纯css写出来的，拉风的，绝对的纯爷们……
css打造温馨小屋

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>CSS House (3D Border Demo 2) by Chris Hester</TITLE>
<META content="text/html; charset=ISO-8859-1" http-equiv=Content-Type>
<STYLE type=text/css>* {
  LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 12px
}
BODY {
  PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #fff; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; COLOR: #000; PADDING-TOP: 0px
}
* HTML DIV {
  WIDTH: 52px; HEIGHT: 18px
}
DIV {
  Z-INDEX: 1; BORDER-BOTTOM: #b00 4px solid; POSITION: absolute; BORDER-LEFT: #e00 4px solid; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #d00; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 52px; PADDING-RIGHT: 0px; HEIGHT: 18px; BORDER-TOP: #f00 4px solid; BORDER-RIGHT: #c00 4px solid; PADDING-TOP: 0px
}
* HTML #roof {
  WIDTH: 500px; HEIGHT: 50px
}
#roof {
  BORDER-BOTTOM: #575 100px solid; BORDER-LEFT: #fff 129px solid; BACKGROUND-COLOR: #fff; WIDTH: 500px; HEIGHT: 50px; BORDER-TOP: #fc0 0px solid; TOP: 4px; BORDER-RIGHT: #fff 129px solid; LEFT: 10px
}
* HTML #roof2 {
  WIDTH: 374px; HEIGHT: 40px
}
#roof2 {
  Z-INDEX: 2; BORDER-BOTTOM: #686 50px solid; BORDER-LEFT: #fff 129px solid; BACKGROUND-COLOR: #fff; WIDTH: 374px; HEIGHT: 40px; BORDER-TOP: #fc0 0px solid; TOP: 14px; BORDER-RIGHT: #fff 129px solid; LEFT: 73px
}
#brick1 {
  TOP: 180px
}
#brick2 {
  TOP: 180px
}
#brick3 {
  TOP: 180px
}
#brick4 {
  TOP: 180px
}
#brick5 {
  TOP: 180px
}
#brick9 {
  TOP: 180px
}
#brick10 {
  TOP: 180px
}
#brick11 {
  TOP: 180px
}
#brick12 {
  TOP: 180px
}
#brick1 {
  LEFT: 30px
}
#brick2 {
  LEFT: 90px
}
#brick3 {
  LEFT: 150px
}
#brick4 {
  LEFT: 210px
}
* HTML #brick5 {
  WIDTH: 232px
}
#brick5 {
  WIDTH: 232px; LEFT: 270px
}
#brick9 {
  LEFT: 510px
}
#brick10 {
  LEFT: 570px
}
#brick11 {
  LEFT: 630px
}
#brick12 {
  LEFT: 690px
}
#brick13 {
  TOP: 206px
}
#brick14 {
  TOP: 206px
}
#brick15 {
  TOP: 206px
}
#brick16 {
  TOP: 206px
}
#brick17 {
  TOP: 206px
}
#brick18 {
  TOP: 206px
}
* HTML #brick13 {
  WIDTH: 22px
}
* HTML #brick15 {
  WIDTH: 22px
}
* HTML #brick16 {
  WIDTH: 22px
}
* HTML #brick18 {
  WIDTH: 22px
}
* HTML #brick23 {
  WIDTH: 22px
}
* HTML #brick24 {
  WIDTH: 22px
}
* HTML #brick25 {
  WIDTH: 22px
}
* HTML #brick26 {
  WIDTH: 22px
}
* HTML #brick27 {
  WIDTH: 22px
}
* HTML #brick28 {
  WIDTH: 22px
}
* HTML #brick29 {
  WIDTH: 22px
}
* HTML #brick30 {
  WIDTH: 22px
}
* HTML #brick31 {
  WIDTH: 22px
}
* HTML #brick32 {
  WIDTH: 22px
}
* HTML #brick33 {
  WIDTH: 22px
}
* HTML #brick34 {
  WIDTH: 22px
}
* HTML #brick35 {
  WIDTH: 22px
}
* HTML #brick36 {
  WIDTH: 22px
}
* HTML #brick37 {
  WIDTH: 22px
}
* HTML #brick38 {
  WIDTH: 22px
}
* HTML #brick39 {
  WIDTH: 22px
}
* HTML #brick41 {
  WIDTH: 22px
}
* HTML #brick42 {
  WIDTH: 22px
}
* HTML #brick44 {
  WIDTH: 22px
}
* HTML #brick61 {
  WIDTH: 22px
}
* HTML #brick79 {
  WIDTH: 22px
}
* HTML #brick92 {
  WIDTH: 22px
}
* HTML #brick65 {
  WIDTH: 22px
}
* HTML #brick96 {
  WIDTH: 22px
}
* HTML #brick66 {
  WIDTH: 22px
}
* HTML #brick97 {
  WIDTH: 22px
}
* HTML #brick70 {
  WIDTH: 22px
}
* HTML #brick91 {
  WIDTH: 22px
}
* HTML #brick101 {
  WIDTH: 22px
}
* HTML #chbrick2 {
  WIDTH: 22px
}
* HTML #chbrick3 {
  WIDTH: 22px
}
* HTML #chbrick6 {
  WIDTH: 22px
}
* HTML #chbrick7 {
  WIDTH: 22px
}
* HTML #chbrick2 {
  WIDTH: 22px
}
* HTML #chbrick3 {
  WIDTH: 22px
}
* HTML #chbrick6 {
  WIDTH: 22px
}
* HTML #chbrick7 {
  WIDTH: 22px
}
#brick13 {
  WIDTH: 22px; LEFT: 30px
}
#brick14 {
  WIDTH: 172px; LEFT: 60px
}
#brick15 {
  WIDTH: 22px; LEFT: 240px
}
#brick16 {
  WIDTH: 22px; LEFT: 510px
}
#brick17 {
  WIDTH: 172px; LEFT: 540px
}
#brick18 {
  WIDTH: 22px; LEFT: 720px
}
* HTML #brick14 {
  WIDTH: 172px
}
* HTML #brick17 {
  WIDTH: 172px
}
#brick19 {
  TOP: 232px
}
#brick20 {
  TOP: 232px
}
#brick21 {
  TOP: 232px
}
#brick34 {
  TOP: 232px
}
#brick22 {
  TOP: 232px
}
#brick19 {
  LEFT: 30px
}
#brick20 {
  LEFT: 210px
}
#brick21 {
  LEFT: 510px
}
#brick22 {
  LEFT: 690px
}
#brick23 {
  WIDTH: 22px; TOP: 258px
}
#brick24 {
  WIDTH: 22px; TOP: 258px
}
#brick25 {
  WIDTH: 22px; TOP: 258px
}
#brick26 {
  WIDTH: 22px; TOP: 258px
}
#brick27 {
  WIDTH: 22px; TOP: 258px
}
#brick28 {
  WIDTH: 22px; TOP: 258px
}
#brick29 {
  WIDTH: 22px; TOP: 258px
}
#brick30 {
  WIDTH: 22px; TOP: 258px
}
#brick31 {
  WIDTH: 22px; TOP: 310px
}
#brick32 {
  WIDTH: 22px; TOP: 310px
}
#brick33 {
  WIDTH: 22px; TOP: 310px
}
#brick34 {
  WIDTH: 22px; TOP: 310px
}
#brick35 {
  WIDTH: 22px; TOP: 310px
}
#brick36 {
  WIDTH: 22px; TOP: 310px
}
#brick37 {
  WIDTH: 22px; TOP: 310px
}
#brick38 {
  WIDTH: 22px; TOP: 310px
}
#brick39 {
  WIDTH: 22px; TOP: 362px
}
#brick41 {
  WIDTH: 22px; TOP: 362px
}
#brick42 {
  WIDTH: 22px; TOP: 362px
}
#brick44 {
  WIDTH: 22px; TOP: 362px
}
#brick40 {
  TOP: 362px
}
#brick43 {
  TOP: 362px
}
#brick23 {
  LEFT: 30px
}
#brick31 {
  LEFT: 30px
}
#brick39 {
  LEFT: 30px
}
#brick24 {
  LEFT: 60px
}
#brick32 {
  LEFT: 60px
}
#brick25 {
  LEFT: 210px
}
#brick33 {
  LEFT: 210px
}
#brick26 {
  LEFT: 240px
}
#brick34 {
  LEFT: 240px
}
#brick41 {
  LEFT: 240px
}
#brick27 {
  LEFT: 510px
}
#brick35 {
  LEFT: 510px
}
#brick42 {
  LEFT: 510px
}
#brick28 {
  LEFT: 540px
}
#brick36 {
  LEFT: 540px
}
#brick29 {
  LEFT: 690px
}
#brick37 {
  LEFT: 690px
}
#brick30 {
  LEFT: 720px
}
#brick38 {
  LEFT: 720px
}
#brick44 {
  LEFT: 720px
}
#brick40 {
  WIDTH: 172px; LEFT: 60px
}
#brick43 {
  WIDTH: 172px; LEFT: 540px
}
* HTML #brick40 {
  WIDTH: 172px
}
* HTML #brick43 {
  WIDTH: 172px
}
#brick45 {
  TOP: 284px
}
#brick46 {
  TOP: 284px
}
#brick47 {
  TOP: 284px
}
#brick48 {
  TOP: 284px
}
#brick49 {
  TOP: 336px
}
#brick50 {
  TOP: 336px
}
#brick51 {
  TOP: 336px
}
#brick52 {
  TOP: 336px
}
#brick45 {
  LEFT: 30px
}
#brick49 {
  LEFT: 30px
}
#brick46 {
  LEFT: 210px
}
#brick50 {
  LEFT: 210px
}
#brick47 {
  LEFT: 510px
}
#brick51 {
  LEFT: 510px
}
#brick48 {
  LEFT: 690px
}
#brick52 {
  LEFT: 690px
}
#brick53 {
  TOP: 388px
}
#brick54 {
  TOP: 388px
}
#brick55 {
  TOP: 388px
}
#brick59 {
  TOP: 388px
}
#brick56 {
  TOP: 388px
}
#brick57 {
  TOP: 388px
}
#brick58 {
  TOP: 388px
}
#brick60 {
  TOP: 388px
}
#brick61 {
  TOP: 388px
}
#brick53 {
  LEFT: 30px
}
#brick54 {
  LEFT: 90px
}
#brick55 {
  LEFT: 150px
}
#brick56 {
  LEFT: 210px
}
#brick57 {
  LEFT: 510px
}
#brick58 {
  LEFT: 570px
}
#brick59 {
  LEFT: 630px
}
#brick60 {
  LEFT: 690px
}
#brick61 {
  TOP: 466px
}
#brick62 {
  TOP: 466px
}
#brick63 {
  TOP: 466px
}
#brick64 {
  TOP: 466px
}
#brick65 {
  TOP: 466px
}
#brick66 {
  TOP: 466px
}
#brick67 {
  TOP: 466px
}
#brick68 {
  TOP: 466px
}
#brick69 {
  TOP: 466px
}
#brick70 {
  TOP: 466px
}
#brick71 {
  TOP: 466px
}
#brick79 {
  TOP: 466px
}
#brick80 {
  TOP: 466px
}
#brick81 {
  TOP: 466px
}
#brick82 {
  TOP: 466px
}
#brick83 {
  TOP: 466px
}
#brick84 {
  TOP: 466px
}
#brick85 {
  TOP: 466px
}
#brick86 {
  TOP: 466px
}
#brick87 {
  TOP: 466px
}
#brick88 {
  TOP: 466px
}
#brick89 {
  TOP: 466px
}
#brick90 {
  TOP: 466px
}
#brick91 {
  TOP: 466px
}
#brick92 {
  TOP: 466px
}
#brick93 {
  TOP: 466px
}
#brick94 {
  TOP: 466px
}
#brick95 {
  TOP: 466px
}
#brick96 {
  TOP: 466px
}
#brick97 {
  TOP: 466px
}
#brick98 {
  TOP: 466px
}
#brick99 {
  TOP: 466px
}
#brick100 {
  TOP: 466px
}
#brick101 {
  TOP: 466px
}
#brick61 {
  TOP: 414px
}
#brick62 {
  TOP: 414px
}
#brick63 {
  TOP: 414px
}
#brick64 {
  TOP: 414px
}
#brick65 {
  TOP: 414px
}
#brick66 {
  TOP: 414px
}
#brick67 {
  TOP: 414px
}
#brick68 {
  TOP: 414px
}
#brick69 {
  TOP: 414px
}
#brick70 {
  TOP: 414px
}
#brick79 {
  TOP: 154px
}
#brick80 {
  TOP: 154px
}
#brick81 {
  TOP: 154px
}
#brick82 {
  TOP: 154px
}
#brick83 {
  TOP: 154px
}
#brick84 {
  TOP: 154px
}
#brick85 {
  TOP: 154px
}
#brick86 {
  TOP: 154px
}
#brick87 {
  TOP: 154px
}
#brick88 {
  TOP: 154px
}
#brick89 {
  TOP: 154px
}
#brick90 {
  TOP: 154px
}
#brick91 {
  TOP: 154px
}
#brick92 {
  TOP: 466px
}
#brick93 {
  TOP: 466px
}
#brick94 {
  TOP: 466px
}
#brick95 {
  TOP: 466px
}
#brick96 {
  TOP: 466px
}
#brick97 {
  TOP: 466px
}
#brick98 {
  TOP: 466px
}
#brick99 {
  TOP: 466px
}
#brick100 {
  TOP: 466px
}
#brick101 {
  TOP: 466px
}
#brick61 {
  WIDTH: 22px; LEFT: 30px
}
#brick79 {
  WIDTH: 22px; LEFT: 30px
}
#brick92 {
  WIDTH: 22px; LEFT: 30px
}
#brick62 {
  LEFT: 60px
}
#brick80 {
  LEFT: 60px
}
#brick93 {
  LEFT: 60px
}
#brick63 {
  LEFT: 120px
}
#brick81 {
  LEFT: 120px
}
#brick94 {
  LEFT: 120px
}
#brick64 {
  LEFT: 180px
}
#brick82 {
  LEFT: 180px
}
#brick95 {
  LEFT: 180px
}
#brick65 {
  WIDTH: 22px; LEFT: 240px
}
#brick96 {
  WIDTH: 22px; LEFT: 240px
}
#brick83 {
  LEFT: 240px
}
#brick84 {
  LEFT: 300px
}
#brick85 {
  LEFT: 360px
}
#brick86 {
  LEFT: 420px
}
#brick87 {
  LEFT: 480px
}
#brick66 {
  WIDTH: 22px; LEFT: 510px
}
#brick97 {
  WIDTH: 22px; LEFT: 510px
}
#brick67 {
  LEFT: 540px
}
#brick88 {
  LEFT: 540px
}
#brick98 {
  LEFT: 540px
}
#brick68 {
  LEFT: 600px
}
#brick89 {
  LEFT: 600px
}
#brick99 {
  LEFT: 600px
}
#brick69 {
  LEFT: 660px
}
#brick90 {
  LEFT: 660px
}
#brick100 {
  LEFT: 660px
}
#brick70 {
  WIDTH: 22px; LEFT: 720px
}
#brick91 {
  WIDTH: 22px; LEFT: 720px
}
#brick101 {
  WIDTH: 22px; LEFT: 720px
}
#brick71 {
  TOP: 440px
}
#brick72 {
  TOP: 440px
}
#brick73 {
  TOP: 440px
}
#brick74 {
  TOP: 440px
}
#brick75 {
  TOP: 440px
}
#brick76 {
  TOP: 440px
}
#brick77 {
  TOP: 440px
}
#brick78 {
  TOP: 440px
}
#brick71 {
  LEFT: 30px
}
#brick72 {
  LEFT: 90px
}
#brick73 {
  LEFT: 150px
}
#brick74 {
  LEFT: 210px
}
#brick75 {
  LEFT: 510px
}
#brick76 {
  LEFT: 570px
}
#brick77 {
  LEFT: 630px
}
#brick78 {
  LEFT: 690px
}
#brick5 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#brick14 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#brick17 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#brick40 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#brick43 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick1 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick2 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick3 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick4 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick5 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick6 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick7 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick8 {
  Z-INDEX: 2; BORDER-BOTTOM: #900 4px solid; BORDER-LEFT: #c00 4px solid; BACKGROUND-COLOR: #b00; BORDER-TOP: #d00 4px solid; BORDER-RIGHT: #a00 4px solid
}
#chbrick1 {
  LEFT: 179px
}
#chbrick2 {
  LEFT: 179px
}
#chbrick4 {
  LEFT: 179px
}
#chbrick5 {
  LEFT: 539px
}
#chbrick6 {
  LEFT: 539px
}
#chbrick7 {
  LEFT: 539px
}
#chbrick8 {
  LEFT: 539px
}
#chbrick3 {
  LEFT: 209px
}
#chbrick7 {
  LEFT: 569px
}
#chbrick1 {
  TOP: 8px
}
#chbrick5 {
  TOP: 8px
}
#chbrick2 {
  WIDTH: 22px; TOP: 34px
}
#chbrick3 {
  WIDTH: 22px; TOP: 34px
}
#chbrick6 {
  WIDTH: 22px; TOP: 34px
}
#chbrick7 {
  WIDTH: 22px; TOP: 34px
}
#chbrick4 {
  TOP: 60px
}
#chbrick8 {
  TOP: 60px
}
#pane1L {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 3px solid; BORDER-LEFT: #cba 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #666; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 10px solid; PADDING-TOP: 10px
}
#pane2L {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 3px solid; BORDER-LEFT: #cba 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #666; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 10px solid; PADDING-TOP: 10px
}
#pane3L {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 3px solid; BORDER-LEFT: #cba 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #666; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 10px solid; PADDING-TOP: 10px
}
#pane1R {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 3px solid; BORDER-LEFT: #cba 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #666; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 10px solid; PADDING-TOP: 10px
}
#pane2R {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 3px solid; BORDER-LEFT: #cba 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #666; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 10px solid; PADDING-TOP: 10px
}
#pane3R {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 3px solid; BORDER-LEFT: #cba 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #666; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 10px solid; PADDING-TOP: 10px
}
* HTML #pane1L {
  WIDTH: 68px; HEIGHT: 18px
}
* HTML #pane1R {
  WIDTH: 68px; HEIGHT: 18px
}
#pane1L {
  WIDTH: 68px; HEIGHT: 18px; BORDER-TOP: #a98 9px solid; TOP: 238px; LEFT: 96px
}
* HTML #pane2L {
  WIDTH: 19px; HEIGHT: 36px
}
* HTML #pane2R {
  WIDTH: 19px; HEIGHT: 36px
}
#pane2L {
  BORDER-BOTTOM: #f3e3d3 6px solid; WIDTH: 19px; HEIGHT: 36px; TOP: 291px; BORDER-RIGHT: #e9d8c7 4px solid; LEFT: 96px
}
* HTML #pane3L {
  WIDTH: 18px; HEIGHT: 36px
}
* HTML #pane3R {
  WIDTH: 18px; HEIGHT: 36px
}
#pane3L {
  BORDER-BOTTOM: #f3e3d3 6px solid; BORDER-LEFT: #cba 4px solid; WIDTH: 18px; HEIGHT: 36px; TOP: 291px; LEFT: 152px
}
#pane1R {
  WIDTH: 68px; HEIGHT: 18px; BORDER-TOP: #a98 9px solid; TOP: 238px; LEFT: 576px
}
#pane2R {
  BORDER-BOTTOM: #f3e3d3 6px solid; WIDTH: 19px; HEIGHT: 36px; TOP: 291px; BORDER-RIGHT: #e9d8c7 4px solid; LEFT: 576px
}
#pane3R {
  BORDER-BOTTOM: #f3e3d3 6px solid; BORDER-LEFT: #cba 4px solid; WIDTH: 18px; HEIGHT: 36px; TOP: 291px; LEFT: 632px
}
#windowL {
  Z-INDEX: 2; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: #fed; WIDTH: 120px; HEIGHT: 130px; BORDER-TOP: medium none; TOP: 232px; BORDER-RIGHT: medium none
}
#windowR {
  Z-INDEX: 2; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: #fed; WIDTH: 120px; HEIGHT: 130px; BORDER-TOP: medium none; TOP: 232px; BORDER-RIGHT: medium none
}
#windowR {
  LEFT: 90px
}
#windowL {
  LEFT: 570px
}
* HTML P.door {
  WIDTH: 102px; HEIGHT: 187px
}
P.door {
  Z-INDEX: 2; BORDER-BOTTOM: #ccc 6px solid; BORDER-LEFT: #b00 10px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #fed; MARGIN: 0px; PADDING-LEFT: 10px; WIDTH: 102px; PADDING-RIGHT: 10px; HEIGHT: 187px; BORDER-TOP: #800 9px solid; BORDER-RIGHT: #b00 10px solid; PADDING-TOP: 10px
}
* HTML #inner {
  WIDTH: 142px; HEIGHT: 222px
}
#inner {
  BORDER-BOTTOM: #ccc 8px solid; POSITION: relative; BORDER-LEFT: #c00 20px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #888; PADDING-LEFT: 0px; WIDTH: 142px; PADDING-RIGHT: 0px; HEIGHT: 222px; BORDER-TOP: #900 10px solid; BORDER-RIGHT: #c00 20px solid; PADDING-TOP: 0px
}
* HTML #outer {
  WIDTH: 182px; HEIGHT: 250px
}
#outer {
  BORDER-BOTTOM: #ccc 14px solid; BORDER-LEFT: #d00 29px solid; PADDING-BOTTOM: 12px; BACKGROUND-COLOR: #888; PADDING-LEFT: 0px; WIDTH: 182px; PADDING-RIGHT: 0px; HEIGHT: 250px; BORDER-TOP: #900 10px solid; TOP: 206px; BORDER-RIGHT: #d00 29px solid; PADDING-TOP: 0px; LEFT: 270px
}
* HTML #doorpane1 {
  WIDTH: 31px; HEIGHT: 60px
}
* HTML #doorpane2 {
  WIDTH: 31px; HEIGHT: 60px
}
* HTML #doorpane3 {
  WIDTH: 31px; HEIGHT: 60px
}
* HTML #doorpane4 {
  WIDTH: 31px; HEIGHT: 60px
}
#doorpane1 {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 4px solid; BORDER-LEFT: #cba 4px solid; BACKGROUND-COLOR: #fed; WIDTH: 31px; HEIGHT: 60px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 4px solid
}
#doorpane2 {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 4px solid; BORDER-LEFT: #cba 4px solid; BACKGROUND-COLOR: #fed; WIDTH: 31px; HEIGHT: 60px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 4px solid
}
#doorpane3 {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 4px solid; BORDER-LEFT: #cba 4px solid; BACKGROUND-COLOR: #fed; WIDTH: 31px; HEIGHT: 60px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 4px solid
}
#doorpane4 {
  Z-INDEX: 3; BORDER-BOTTOM: #f3e3d3 4px solid; BORDER-LEFT: #cba 4px solid; BACKGROUND-COLOR: #fed; WIDTH: 31px; HEIGHT: 60px; BORDER-TOP: #a98 4px solid; BORDER-RIGHT: #e9d8c7 4px solid
}
#doorpane1 {
  TOP: 250px; LEFT: 344px
}
#doorpane2 {
  TOP: 250px; LEFT: 397px
}
#doorpane3 {
  TOP: 359px; LEFT: 344px
}
#doorpane4 {
  TOP: 359px; LEFT: 397px
}
* HTML #handle {
  WIDTH: 15px; HEIGHT: 2px
}
#handle {
  Z-INDEX: 3; BORDER-BOTTOM: #b96 4px solid; BORDER-LEFT: #ec9 4px solid; LINE-HEIGHT: 1px; BACKGROUND-COLOR: #db8; WIDTH: 15px; HEIGHT: 2px; FONT-SIZE: 1px; BORDER-TOP: #fda 4px solid; TOP: 331px; BORDER-RIGHT: #ca7 4px solid; LEFT: 416px
}
* HTML #handlebase {
  WIDTH: 2px; HEIGHT: 15px
}
#handlebase {
  Z-INDEX: 2; BORDER-BOTTOM: #b96 4px solid; BORDER-LEFT: #ec9 4px solid; LINE-HEIGHT: 1px; BACKGROUND-COLOR: #666; WIDTH: 2px; HEIGHT: 15px; FONT-SIZE: 1px; BORDER-TOP: #fda 4px solid; TOP: 327px; BORDER-RIGHT: #ca7 4px solid; LEFT: 433px
}
* HTML #textbox {
  WIDTH: 680px
}
#textbox {
  BORDER-BOTTOM: medium none; TEXT-ALIGN: center; BORDER-LEFT: medium none; PADDING-BOTTOM: 20px; BACKGROUND-COLOR: #eee; PADDING-LEFT: 20px; WIDTH: 680px; PADDING-RIGHT: 20px; HEIGHT: auto; BORDER-TOP: medium none; TOP: 492px; BORDER-RIGHT: medium none; PADDING-TOP: 20px; LEFT: 30px
}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.7600.16588"></HEAD>
<BODY>
<DIV id=roof></DIV>
<DIV id=roof2></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=outer>
<DIV id=inner>
<P class=door></P></DIV></DIV>
<DIV id=doorpane1></DIV>
<DIV id=doorpane2></DIV>
<DIV id=doorpane3></DIV>
<DIV id=doorpane4></DIV>
<DIV id=handle></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> by <A 
href="http://www.designdetector.com/">Chris Hester</A> ?See also my <A 
href="http://www.designdetector.com/demos/css-house-2.html">CSS House 2</A> 
<BR><BR>Built 16 October 2003 ?Last updated 17 March 2008 ?<A 
href="http://www.designdetector.com/archives/03/10/3DBorderDemo2.php#comments">Comments</A> 
| <A 
href="http://www.designdetector.com/tips/3DBorderDemo2-trackbacks.html">Trackbacks</A> 
| <A 
href="http://www.designdetector.com/archives/03/10/3DBorderDemo2.php">About</A></DIV></BODY></HTML>

提示：您可以先修改部分代码再运行

原来房子地址：http://www.designdetector.com/tips/3DBorderDemo2.html
顺便放一下今天收集到的一些有用的css:

1、结构简单的breadcrumbs 面包屑

http://veerle-v2.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/

2、用blockquote凸显重点内容，让页面变得可浏览性更强

http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php

3、用css做柱状统计图，比较简单

http://www.thewojogroup.com/2008/12/css-stacked-bar-graphs/

4、css content-generate (再一次印证了自己的无知...)

http://www.w3.org/TR/CSS21/generate.html

5、css边框你能运用的合理吗？

http://www.cssnewbie.com/12-creative-and-cool-uses-for-the-css-border-property/

6、用一个渐变半透明png结合positon:fixed让页尾的内容渐隐(ie6...)

http://css-tricks.com/examples/FadeOutBottom/

7、用css预加载图片

http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader/

8、用一个很聪明的办法做个图片浏览器 (再一次印证了自己的无知...)

http://www.devirtuoso.com/2009/07/how-to-build-a-css-image-viewer-the-clever-way/

9、两种在网页上显示日期的方式，都很赞！

http://css-tricks.com/date-display-with-sprites/

http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/

10、基于CSS技术的图片热区 (再一次印证了自己的无知...)

http://www.frankmanno.com/ideas/css-imagemap/
更多参考：http://www.iwanna.cn/archives/2010/08/09/4867/
晚些时间，我可能会花些时间，对让自己觉得无知的css文章做个技术解析，以飨读者。
本文出处：http://www.cnblogs.com/ice6/archive/2010/08/11/1797563.html

相关日志(relate log)

做了这么多年前端，看到这个，我哭了……

最后编辑： tommyhu 编辑于2012/01/17 10:23

阅读(3975) | 评论(4) | 引用(0)

tommyhuc.cn网友

2012/01/14 08:20

使我混浊的没什么而是烟

tommyhuc.cn网友

2010/08/18 13:48

的确很强悍！服了。

tommyhu 回复于 2010/08/18 19:01

有才的人太多了，

tommyhuc.cn网友

2010/08/18 11:31

tommyhu 回复于 2010/08/18 19:00

哥们，这是嘛表情，嫉妒了是不

tommyhuc.cn网友

2010/08/18 11:24

看了源代码，确实强！！！！！！！！！！

cry

tommyhu 回复于 2010/08/18 19:00

是啊，很强悍

分页： 1/1

TOMMYHU

做了这么多年前端，看到这个，我哭了……

灰常多的分类

热门围观排行榜：

最新日志

随便拿点来看看：

最新评论

赞助推广

好多好多关键词

关于本博

这些词比较火爆

在此留下酱油瓶-：）
表情打开HTML 打开UBB 打开表情隐藏记住我	您的大名（例如：小明）：密码(可不填) ：游客无需密码网址 (可不填) ：电邮 (可不填) ： [注册]