Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
À´Ô´£ºhttp://www.javaeye.com/news/13149
Òë×Ô£ºSmashing Magazine
ÖÐÎÄ£ºZen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
ÔÚ±¾ÎÄÖÐÎÒÃǽ«Õ¹Ê¾Ò»ÖÖеÄʹÓ÷ÂCSSÑ¡ÔñÆ÷µÄÓï·¨À´¿ìËÙ¿ª·¢HTMLºÍCSSµÄ·½·¨¡£ËüÓÉSergey Chikuyonok¿ª·¢¡£
ÄãÔÚдHTML´úÂë(°üÀ¨ËùÓбêÇ©¡¢ÊôÐÔ¡¢ÒýÓᢴóÀ¨ºÅµÈ)ÉÏ»¨·Ñ¶àÉÙʱ¼ä£¿Èç¹ûÄãµÄ±à¼Æ÷ÓдúÂëÌáʾ¹¦ÄÜ£¬Äã±àдµÄʱºò¾Í»áÈÝÒ×Щ£¬µ«¼´±ãÈç´ËÄ㻹ÊÇÒªÊÖ¶¯ÇÃÈëºÜ¶à´úÂë¡£
ÔÚJavaScript·½Ã棬µ±ÎÒÃÇÏëÒªÔÚÒ»¸öÒ³ÃæÉÏ»ñȡij¸öÌض¨µÄÔªËØʱ£¬ÎÒÃǾͻáÓöµ½Í¬ÑùµÄÎÊÌ⣬ÎÒÃDZØÐëдºÜ¶à´úÂ룬Õâ¾Í±äµÃÄÑÓÚά»¤ºÍÖØ Óá£JavaScript¿ò¼ÜÓ¦Ô˶øÉú£¬ËüÃÇͬʱÒýÈëÁËCSSÑ¡ÔñÆ÷ÒýÇæ¡£ÏÖÔÚ£¬Äã¿ÉÒÔʹÓüòµ¥µÄCSS±í´ïʽÀ´»ñÈ¡DOMÔªËØ£¬ÕâÏ൱¿á¡£
µ«ÊÇ£¬Èç¹ûÄã²»½ö½ö¿ÉÒÔÓÃCSSµÄÑ¡ÔñÆ÷²¼¾ÖºÍ¶¨Î»ÔªËØ£¬»¹ÄÜÉú³É´úÂë»áÔõôÑù£¿±ÈÈ磬Èç¹ûÄãÕâÑùд£º
div#content>h1+p
…È»ºó¾Í¿ÉÒÔ¿´µ½ÕâÑùµÄÊä³ö£º
<div id="content">
<h1></h1>
<p></p>
</div>
ÓÐЩÃÔ»ó°É£¿½ñÌ죬ÎÒ½«ÏòÄã½éÉÜZen Coding£¬Ò»×éÓÃÓÚ¿ìËÙHTMLºÍCSS±àÂëµÄ¹¤¾ß¡£×î³õÓÉVadim MakeevÔÚ2009Äê4ÔÂÌá³ö(ÎÄÕÂΪ¶íÓï)£¬ÓɱÉÈË(Ò²¾ÍÊÇÎÒ)¿ª·¢ÁËÊýÔ²¢×îÖÕ´ïµ½±È½Ï³ÉÊìµÄ״̬¡£Zen CodingÓÉÁ½¸öºËÐÄ×é¼þ×é³É£ºÒ»¸öËõдÀ©Õ¹Æ÷(ËõдΪÏñCSSÒ»ÑùµÄÑ¡ÔñÆ÷)ºÍÉÏÏÂÎÄÎ޹صÄHTML±êÇ©¶ÔÆ¥ÅäÆ÷¡£¿´Ò»ÏÂÕâ¸öÑÝʾÊÓƵÀ´¿´Ò»ÏÂËüÃÇÄÜΪÄã×öЩʲô¡£
²é¿´ÊÓƵ£ºhttp://v.youku.com/v_show/id_XMTM4NDQwNzgw.html
×¢Ò⣺¸ÃÊÓƵ԰æλÓÚVimeo£¬µ«ÊÇÒª¿´µÄ»°ÐèÒª·[ºÍг]ǽÏÈ£¬µØÖ·ÔÚÕâÀhttp://vimeo.com/7405114£¬ÉÏÃæµÄÊÓƵÊÇÎҷѾ¡ÖÜÕÛ´ÓVimeoÉÏÏÂÔØÏÂÀ´ÉÏ´«µ½ÓÅ¿áµÄ£¬ÉÏ´«ºóÖÊÁ¿¾¹±»´ó´òÕÛ¿ÛÁË£¬囧¡£youtubeÉÏÒ²ÓÐÒ»·ÝÊÓƵ£¬ÊÇ»ùÓÚAptanaµÄÑÝʾ£¬Ò»ÑùºÜ¾«²Ê£ºhttp://www.youtube.com/watch?v=ug84Ypwqfzk¡£PS:òËÆyoutubeÒª±ÈVimeo·[ºÍг]ǽÈÝÒ×Щ£¬²»¹ýÈçºÎ·[ºÍг]ǽ²»ÔÚ±¾Õ¾ÌÖÂÛ·¶Î§¡£
Èç¹ûÄãÏëÌøתµ½Ïêϸ½éÉܺÍʹÓÃÖ¸ÄÏ£¬Çë¿´Ò»ÏÂÑÝʾҳÃæ²¢Á¢¿ÌÏÂÔØÄãÊÊÓõIJå¼þ£º
Demo
Demo (ʹÓà Ctrl + , Õ¹¿ªËõд£¬ÐèÒªJavaScriptÖ§³Ö)
ÖÐÎÄ°æÑÝʾ
ÏÂÔØ(ÍêÈ«Ö§³Ö)
Aptana (¿çƽ̨);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);
ÏÂÔØ(²¿·ÖÖ§³Ö£¬Ö»Ö§³Ö“Õ¹¿ªËõд”)
TextMate (Ö»ÄÜÓ
Ïà¹ØÎĵµ£º
CSS SpritesÆäʵ¾ÍÊÇ°ÑÍøÒ³ÖÐһЩ±³¾°Í¼Æ¬ÕûºÏµ½Ò»ÕÅͼƬÎļþÖУ¬ÔÙÀûÓÃCSSµÄ“background-image”£¬“background- repeat”£¬“background-position”µÄ×éºÏ½øÐб³¾°¶¨Î»£¬background-position¿ÉÒÔÓÃÊý×ÖÄܾ«È·µÄ¶¨Î»³ö±³¾°Í¼Æ¬µÄλÖá£
Óŵ㣺
µ±Óû§ÍùUÅÌÖп½200ÕÅͼƬ£¬»áµÈºÜ¾Ã¡£µ«ÊÇ ......
cssµÄdl dt ddµÄÓ¦Óãº
<!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>
<meta http-equiv="Content-Type" content= ......
ÓÐʱҳÃæÐèÒª»ñµÃÓû§ä¯ÀÀÆ÷µÄ¸ß¶È²ÅÄÜÈ·¶¨ÄÚÈÝÏÔʾÔÚÄÄÀ´úÂë
<div style="position:absolute; left:0; top:expression(document.body.clientHeight/2-document.body.clientHeight/4)">
</div>
ÖУ¬expression(document.body.clientHeight/2)¼´Îª»ñµÃä¯ÀÀÆ÷¸ß¶ÈÔÙ³ýÒÔ2 ......
×î½üÔÚŪ¹«Ë¾µÄϵͳʱÓöµ½Ò»¸öÎÊÌ⣬ÓÐÒ»¸öwinformÒªµ÷ÓÃÍøÕ¾µÄÊý¾Ý¿â£¬Êý¾Ý¿âÖдæµÄÊǾ¹ýeWebEditor´¦Àí¹ýµÄÎÄÕ£¬¶¼´øÓÐhtml±êÇ©£¬µ±Ê±ÏëÓÃÕýÔò±í´ïʽ¹ýÂ˵ô£¬µ«ÊÇ»¹ÊÇ·ÅÆúÁËÔÒòÓÐÈý£º1.ÎÒ¶ÔÕýÔò±í´ïʽÁ˽âºÜÉÙ£»2.Ëä˵ÎÒ¿ÉÒÔÏÖѧÕýÔò±í´ïʽ£¬µ«ÊÇʵÏÖÆðÀ´Ò²ÊǺÜÂé·³µÄ£»3.Èç¹û¹ýÂ˵ôµÄ»°ÎÄÕµĸñʽ¾ÍûÓÐÁË¡£ÓÚ ......
×î½üÑо¿PHPµÄһЩ¿ª·¢¼¼Êõ£¬·¢ÏÖPHPÓкܶàASPËùûÓеÄÓÅÐ㹦ÄÜ£¬¿ÉÒÔÍê³ÉһЩÒÔÇ°ÎÞ·¨Íê³ÉµÄ¹¦ÄÜ£¬ÀýÈ綯̬Éú³ÉHTML¾²Ì¬Ò³Ã棬ÒÔ¼õÉÙ·þÎñÆ÷CPUµÄ¸ºÔØ£¬Ìá¸ßÓû§·ÃÎʵÄËٶȡ£
¡¡¡¡ÎÒÃÇÖªµÀ£¬PHP¶ÁÈ¡MYSQL¶¯Ì¬ÏÔʾ£¬ÔÚ·ÃÎÊÁ¿´óµÄÇé¿öÏ£¬»áÓкܶàÐÔÄÜÎÊÌ⣬Èç¹û×âÓñðÈ˵ÄÐéÄâÖ÷»ú£¬Ôò»áÒòΪCPUÏûºÄ¹ý¶à¶ø±»ÏÞÖÆCPU£¬µ¼ÖÂÍø ......