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%;ÒÔ±£Ö¤Á½¸öä¯ÀÀÆ÷ϾùÄܹ»Õý³£ÏÔʾ¡£
Ïà¹ØÎĵµ£º
1.ËùÓеıê¼Ç¶¼±ØÐëÒªÓÐÒ»¸öÏàÓ¦µÄ½áÊø±ê¼Ç
¡¡¡¡ÒÔǰÔÚHTMLÖУ¬Äã¿ÉÒÔ´ò¿ªÐí¶à±êÇ©£¬ÀýÈç<p>ºÍ<li>¶ø²»Ò»¶¨Ð´¶ÔÓ¦µÄ</p>ºÍ</li>À´¹Ø±ÕËüÃÇ¡£µ«ÔÚXHTMLÖÐÕâÊDz»ºÏ·¨µÄ¡£XHTMLÒªÇóÓÐÑϽ÷µÄ½á¹¹£¬ËùÓбêÇ©±ØÐë¹Ø±Õ¡£Èç¹ûÊǵ¥¶À²»³É¶ÔµÄ±êÇ©£¬ÔÚ±êÇ©×îºó¼ÓÒ»¸ö"/"À´¹Ø±ÕËü¡£ÀýÈç:
¡¡¡¡<br />&l ......
Â˾µÐ§¹û | ¹¦ÄÜÃèÊö
-----------------------------------------------
Alpha | ÉèÖò»Í¬µÄ͸Ã÷¶È±ä»¯Ð§¹û
-----------------------------------------------
Blur | ½¨Á¢Ä£ºýЧ¹û
-----------------------------------------------
DropShadow| ½¨Á¢Ò»ÖÖÆ«ÒƵÄÓ°ÏóÂÖÀª£¬¼´Í¶ÉäÒõÓ°
---------------------- ......
SpriteMeÊÇGoogleµÄÒ»¸ö¿ªÔ´ÏîÄ¿£¬¿ÉÒÔÓÃÀ´·½±ãµØÕÒ³öÒ»¸öÒ³ÃæÖÐËùʹÓõÄͼƬ£¬È»ºó¿ÉÒÔ½«ËùÒÔͼƬºÏ²¢µ½Ò»¸ö“Sprite”ͼƬ£¬È»ºóÔÙͨ¹ý
CSS¿ØÖƵ÷ÓÃÄÄÒ»¸öÇøÓò£¬ÆäÌṩÁËÒ»¸öÍøÕ¾À´°²×°£¬ÑÝʾʹÓ÷½·¨£¬http://spriteme.org/ ¡£
°²×°·½·¨ºÜ¼òµ¥£¬°´ÕÕÉÏÃæÄǸöÒ³ÃæÉϵÄÌáʾ£¬½«Ò»¸öÁ´½ÓÍϵ½“ÊéÇ©¹ ......
ý½éÀàÐÍ(Media Types)ÔÊÐíÄ㶨ÒåÒÔºÎÖÖý½éÀ´Ìá½»Îĵµ£¬Îĵµ¿ÉÒÔ±»ÏÔʾÔÚÏÔʾÆ÷¡¢´òÓ¡»ú»òÕßÌý¾õä¯ÀÀÆ÷µÈµÈ¡£
ʵÀý
ÏÂÃæÕâ¸öÀý×ÓÖеÄÑùʽ¸æÖªä¯ÀÀÆ÷ÔÚÏÔʾÆ÷ÉÏÏÔʾ 14 ÏñËØµÄ Verdana ×ÖÌå¡£µ«ÊǼÙÈçÒ³ÃæÐèÒª±»´òÓ¡£¬½«Ê¹Óà 10 ¸öÏñËØµÄ Times ×ÖÌå¡£×¢Ò⣺font-weight ±»ÉèÖÃΪ´ÖÌ壬²»ÂÛÏÔʾÆ÷»¹ÊÇֽý½é£º
<%@ pa ......
DOCTYPE Ó°Ïì CSS ´¦Àí
Firefox: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ¾ÓÖÐ, IE ²»ÐÐ
Firefox: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ
Firefox: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ width, µ« IE ²»»á, ¹ÊÐèÒªÓà !important ¶àÉèÒ»¸ö heig ......