CCS+DIV搭建的一座立體房屋圖片

2011-03-31 圖片特效 ℃

<!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 {left:210px;}
#brick21 {left:510px;}
#brick22 {left:690px;}
#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {
top:258px;
width:22px;
}
#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {
top:310px;
width:22px;
}
#brick39, #brick41, #brick42, #brick44 {
top:362px;
width:22px;
}
#brick40, #brick43 {top:362px;}
#brick23, #brick31, #brick39 {left:30px;}
#brick24, #brick32 {left:60px;}
#brick25, #brick33 {left:210px;}
#brick26, #brick34, #brick41 {left:240px;}
#brick27, #brick35, #brick42 {left:510px;}
#brick28, #brick36 {left:540px;}
#brick29, #brick37 {left:690px;}
#brick30, #brick38, #brick44 {left:720px;}
#brick40 {
left:60px;
width:172px;
}
#brick43 {
left:540px;
width:172px;
}
* html #brick40, * html #brick43 {
width:180px;
w\idth:172px;
}
#brick45, #brick46, #brick47, #brick48 {top:284px;}
#brick49, #brick50, #brick51, #brick52 {top:336px;}
#brick45, #brick49 {left:30px;}
#brick46, #brick50 {left:210px;}
#brick47, #brick51 {left:510px;}
#brick48, #brick52 {left:690px;}
#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #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, #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, #brick101 {top:466px;}
#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70 {top:414px;}
#brick79, #brick80, #brick81, #brick82, #brick83, #brick84, #brick85, #brick86, #brick87, #brick88, #brick89, #brick90, #brick91 {top:154px;}
#brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, #brick101 {top:466px;}
#brick61, #brick79, #brick92 { /* half-brick */
left:30px;
width:22px;
}
#brick62, #brick80, #brick93 {left:60px;}
#brick63, #brick81, #brick94 {left:120px;}
#brick64, #brick82, #brick95 {left:180px;}
#brick65, #brick96 { /* half-brick */
left:240px;
width:22px;
}
#brick83 {left:240px;}
#brick84 {left:300px;}
#brick85 {left:360px;}
#brick86 {left:420px;}
#brick87 {left:480px;}
#brick66, #brick97 { /* half-brick */
left:510px;
width:22px;
}
#brick67, #brick88, #brick98 {left:540px;}
#brick68, #brick89, #brick99 {left:600px;}
#brick69, #brick90, #brick100 {left:660px;}
#brick70, #brick91, #brick101 { /* half-brick */
left:720px;
width:22px;
}
#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #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;}
/* darker long bricks + chimneys */
#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {
border-top:4px solid #d00;
border-left:4px solid #c00;
border-bottom:4px solid #900;
border-right:4px solid #a00;
background-color:#b00;
z-index:2;
}
#chbrick1, #chbrick2, #chbrick4 {left:179px;}
#chbrick5, #chbrick6, #chbrick7, #chbrick8 {left:539px;}
#chbrick3 {left:209px;}
#chbrick7 {left:569px;}
#chbrick1, #chbrick5 {top:8px;}
#chbrick2, #chbrick3, #chbrick6, #chbrick7 {
top:34px;
width:22px;
}
#chbrick4, #chbrick8 {top:60px;}
/* window panes */
#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {
padding:10px;
border-top:4px solid #a98;
border-left:10px solid #cba;
border-bottom:3px solid #f3e3d3;
border-right:10px solid #e9d8c7;
background-color:#666;
z-index:3;
}
* html #pane1L, * html #pane1R {
width:108px;
w\idth:68px;
height:29px;
he\ight:18px;
}
#pane1L {
top:238px;
left:96px;
width:68px;
height:18px;
border-top:9px solid #a98;
}
* html #pane2L, * html #pane2R {
width:53px;
w\idth:19px;
height:66px;
he\ight:36px;
}
#pane2L {
top:291px;
left:96px;
width:19px;
height:36px;
border-right:4px solid #e9d8c7;
border-bottom:6px solid #f3e3d3;
}
* html #pane3L, * html #pane3R {
width:52px;
w\idth:18px;
height:66px;
he\ight:36px;
}
#pane3L {
top:291px;
left:152px;
width:18px;
height:36px;
border-left:4px solid #cba;
border-bottom:6px solid #f3e3d3;
}
#pane1R {
top:238px;
left:576px;
width:68px;
height:18px;
border-top:9px solid #a98;
}
#pane2R {
top:291px;
left:576px;
width:19px;
height:36px;
border-right:4px solid #e9d8c7;
border-bottom:6px solid #f3e3d3;
}
#pane3R {
top:291px;
left:632px;
width:18px;
height:36px;
border-left:4px solid #cba;
border-bottom:6px solid #f3e3d3;
}
#windowL, #windowR {
top:232px;
width:120px;
height:130px;
border:none;
background-color:#fed;
z-index:2;
}
#windowR {left:90px;}
#windowL {left:570px;}
* html p.door {
width:142px;
w\idth:102px;
height:222px;
he\ight:187px;
}
p.door {
width:102px;
height:187px;
margin:0;
padding:10px;
border-top:9px solid #800;
border-right:10px solid #b00;
border-bottom:6px solid #ccc;
border-left:10px solid #b00;
background-color:#fed;
z-index:2;
}
* html #inner {
width:182px;
w\idth:142px;
height:250px;
he\ight:222px;
}
#inner {
position:relative;
width:142px;
height:222px;
padding:0 0 10px 0;
border-top:10px solid #900;
border-left:20px solid #c00;
border-bottom:8px solid #ccc;
border-right:20px solid #c00;
background-color:#888;
}
* html #outer {
width:240px;
w\idth:182px;
height:286px;
he\ight:250px;
}
#outer {
top:206px;
left:270px;
width:182px;
height:250px;
padding:0 0 12px 0;
border-top:10px solid #900;
border-left:29px solid #d00;
border-bottom:14px solid #ccc;
border-right:29px solid #d00;
background-color:#888;
}
* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {
width:39px;
w\idth:31px;
height:68px;
he\ight:60px;
}
#doorpane1, #doorpane2, #doorpane3, #doorpane4 {
width:31px;
height:60px;
border-top:4px solid #a98;
border-left:4px solid #cba;
border-bottom:4px solid #f3e3d3;
border-right:4px solid #e9d8c7;
background-color:#fed;
z-index:3;
}
#doorpane1 {
top:250px;
left:344px;
}
#doorpane2 {
top:250px;
left:397px;
}
#doorpane3 {
top:359px;
left:344px;
}
#doorpane4 {
top:359px;
left:397px;
}
* html #handle {
width:23px;
w\idth:15px;
height:10px;
he\ight:2px;
}
#handle {
font-size:1px; /* ---\ stops div from being no         */
line-height:1px; /* -/ smaller than 16px height in IE6 */
top:331px;
left:416px;
width:15px;
height:2px;
border-top:4px solid #fda;
border-left:4px solid #ec9;
border-bottom:4px solid #b96;
border-right:4px solid #ca7;
background-color:#db8;
z-index:3;
}
* html #handlebase {
width:10px;
w\idth:2px;
height:23px;
he\ight:15px;
}
#handlebase {
font-size:1px; /* ---\ stops div from being no         */
line-height:1px; /* -/ smaller than 16px height in IE6 */
top:327px;
left:433px;
width:2px;
height:15px;
border-top:4px solid #fda;
border-left:4px solid #ec9;
border-bottom:4px solid #b96;
border-right:4px solid #ca7;
background-color:#666;
z-index:2;
}
* html #textbox {
width:720px;
w\idth:680px;
}
#textbox {
top:492px;
left:30px;
width:680px;
padding:20px;
height:auto;
text-align:center;
border:none;
background-color:#eee;
}
</style>
</head>
<body>
<div   class="we5qsqx"   id="roof"></div>
<div   class="s6vnarp"   id="roof2"></div>
<div   class="f0yqrn6"   id="chbrick1"></div>
<div   class="svckhym"   id="chbrick2"></div>
<div   class="gibogsv"   id="chbrick3"></div>
<div   class="vdldvia"   id="chbrick4"></div>
<div   class="anvnkxp"   id="chbrick5"></div>
<div   class="pi6kxa6"   id="chbrick6"></div>
<div   class="vtbj1g6"   id="chbrick7"></div>
<div   class="1rewtld"   id="chbrick8"></div>
<div   class="fykm556"   id="brick1"></div>
<div   class="2u1as6z"   id="brick2"></div>
<div   class="hfw0jr1"   id="brick3"></div>
<div   class="thjmumy"   id="brick4"></div>
<div   class="b6ow6da"   id="brick5"></div>
<div   class="ig1nf1c"   id="brick9"></div>
<div   class="bewn0k0"   id="brick10"></div>
<div   class="i5ruqjb"   id="brick11"></div>
<div   class="0zro0lc"   id="brick12"></div>
<div   class="vjlya50"   id="brick13"></div>
<div   class="igybt15"   id="brick14"></div>
<div   class="06humps"   id="brick15"></div>
<div   class="aygjayw"   id="brick16"></div>
<div   class="p0xkxps"   id="brick17"></div>
<div   class="wea6xzr"   id="brick18"></div>
<div   class="0l6yvi1"   id="brick19"></div>
<div   class="sa6cuwz"   id="brick20"></div>
<div   class="exzweho"   id="brick21"></div>
<div   class="ybdltl0"   id="brick22"></div>
<div   class="j1rjb13"   id="brick23"></div>
<div   class="1ski6f1"   id="brick24"></div>
<div   class="mjb1yqd"   id="brick25"></div>
<div   class="zs61y0k"   id="brick26"></div>
<div   class="r5vi503"   id="brick27"></div>
<div   class="jxu5ltk"   id="brick28"></div>
<div   class="6ivolya"   id="brick29"></div>
<div   class="cayqczr"   id="brick30"></div>
<div   class="kc1ahpx"   id="brick31"></div>
<div   class="zsa1xkw"   id="brick32"></div>
<div   class="p6c6ac6"   id="brick33"></div>
<div   class="5l1cphz"   id="brick34"></div>
<div   class="nwdly63"   id="brick35"></div>
<div   class="cbo0qm5"   id="brick36"></div>
<div   class="ryltqnf"   id="brick37"></div>
<div   class="fikckct"   id="brick38"></div>
<div   class="j5h3zwe"   id="brick39"></div>
<div   class="omdvskd"   id="brick40"></div>
<div   class="ng0nphu"   id="brick41"></div>
<div   class="unqckcu"   id="brick42"></div>
<div   class="v6i3gy6"   id="brick43"></div>
<div   class="5zbt50u"   id="brick44"></div>
<div   class="vyl1okx"   id="brick45"></div>
<div   class="eryldvi"   id="brick46"></div>
<div   class="zxuc5ow"   id="brick47"></div>
<div   class="6ogypmk"   id="brick48"></div>
<div   class="wuxubxj"   id="brick49"></div>
<div   class="qygnanf"   id="brick50"></div>
<div   class="6yltlcf"   id="brick51"></div>
<div   class="ilsk66w"   id="brick52"></div>
<div   class="ywjbog6"   id="brick53"></div>
<div   class="y0cdb1y"   id="brick54"></div>
<div   class="mehpbtl"   id="brick55"></div>
<div   class="0gs6jws"   id="brick56"></div>
<div   class="ikdksph"   id="brick57"></div>
<div   class="mo5qels"   id="brick58"></div>
<div   class="dwoanvy"   id="brick59"></div>
<div   class="n06zmpx"   id="brick60"></div>
<div   class="cvcqi6z"   id="brick61"></div>
<div   class="z0m3asu"   id="brick62"></div>
<div   class="ao6jg0i"   id="brick63"></div>
<div   class="10jbjw1"   id="brick64"></div>
<div   class="wzckczl"   id="brick65"></div>
<div   class="6i1ai6e"   id="brick66"></div>
<div   class="1cyld5b"   id="brick67"></div>
<div   class="cqiqi50"   id="brick68"></div>
<div   class="fxv66ho"   id="brick69"></div>
<div   class="w15z6v0"   id="brick70"></div>
<div   class="dwdqxpi"   id="brick71"></div>
<div   class="exob05d"   id="brick72"></div>
<div   class="rygygda"   id="brick73"></div>
<div   class="i6rngyu"   id="brick74"></div>
<div   class="sriqsa6"   id="brick75"></div>
<div   class="uh6jf15"   id="brick76"></div>
<div   class="ucuqigd"   id="brick77"></div>
<div   class="6mzhzbu"   id="brick78"></div>
<div   class="oliv0c0"   id="brick79"></div>
<div   class="m06ewem"   id="brick80"></div>
<div   class="x50as0z"   id="brick81"></div>
<div   class="ug0umia"   id="brick82"></div>
<div   class="q58ok51"   id="brick83"></div>
<div   class="gewoly6"   id="brick84"></div>
<div   class="ogol0ne"   id="brick85"></div>
<div   class="vtfcvme"   id="brick86"></div>
<div   class="l68rjmz"   id="brick87"></div>
<div   class="voqdack"   id="brick88"></div>
<div   class="bz1meq1"   id="brick89"></div>
<div   class="gzmyl0j"   id="brick90"></div>
<div   class="kd1kspn"   id="brick91"></div>
<div   class="z6xyb1u"   id="brick92"></div>
<div   class="muc6yqi"   id="brick93"></div>
<div   class="khz6gta"   id="brick94"></div>
<div   class="jwoan1a"   id="brick95"></div>
<div   class="jbzqoas"   id="brick96"></div>
<div   class="bpxk1b0"   id="brick97"></div>
<div   class="oru7qia"   id="brick98"></div>
<div   class="kwe0qel"   id="brick99"></div>
<div   class="axphew5"   id="brick100"></div>
<div   class="lown0lc"   id="brick101"></div>
<div   class="q0nayyo"   id="outer">
<div   class="k5cocuq"   id="inner">
<p class="door"> </p>
</div>
</div>
<div   class="lj6gtqs"   id="doorpane1"></div>
<div   class="6wjbybo"   id="doorpane2"></div>
<div   class="oczl6t6"   id="doorpane3"></div>
<div   class="nwevnkc"   id="doorpane4"></div>
<div   class="0jbygy6"   id="handle"></div>
<div   class="urowjm7"   id="handlebase"></div>
<div   class="rp5ryg0"   id="windowL"></div>
<div   class="cfyqikw"   id="pane1L"></div>
<div   class="16jwjby"   id="pane2L"></div>
<div   class="gs0aips"   id="pane3L"></div>
<div   class="eh6ur6z"   id="windowR"></div>
<div   class="aowe0q3"   id="pane1R"></div>
<div   class="ocu5v0i"   id="pane2R"></div>
<div   class="0bdlsk6"   id="pane3R"></div>
<div   class="db16sum"   id="textbox"><b>CSS House</b> by <a >Chris Hester</a>  ·  See my <a >CSS House 2</a>
<br />
<br />Built 16 October 2003 · Last updated 16 March 2006 · <a >Comments</a> | <a >Trackbacks</a> | <a >About</a></div>
</body>
</html>

相關(guān)特效代碼: CSS配合htc文件巧妙應(yīng)用實(shí)現(xiàn)反轉(zhuǎn)按鈕09/06; CSS二級(jí)下拉導(dǎo)航菜單09/06; CSS代碼精簡(jiǎn)的二級(jí)菜單07/28; 滑動(dòng)TAB，滑動(dòng)門，CSS+Js代碼07/28; CSS+div+js組合強(qiáng)大實(shí)現(xiàn)超酷菜單05/14; 幾個(gè)比較好看的Button的CSS05/14; CSS按鈕樣式大全05/14; CSS 3D按鈕特效05/14; JavaScript+CSS打造漂亮的select下拉選擇框03/04; CSS 橫向圖片列表03/04

熱門特效代碼: js圖片自動(dòng)切換代碼; CSS實(shí)現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動(dòng)圖片廣告代碼; 鼠標(biāo)經(jīng)過(guò)圖片變大; 簡(jiǎn)單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動(dòng)，; 點(diǎn)擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點(diǎn)擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡(jiǎn)單高效的javascript 幻燈片播放; 飄動(dòng)圖片廣告代碼; JavaScript封裝的平滑圖片滾動(dòng)，; 超酷超絢精美圖片展示效果代碼