盖茨他爹 发表于 2006-6-11 11:01
又遇到一强人，用CSS作图。
<DIV class=HtmlCode><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><BR><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><BR><head><BR><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><BR><BR><title>CSS House (3D Border Demo 2) by Chris Hester</title><BR><BR><style type="text/css"><BR><BR>/* Thanks to Big John for repeated testing in IE5/Win! */<BR>/* [url]http://positioniseverything.net[/url] */<BR><BR>* {<BR>font-family:Verdana, Arial, Helvetica, sans-serif;<BR>font-size:12px;<BR>line-height:14px;<BR>}<BR><BR>body {<BR>margin:0;<BR>padding:0;<BR>background-color:#fff;<BR>color:#000; // to please poster here: [url]http://digg.com/design/CSS_House[/url]<BR>}<BR><BR>/* define all divs as bricks to save code. Overwrite values later for any non-bricks */<BR><BR>/* firstly deal with IE5's broken box model. The rule below works for IE only */<BR>/* See [url]http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html[/url] */<BR><BR>* html div {<BR>width:60px; /* Total box width (borders + padding + width) for IE5/Win */<BR>w\idth:52px; /* Other versions of IE get this width */<BR>height:26px; /* Total box height */<BR>he\ight:18px;<BR>}<BR><BR>/* Now deal with all other CSS browsers */<BR><BR>div {<BR>position:absolute;<BR>width:52px;<BR>height:18px;<BR>margin:0;<BR>padding:0;<BR>border-top:4px solid #f00;<BR>border-left:4px solid #e00;<BR>border-bottom:4px solid #b00;<BR>border-right:4px solid #c00;<BR>background-color:#d00;<BR>z-index:1;<BR>}<BR><BR>* html #roof {<BR>width:758px;<BR>w\idth:500px;<BR>height:150px;<BR>he\ight:50px;<BR>}<BR><BR>#roof {<BR>top:4px;<BR>left:10px;<BR>width:500px;<BR>height:50px;<BR>border-top:0px solid #fc0;<BR>border-left:129px solid #fff;<BR>border-bottom:100px solid #575;<BR>border-right:129px solid #fff;<BR>background-color:#fff;<BR>}<BR><BR>* html #roof2 {<BR>width:632px;<BR>w\idth:374px;<BR>height:90px;<BR>he\ight:40px;<BR>}<BR><BR>#roof2 {<BR>top:14px;<BR>left:73px;<BR>width:374px;<BR>height:40px;<BR>border-top:0px solid #fc0;<BR>border-left:129px solid #fff;<BR>border-bottom:50px solid #686;<BR>border-right:129px solid #fff;<BR>background-color:#fff;<BR>z-index:2;<BR>}<BR><BR>#brick1, #brick2, #brick3, #brick4, #brick5, #brick9, #brick10, #brick11, #brick12 {top:180px;}<BR><BR>#brick1 {left:30px;}<BR>#brick2 {left:90px;}<BR>#brick3 {left:150px;}<BR>#brick4 {left:210px;}<BR><BR>* html #brick5 {<BR>width:240px;<BR>w\idth:232px;<BR>}<BR><BR>#brick5 {left:270px; width:232px;}<BR><BR>#brick9 {left:510px;}<BR>#brick10 {left:570px;}<BR>#brick11 {left:630px;}<BR>#brick12 {left:690px;}<BR><BR>#brick13, #brick14, #brick15, #brick16, #brick17, #brick18 {top:206px;}<BR><BR>/* Deal with all half bricks at once for IE5/Win */<BR><BR>* html #brick13, * html #brick15, * html #brick16, * html #brick18, * html #brick23, * html #brick24, * html #brick25,<BR>* html #brick26, * html #brick27, * html #brick28, * html #brick29, * html #brick30, * html #brick31, * html #brick32,<BR>* html #brick33, * html #brick34, * html #brick35, * html #brick36, * html #brick37, * html #brick38, * html #brick39,<BR>* html #brick41, * html #brick42, * html #brick44, * html #brick61,<BR>* html #brick79, * html #brick92, * html #brick65, * html #brick96, * html #brick66, * html #brick97, * html #brick70,<BR>* html #brick91, * html #brick101, * html #chbrick2, * html #chbrick3, * html #chbrick6, * html #chbrick7,<BR>* html #chbrick2, * html #chbrick3, * html #chbrick6, * html #chbrick7 {<BR>width:30px;<BR>w\idth:22px;<BR>}<BR><BR>#brick13 { /* half-brick */<BR>left:30px;<BR>width:22px;<BR>}<BR>#brick14 {<BR>left:60px;<BR>width:172px;<BR>}<BR>#brick15 { /* half-brick */<BR>left:240px;<BR>width:22px;<BR>}<BR>#brick16 { /* half-brick */<BR>left:510px;<BR>width:22px;<BR>}<BR>#brick17 {<BR>left:540px;<BR>width:172px;<BR>}<BR>#brick18 { /* half-brick */<BR>left:720px;<BR>width:22px;<BR>}<BR><BR>* html #brick14, * html #brick17 {<BR>width:180px;<BR>w\idth:172px;<BR>}<BR><BR>#brick19, #brick20, #brick21, #brick34, #brick22 {top:232px;}<BR><BR>#brick19 {left:30px;}<BR>#brick20 {left:210px;}<BR><BR>#brick21 {left:510px;}<BR>#brick22 {left:690px;}<BR><BR>#brick23, #brick24, #brick25, #brick26, #brick27, #brick28, #brick29, #brick30 {<BR>top:258px;<BR>width:22px;<BR>}<BR><BR>#brick31, #brick32, #brick33, #brick34, #brick35, #brick36, #brick37, #brick38 {<BR>top:310px;<BR>width:22px;<BR>}<BR><BR>#brick39, #brick41, #brick42, #brick44 {<BR>top:362px;<BR>width:22px;<BR>}<BR><BR>#brick40, #brick43 {top:362px;}<BR><BR>#brick23, #brick31, #brick39 {left:30px;}<BR>#brick24, #brick32 {left:60px;}<BR><BR>#brick25, #brick33 {left:210px;}<BR>#brick26, #brick34, #brick41 {left:240px;}<BR><BR>#brick27, #brick35, #brick42 {left:510px;}<BR>#brick28, #brick36 {left:540px;}<BR><BR>#brick29, #brick37 {left:690px;}<BR>#brick30, #brick38, #brick44 {left:720px;}<BR><BR>#brick40 {<BR>left:60px;<BR>width:172px;<BR>}<BR>#brick43 {<BR>left:540px;<BR>width:172px;<BR>}<BR><BR>* html #brick40, * html #brick43 {<BR>width:180px;<BR>w\idth:172px;<BR>}<BR><BR>#brick45, #brick46, #brick47, #brick48 {top:284px;}<BR><BR>#brick49, #brick50, #brick51, #brick52 {top:336px;}<BR><BR>#brick45, #brick49 {left:30px;}<BR>#brick46, #brick50 {left:210px;}<BR><BR>#brick47, #brick51 {left:510px;}<BR>#brick48, #brick52 {left:690px;}<BR><BR><BR>#brick53, #brick54, #brick55, #brick59, #brick56, #brick57, #brick58, #brick60, #brick61 {top:388px;}<BR><BR>#brick53 {left:30px;}<BR>#brick54 {left:90px;}<BR>#brick55 {left:150px;}<BR>#brick56 {left:210px;}<BR><BR>#brick57 {left:510px;}<BR>#brick58 {left:570px;}<BR>#brick59 {left:630px;}<BR>#brick60 {left:690px;}<BR><BR>#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;}<BR><BR>#brick61, #brick62, #brick63, #brick64, #brick65, #brick66, #brick67, #brick68, #brick69, #brick70 {top:414px;}<BR><BR>#brick79, #brick80, #brick81, #brick82, #brick83, #brick84, #brick85, #brick86, #brick87, #brick88, #brick89, #brick90, #brick91 {top:154px;}<BR><BR>#brick92, #brick93, #brick94, #brick95, #brick96, #brick97, #brick98, #brick99, #brick100, #brick101 {top:466px;}<BR><BR>#brick61, #brick79, #brick92 { /* half-brick */<BR>left:30px;<BR>width:22px;<BR>}<BR>#brick62, #brick80, #brick93 {left:60px;}<BR>#brick63, #brick81, #brick94 {left:120px;}<BR>#brick64, #brick82, #brick95 {left:180px;}<BR>#brick65, #brick96 { /* half-brick */<BR>left:240px;<BR>width:22px;<BR>}<BR>#brick83 {left:240px;}<BR>#brick84 {left:300px;}<BR>#brick85 {left:360px;}<BR>#brick86 {left:420px;}<BR><BR>#brick87 {left:480px;}<BR>#brick66, #brick97 { /* half-brick */<BR>left:510px;<BR>width:22px;<BR>}<BR>#brick67, #brick88, #brick98 {left:540px;}<BR>#brick68, #brick89, #brick99 {left:600px;}<BR>#brick69, #brick90, #brick100 {left:660px;}<BR>#brick70, #brick91, #brick101 { /* half-brick */<BR>left:720px;<BR>width:22px;<BR>}<BR><BR>#brick71, #brick72, #brick73, #brick74, #brick75, #brick76, #brick77, #brick78 {top:440px;}<BR><BR>#brick71 {left:30px;}<BR>#brick72 {left:90px;}<BR>#brick73 {left:150px;}<BR>#brick74 {left:210px;}<BR><BR>#brick75 {left:510px;}<BR>#brick76 {left:570px;}<BR>#brick77 {left:630px;}<BR>#brick78 {left:690px;}<BR><BR>/* darker long bricks + chimneys */<BR><BR>#brick5, #brick14, #brick17, #brick40, #brick43, #chbrick1, #chbrick2, #chbrick3, #chbrick4, #chbrick5, #chbrick6, #chbrick7, #chbrick8 {<BR>border-top:4px solid #d00;<BR>border-left:4px solid #c00;<BR>border-bottom:4px solid #900;<BR>border-right:4px solid #a00;<BR>background-color:#b00;<BR>z-index:2;<BR>}<BR><BR>#chbrick1, #chbrick2, #chbrick4 {left:179px;}<BR>#chbrick5, #chbrick6, #chbrick7, #chbrick8 {left:539px;}<BR>#chbrick3 {left:209px;}<BR>#chbrick7 {left:569px;}<BR><BR>#chbrick1, #chbrick5 {top:8px;}<BR>#chbrick2, #chbrick3, #chbrick6, #chbrick7 {<BR>top:34px;<BR>width:22px;<BR>}<BR>#chbrick4, #chbrick8 {top:60px;}<BR><BR>/* window panes */<BR><BR>#pane1L, #pane2L, #pane3L, #pane1R, #pane2R, #pane3R {<BR>padding:10px;<BR>border-top:4px solid #a98;<BR>border-left:10px solid #cba;<BR>border-bottom:3px solid #f3e3d3;<BR>border-right:10px solid #e9d8c7;<BR>background-color:#666;<BR>z-index:3;<BR>}<BR><BR>* html #pane1L, * html #pane1R {<BR>width:108px;<BR>w\idth:68px;<BR>height:29px;<BR>he\ight:18px;<BR>}<BR><BR>#pane1L {<BR>top:238px;<BR>left:96px;<BR>width:68px;<BR>height:18px;<BR>border-top:9px solid #a98;<BR>}<BR><BR>* html #pane2L, * html #pane2R {<BR>width:53px;<BR>w\idth:19px;<BR>height:66px;<BR>he\ight:36px;<BR>}<BR><BR>#pane2L {<BR>top:291px;<BR>left:96px;<BR>width:19px;<BR>height:36px;<BR>border-right:4px solid #e9d8c7;<BR>border-bottom:6px solid #f3e3d3;<BR>}<BR><BR>* html #pane3L, * html #pane3R {<BR>width:52px;<BR>w\idth:18px;<BR>height:66px;<BR>he\ight:36px;<BR>}<BR><BR>#pane3L {<BR>top:291px;<BR>left:152px;<BR>width:18px;<BR>height:36px;<BR>border-left:4px solid #cba;<BR>border-bottom:6px solid #f3e3d3;<BR>}<BR><BR>#pane1R {<BR>top:238px;<BR>left:576px;<BR>width:68px;<BR>height:18px;<BR>border-top:9px solid #a98;<BR>}<BR><BR>#pane2R {<BR>top:291px;<BR>left:576px;<BR>width:19px;<BR>height:36px;<BR>border-right:4px solid #e9d8c7;<BR>border-bottom:6px solid #f3e3d3;<BR>}<BR><BR>#pane3R {<BR>top:291px;<BR>left:632px;<BR>width:18px;<BR>height:36px;<BR>border-left:4px solid #cba;<BR>border-bottom:6px solid #f3e3d3;<BR>}<BR><BR>#windowL, #windowR {<BR>top:232px;<BR>width:120px;<BR>height:130px;<BR>border:none;<BR>background-color:#fed;<BR>z-index:2;<BR>}<BR><BR>#windowR {left:90px;}<BR><BR>#windowL {left:570px;}<BR><BR>* html p.door {<BR>width:142px;<BR>w\idth:102px;<BR>height:222px;<BR>he\ight:187px;<BR>}<BR><BR>p.door {<BR>width:102px;<BR>height:187px;<BR>margin:0;<BR>padding:10px;<BR>border-top:9px solid #800;<BR>border-right:10px solid #b00;<BR>border-bottom:6px solid #ccc;<BR>border-left:10px solid #b00;<BR>background-color:#fed;<BR>z-index:2;<BR>}<BR><BR>* html #inner {<BR>width:182px;<BR>w\idth:142px;<BR>height:250px;<BR>he\ight:222px;<BR>}<BR><BR>#inner {<BR>position:relative;<BR>width:142px;<BR>height:222px;<BR>padding:0 0 10px 0;<BR>border-top:10px solid #900;<BR>border-left:20px solid #c00;<BR>border-bottom:8px solid #ccc;<BR>border-right:20px solid #c00;<BR>background-color:#888;<BR>}<BR><BR>* html #outer {<BR>width:240px;<BR>w\idth:182px;<BR>height:286px;<BR>he\ight:250px;<BR>}<BR><BR>#outer {<BR>top:206px;<BR>left:270px;<BR>width:182px;<BR>height:250px;<BR>padding:0 0 12px 0;<BR>border-top:10px solid #900;<BR>border-left:29px solid #d00;<BR>border-bottom:14px solid #ccc;<BR>border-right:29px solid #d00;<BR>background-color:#888;<BR>}<BR><BR>* html #doorpane1, * html #doorpane2, * html #doorpane3, * html #doorpane4 {<BR>width:39px;<BR>w\idth:31px;<BR>height:68px;<BR>he\ight:60px;<BR>}<BR><BR>#doorpane1, #doorpane2, #doorpane3, #doorpane4 {<BR>width:31px;<BR>height:60px;<BR>border-top:4px solid #a98;<BR>border-left:4px solid #cba;<BR>border-bottom:4px solid #f3e3d3;<BR>border-right:4px solid #e9d8c7;<BR>background-color:#fed;<BR>z-index:3;<BR>}<BR><BR>#doorpane1 {<BR>top:250px;<BR>left:344px;<BR>}<BR>#doorpane2 {<BR>top:250px;<BR>left:397px;<BR>}<BR>#doorpane3 {<BR>top:359px;<BR>left:344px;<BR>}<BR>#doorpane4 {<BR>top:359px;<BR>left:397px;<BR>}<BR><BR>* html #handle {<BR>width:23px;<BR>w\idth:15px;<BR>height:10px;<BR>he\ight:2px;<BR>}<BR><BR>#handle {<BR>font-size:1px; /* ---\ stops div from being no */<BR>line-height:1px; /* -/ smaller than 16px height in IE6 */<BR>top:331px;<BR>left:416px;<BR>width:15px;<BR>height:2px;<BR>border-top:4px solid #fda;<BR>border-left:4px solid #ec9;<BR>border-bottom:4px solid #b96;<BR>border-right:4px solid #ca7;<BR>background-color:#db8;<BR>z-index:3;<BR>}<BR><BR>* html #handlebase {<BR>width:10px;<BR>w\idth:2px;<BR>height:23px;<BR>he\ight:15px;<BR>}<BR><BR>#handlebase {<BR>font-size:1px; /* ---\ stops div from being no */<BR>line-height:1px; /* -/ smaller than 16px height in IE6 */<BR>top:327px;<BR>left:433px;<BR>width:2px;<BR>height:15px;<BR>border-top:4px solid #fda;<BR>border-left:4px solid #ec9;<BR>border-bottom:4px solid #b96;<BR>border-right:4px solid #ca7;<BR>background-color:#666;<BR>z-index:2;<BR>}<BR><BR>* html #textbox {<BR>width:720px;<BR>w\idth:680px;<BR>}<BR><BR>#textbox {<BR>top:492px;<BR>left:30px;<BR>width:680px;<BR>padding:20px;<BR>height:auto;<BR>text-align:center;<BR>border:none;<BR>background-color:#eee;<BR>}<BR><BR></style><BR><BR></head><BR><BR><body><BR><BR><div id="roof"></div><BR><div id="roof2"></div><BR><BR><div id="chbrick1"></div><BR><div id="chbrick2"></div><BR><div id="chbrick3"></div><BR><div id="chbrick4"></div><BR><BR><div id="chbrick5"></div><BR><div id="chbrick6"></div><BR><div id="chbrick7"></div><BR><div id="chbrick8"></div><BR><BR><div id="brick1"></div><BR><div id="brick2"></div><BR><div id="brick3"></div><BR><div id="brick4"></div><BR><div id="brick5"></div><BR><div id="brick9"></div><BR><div id="brick10"></div><BR><div id="brick11"></div><BR><div id="brick12"></div><BR><div id="brick13"></div><BR><div id="brick14"></div><BR><div id="brick15"></div><BR><div id="brick16"></div><BR><div id="brick17"></div><BR><div id="brick18"></div><BR><div id="brick19"></div><BR><div id="brick20"></div><BR><div id="brick21"></div><BR><div id="brick22"></div><BR><div id="brick23"></div><BR><div id="brick24"></div><BR><div id="brick25"></div><BR><div id="brick26"></div><BR><div id="brick27"></div><BR><div id="brick28"></div><BR><div id="brick29"></div><BR><div id="brick30"></div><BR><div id="brick31"></div><BR><div id="brick32"></div><BR><div id="brick33"></div><BR><div id="brick34"></div><BR><div id="brick35"></div><BR><div id="brick36"></div><BR><div id="brick37"></div><BR><div id="brick38"></div><BR><div id="brick39"></div><BR><div id="brick40"></div><BR><div id="brick41"></div><BR><div id="brick42"></div><BR><div id="brick43"></div><BR><div id="brick44"></div><BR><div id="brick45"></div><BR><div id="brick46"></div><BR><div id="brick47"></div><BR><div id="brick48"></div><BR><div id="brick49"></div><BR><div id="brick50"></div><BR><div id="brick51"></div><BR><div id="brick52"></div><BR><div id="brick53"></div><BR><div id="brick54"></div><BR><div id="brick55"></div><BR><div id="brick56"></div><BR><div id="brick57"></div><BR><div id="brick58"></div><BR><div id="brick59"></div><BR><div id="brick60"></div><BR><div id="brick61"></div><BR><div id="brick62"></div><BR><div id="brick63"></div><BR><div id="brick64"></div><BR><div id="brick65"></div><BR><div id="brick66"></div><BR><div id="brick67"></div><BR><div id="brick68"></div><BR><div id="brick69"></div><BR><div id="brick70"></div><BR><div id="brick71"></div><BR><div id="brick72"></div><BR><div id="brick73"></div><BR><div id="brick74"></div><BR><div id="brick75"></div><BR><div id="brick76"></div><BR><div id="brick77"></div><BR><div id="brick78"></div><BR><div id="brick79"></div><BR><div id="brick80"></div><BR><div id="brick81"></div><BR><div id="brick82"></div><BR><div id="brick83"></div><BR><div id="brick84"></div><BR><div id="brick85"></div><BR><div id="brick86"></div><BR><div id="brick87"></div><BR><div id="brick88"></div><BR><div id="brick89"></div><BR><div id="brick90"></div><BR><div id="brick91"></div><BR><div id="brick92"></div><BR><div id="brick93"></div><BR><div id="brick94"></div><BR><div id="brick95"></div><BR><div id="brick96"></div><BR><div id="brick97"></div><BR><div id="brick98"></div><BR><div id="brick99"></div><BR><div id="brick100"></div><BR><div id="brick101"></div><BR><BR><BR><div id="outer"><BR><div id="inner"><BR><p class="door"> </p><BR></div><BR></div><BR><BR><div id="doorpane1"></div><BR><div id="doorpane2"></div><BR><div id="doorpane3"></div><BR><div id="doorpane4"></div><BR><BR><div id="handle"></div><BR><div id="handlebase"></div><BR><BR><div id="windowL"></div><BR><BR><div id="pane1L"></div><BR><div id="pane2L"></div><BR><div id="pane3L"></div><BR><BR><div id="windowR"></div><BR><BR><div id="pane1R"></div><BR><div id="pane2R"></div><BR><div id="pane3R"></div><BR><BR><div id="textbox"></div><BR><BR></body><BR></html></DIV>
islet 发表于 2006-6-11 14:05
高手~！
df8 发表于 2006-6-11 14:12
强人啊 学习中！
rainic 发表于 2006-6-11 14:47
哗！！！
soulwalk 发表于 2006-6-11 15:42
真是有功夫!~~~<BR>PF
dzt0001 发表于 2006-6-12 08:48
太高手了
yms123 发表于 2006-6-12 08:53
<P>用CSS作图厉害。</P>
hangxj 发表于 2006-6-12 08:56
[em03] CSS可是我的痛呀
hadisi 发表于 2006-6-12 11:07
<P>强</P>
PHP 发表于 2006-6-12 13:32
这玩艺好学吗????我觉得像是做苦力
craft001wen 发表于 2006-6-12 15:34
太牛了，强得没话说
danhaoran 发表于 2006-6-12 16:01
<P>这么猛，吃错药了吧。</P>
dv9981 发表于 2006-6-12 23:29
<P>太猛了，，真的没话说啊，羡慕。佩服</P>
271391233 发表于 2006-6-13 00:23
.............
小海龟 发表于 2006-11-6 16:20
[em03]
songsong20 发表于 2006-11-6 16:38
收藏 学习
漯河 发表于 2006-11-6 16:52
.......
yaxuxu 发表于 2006-11-6 17:09
猛啊```
caiyakang 发表于 2006-11-9 21:42
晕。。这也行！~
ming206 发表于 2006-11-10 00:12
我没话说了，真牛。
