<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
?ヤ??ュ?濮?瑕???姝ｈ?捐?″?灞?浜?????浼?缁????规?涓??凤?浣?棣???瑕??ㄨ??娴烽????澶ц?寸??杞?寤????筹??跺????hotoshop??瀹??诲?烘?ャ??浣????界???版????eb??????绔??瑰ぇ?藉??寸?锛???涓?eb?????村?虫敞缁???????瀹癸?瀹???涓?瀹?涓?缃?椤电??缇?瑙?娌℃???规???茬??锛?浣??虫??涔?璁捐?″氨??涔?璁捐?★??ㄤ?缁?琛ㄦ?兼?规?瀹??扮??甯?灞?锛???IV涔???浠ュ???般????????涓?涓???????杩?绋?锛???DIV??????TABLE涓??风??宸ュ?凤?濡?浣?杩??ㄥ氨??浣????宠薄??浜???
娉???ㄥ????搴??ㄨ?绋?涓?锛?DIV?ㄦ??浜??版?圭??纭?涓?濡?琛ㄦ?兼?逛究锛?姣?濡??????茬??瀹?涔???浣?浠讳?浜????芥??寰???澶憋??????ㄤ?浣???浠峰?煎?ゆ????濂斤?涓?缃????锛???浠?寮?濮?锛?
1.纭?瀹?甯?灞?
w3cn??????璁捐?¤???惧?涓?锛?
?ㄨ〃?肩??璁捐?℃?规???璇?锛?涓????芥??涓?涓?涓?涓?琛?甯?灞?
????IV??璇?锛???????浣跨?ㄤ????ュ?灞?,??涓鸿?????
2.瀹?涔?body?峰?
??瀹?涔??翠釜椤甸?㈢??body???峰?,浠ｇ??濡?涓?锛?
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: ///'Lucida Grande///',///'Lucida Sans Unicode///',///'瀹?浣?///',///'?板??浣?///',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; } 浠ヤ?浠ｇ????浣??ㄥ?ㄤ?涓?澶╃????绋???璇??璇存??锛?澶у?跺?璇ヤ???灏辨???姐??瀹?涔?浜?杈规?杈硅?涓?锛?????棰??蹭负#FEFEFE锛??????剧??涓?g_logo.gif锛??剧??浣?浜?椤甸?㈠?充?瑙?锛?涓???澶?锛?瀹?涔?浜?瀛?浣?灏哄?镐负12px锛?瀛?浣?棰??蹭负#666;琛?楂?150%??
3.瀹?涔?涓昏???div
??娆′娇??SS甯?灞?锛????冲?????ㄥ?哄??瀹藉害??涓???甯?灞?(姣?????搴???杈ㄧ????璁捐?＄????,hoho锛???璇存???锋??锛???瀹??扮??????锛?澧????逛俊蹇???锛?)??????瀹?涔?宸?腑?崇??瀹藉害涓?00:300:280锛???SS涓?濡?涓?瀹?涔?:
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; } 娉ㄦ??锛?瀹?涔?涓??????冲??div???介???ㄤ?POSITION: absolute;锛??跺??????瀹?涔?浜?LEFT:200px;TOP:0px;??LEFT:500px;TOP:0px;杩???杩?涓?甯?灞????抽??锛??????ㄤ?灞???缁?瀵瑰??浣???瀹?涔?涓??村??璺?绂婚〉?㈠乏杈规?200px锛?璺?绂婚《??px锛?瀹?涔??冲??璺?绂婚〉?㈠乏杈规?500px锛?璺?绂婚《??px锛???
杩??跺???翠釜椤甸?㈢??浠ｇ????锛?
<!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" >
<head>
<title>娆㈣?杩??ユ?般??缃?椤佃?捐?″???:Web??????绋????ㄥ箍</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,?挎?? />
<meta name="Copyright" content="www.w3cn.org,???辩????,浠绘??杞?杞? />
<meta name="description" content="?扮?椤佃?捐?″?,Web????????绋?绔????ㄥ??eb?????ㄤ腑?界??搴???" />
<meta content="Web????,??绋?,Web, standards, xhtml, CSS, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" target="_blank" rel="external nofollow" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" target="_blank" rel="external nofollow" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="CSS/style01.CSS" type="text/CSS" media="all" />
</head>
<body>
<div id="left">椤甸?㈠乏??</div>
<div id="middle">椤甸??腑??</div>
<div id="right">椤甸?㈠?冲??</div>
</body>
</html> 杩??跺??椤甸?㈢??????浠?浠???浠ョ???颁?涓?骞跺?????拌?茬?╁舰锛???涓?涓??????俱??浣?????甯???楂?搴???婊″???锛???涔??????
4.100%????搴?楂?搴?
涓轰?淇???涓????????风??楂?搴????灏?璇???left??#middle??#right涓?璁剧疆"height:100%;"锛?浣????板???ㄦ病??棰??崇??????搴?楂?搴???????缁?杩?涓???灏?璇???锛?????濂界?姣?涓?div涓?涓?缁?瀵归??搴?"height:1000px;"锛?骞朵???????瀹圭??澧???锛???瑕?涓???淇?姝ｈ?涓??笺???鹃??娌℃????娉?????搴?楂?搴????锛??????挎?疯??宸卞?????娣卞?ワ????颁?涓???????瑙ｅ?冲??娉?锛?瀹???涓??规??涓???瑕?璁剧疆100%锛???浠?宸茬?琚?table??缁寸??㈠お娣变?锛?杩?涓???娉??ㄤ?涓?????瀛??涓?璇??浠?缁???
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
![HTML5Canvas 酷炫效果[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)