CSSÍøÕ¾²¼¾Ödiv¸ß¶È×ÔÊÊÓ¦ ½â¾ö
ºÜ¶àµÄWeb
designerÔÚ¸Õ½Ó´¥W3C±ê×¼µÄʱºò£¬¶¼Óöµ½¹ý¸ß¶È×ÔÊÊÓ¦µÄÎÊÌâ¡£ÒòΪdivµÈ¶ÔÏóµÄheight:100%;²¢²»Äܹ»Ö±½Ó²úÉúʵ¼ÊЧ¹û£¬ÓÚÊÇ¿ªÊ¼
»³ÒÉä¯ÀÀÆ÷ÊÇ·ñÖ§³Öheight:100%;µÄ±àд·½·¨£¿µ±È»²»ÊÇ£¬×îÃ÷ÏÔµÄÀý×Ó¾ÍÊÇtable
height="100"ÊÇûÓÐÈκÎÎÊÌâµÄ¡£ÕâÊǺÜÁîÈË·³ÄÕµÄÎÊÌâ¡£ÎÒä¯ÀÀÁ˺ܶàÍøÕ¾£¬°üÀ¨www.w3cn.orgµÈ£¬ÓеĽâ¾ö°ì·¨ÊDz»¶ÏµØÐÞ¸Ä
heightµÄ¹Ì¶¨Öµ£¬»òÕßÀûÓÃÒ³Ãæ±³¾°ºÍdiv±³¾°ÏàͬÀ´ÆÛÆä¯ÀÀÕßµÄÊÓ¾õ£¬µ«¶¼Ã»ÓдӸù±¾ÉϽâ¾öÎÊÌâ¡£½ñÌì´ÓÒ»±¾¡¶CSSÍøÕ¾²¼¾Öʵ¼¡·ÉÏÖÕÓÚÕÒµ½×î
ÍêÃÀµÄ½â¾ö°ì·¨£¬À´¿´Ò»ÏÂÕâ¶Î¸ß¶È×ÔÊÊÓ¦µÄCSS´úÂ룺
html,body{
margin:0px;
height:100%;
}
#left {
background-color:#CCC;
width:300px;
height:100%;
float:left;
}
´úÂëÒѾµ½Á˲»ÄÜÔÙ¼òµ¥µÄµØ²½£¬¶Ô#left¶ÔÏóÉèÖÃÁËheight:100%;£¬È»¶øÒ²Äܹ»¿´¼û£¬Í¬Ê±ÉèÖÃÁËHTMLÓëbodyµÄheight:100%;£¬¶øÕâ¸ö¾ÍÊǸ߶È×ÔÊÊÓ¦ÎÊÌâµÄ¹Ø¼üËùÔÚ¡£
·ÖÎö£º
Ò»¸ö¶ÔÏó¸ß¶ÈÊÇ·ñ¿ÉÒÔʹÓðٷֱÈÏÔʾ£¬È¡¾öÓÚ¶ÔÏóµÄ¸¸¼¶
¶Ô
Ïó£¬#leftÔÚÒ³ÃæÖÐÖ±½ÓÐýתÔÚbodyÖ®ÖУ¬Òò´ËËüµÄ¸¸¼¶ÊÇbody£¬¶øä¯ÀÀÆ÷ĬÈÏ״̬Ï£¬ÊÇûÓиøbodyÒ»¸ö¸ß¶ÈÊôÐԵģ¬Òò´Ëµ±ÎÒÃÇÖ±½ÓÉè
ÖÃ#leftΪheight:100%;ʱ£¬²»»á²úÉúÈκÎЧ¹û£¬¶øµ±ÎÒÃǸøbodyÉèÖÃÁË100%Ö®ºó£¬ËüµÄ×Ó¼¶¶ÔÏó#leftµÄ
height:100%;±ã·¢Éú×÷ÓÃÁË£¬Õâ±ãÊÇä¯ÀÀÆ÷½âÎö¹æÔòÒý·¢µÄ¸ß¶È×ÔÊÊÓ¦ÎÊÌâ¡£¶ø´úÂëÖгýÁ˸øbodyÓ¦ÓÃÖ®Í⣬»¹¸øHTML¶ÔÏóÒ²Ó¦ÓÃÏàͬµÄÑùʽ
Éè¼Æ£¬ÕâÑù×öµÄºÃ´¦ÊÇʹIEÓëfirefoxä¯ÀÀÆ÷¶¼Äܹ»ÊµÏָ߶È×ÔÊÊÓ¦£¬¶øbodyÈ´²»ÊÇ¡£ÁíÍ⣬FirefoxÖеÄHTML±êÇ©²»ÊÇ100%¸ß¶È£¬Òò
´Ë¸øÁ½¸ö±êÇ©¶¼¶¨ÒåΪheight:100%;ÒÔ±£Ö¤Á½¸öä¯ÀÀÆ÷ϾùÄܹ»Õý³£ÏÔʾ¡£
Ïà¹ØÎĵµ£º
µÚÈý²½ÊǶ¨ÒåÄãµÄÓïÑÔ±àÂ룬ÀàËÆÕâÑù£º
¡¡¡¡<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
ΪÁ˱»ä¯ÀÀÆ÷ÕýÈ·½âÊͺÍͨ¹ýW3C´úÂëУÑ飬ËùÓеÄXHTMLÎĵµ¶¼±ØÐëÉùÃ÷ËüÃÇËùʹÓõıàÂëÓïÑÔ£¬ÎÒÃÇÒ»°ãʹÓÃgb2312(¼òÌåÖÐÎÄ)£¬ÖÆ×÷¶à¹úÓïÑÔÒ³ÃæÒ²ÓпÉÄÜÓÃUnicode¡¢ISO-8859-1µÈ£¬¸ù¾ÝÄãµÄÐ ......
SpriteMeÊÇGoogleµÄÒ»¸ö¿ªÔ´ÏîÄ¿£¬¿ÉÒÔÓÃÀ´·½±ãµØÕÒ³öÒ»¸öÒ³ÃæÖÐËùʹÓõÄͼƬ£¬È»ºó¿ÉÒÔ½«ËùÒÔͼƬºÏ²¢µ½Ò»¸ö“Sprite”ͼƬ£¬È»ºóÔÙͨ¹ý
CSS¿ØÖƵ÷ÓÃÄÄÒ»¸öÇøÓò£¬ÆäÌṩÁËÒ»¸öÍøÕ¾À´°²×°£¬ÑÝʾʹÓ÷½·¨£¬http://spriteme.org/ ¡£
°²×°·½·¨ºÜ¼òµ¥£¬°´ÕÕÉÏÃæÄǸöÒ³ÃæÉϵÄÌáʾ£¬½«Ò»¸öÁ´½ÓÍϵ½“ÊéÇ©¹ ......
1¡¢css¿ò¼Ü
ÖйúµÄ»¥ÁªÍøÐÐÒµÒѾ·¢Õ¹ÁË10Ä꣬ä¯ÀÀÆ÷Ò²´Ó×îÔçÁ÷ÐеÄNSµ½ÏÖÔÚµÄFF3.IE7µÈµÈ……ǰ¶Ë¿ª·¢¹¤³ÌʦµÄְλҲµ®ÉúÁË¡£½ü¼¸ÄêÔÚweb¿ª·¢ÖУ¬Óиö·Ç³£»ðµÄ´Ê——“¿ò¼Ü”¡£YUI¡¢JQuery¡¢PrototypeÕâЩjavascript¿ò¼ÜÔÚ¿ª·¢ÍøÕ¾Ê±£¬È·Êµ³ÉΪǰ¶Ë¿ª·¢¹¤³ÌʦµÄÊÖÖÐÀûÆ÷¡£ÎªÊ²Ã´ÄØ£¿Òò ......
±¾ÎÄΪ´ó¼ÒÊÕ¼¯¾«Ñ¡ÁË30¸öʹÓô¿CSS
Íê³ÉµÄÇ¿´óʵ¼ùµÄÓÅÐãCSS¼¼ÊõºÍʵÀý
£¬Äú½«ÔÚÕâÀï·¢ÏֺܶàÓëÖÚ²»Í¬µÄ¼¼Êõ£¬±ÈÈç:ͼƬ¼¯¡¢ÒõӰЧ¹û¡¢¿ÉÀ©Õ¹°´Å¥¡¢²Ëµ¥µÈ…ÕâЩʵÀý¶¼ÊÇʹÓô¿CSSºÍHTMLʵÏֵġ£
µ¥»÷ÿ¸öʵÀýµÄ±êÌâ¿ÉÒÔ±»×ªÏòµ½¸Ã¼¼ÊõʵÀýµÄÏà¹Ø½Ì³Ì»ò˵Ã÷Ò³Ãæ(Ó¢ÎÄ)£¬µ¥»÷ÿ¸öʵÀýµÄͼƬ½ØÍ ......
¸ù¾ÝW3C¶¨Ò壬ûÓÐfloatÊôÐÔµÄÍâ²ãbox²»»á×Ô¶¯¼ÆËã¸ß¶È£¬Òª¼ÆËã¸ß¶È£¬±ØÐëÔÚÄÚ²ã×îºóÒ»¸öbox¼ÓÈëclear:both¡£
Opera¡¢netscape¡¢mozillaµÈ²»»á¼ÆËãÍâ²ãbox¸ß¶È£¬µ«ÊÇ΢Èíie6»á×Ô¶¯¼ÆËãÍâ²ã¸ß¶È¡£±ÈÈ磺
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran ......