<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>CSS House (3D Border Demo 2) by Chris Hester</title> <style type="text/css"> /* Thanks to Big John for repeated testing in IE5/Win! */ /* http://positioniseverything.net */ * { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:14px; } body { margin:0; padding:0; background-color:#fff; color:#000; // to please poster here: http://digg.com/design/CSS_House } /* define all divs as bricks to save code. Overwrite values later for any non-bricks */ /* firstly deal with IE5's broken box model. The rule below works for IE only */ /* See http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */ * html div { width:60px; /* Total box width (borders + padding + width) for IE5/Win */ w\idth:52px; /* Other versions of IE get this width */ height:26px; /* Total box height */ he\ight:18px; } /* Now deal with all other CSS browsers */ div { position:absolute; width:52px; height:18px; margin:0; padding:0; border-top:4px solid #f00; border-left:4px solid #e00; border-bottom:4px solid #b00; border-right:4px solid #c00; background-color:#d00; z-index:1; } * html #roof { width:758px; w\idth:500px; height:150px; he\ight:50px; } #roof { top:4px; left:10px; width:500px; height:50px; border-top:0px solid #fc0; border-left:129px solid #fff; border-bottom:100px solid #575; border-right:129px solid #fff; background-color:#fff; } * html #roof2 { width:632px; w\idth:374px; height:90px; he\ight:40px; } #roof2 { top:14px; left:73px; width:374px; height:40px; border-top:0px solid #fc0; border-left:129px solid #fff; border-bottom:50px solid #686; border-right:129px solid #fff; background-color:#fff; z-index:2; } #brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {top:180px;} #brick1 {left:30px;} #brick2 {left:90px;} #brick3 {left:150px;} #brick4 {left:210px;} * html #brick5 { width:240px; w\idth:232px; } #brick5 {left:270px; width:232px;} #brick9 {left:510px;} #brick10 {left:570px;} #brick11 {left:630px;} #brick12 {left:690px;} #brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {top:206px;} /* Deal with all half bricks at once for 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 { width:30px; w\idth:22px; } #brick13 { /* half-brick */ left:30px; width:22px; } #brick14 { left:60px; width:172px; } #brick15 { /* half-brick */ left:240px; width:22px; } #brick16 { /* half-brick */ left:510px; width:22px; } #brick17 { left:540px; width:172px; } #brick18 { /* half-brick */ left:720px; width:22px; } * html #brick14, * html #brick17 { width:180px; w\idth:172px; } #brick19, #brick20, #brick21, #brick34, #brick22 {top:232px;} #brick19 {left:30px;} #brick20 </body></html>
评论加载中....
评论加载中....