SpriteMe Ò³ÃæCSSͼƬ¹¤¾ß
SpriteMeÊÇGoogleµÄÒ»¸ö¿ªÔ´ÏîÄ¿£¬¿ÉÒÔÓÃÀ´·½±ãµØÕÒ³öÒ»¸öÒ³ÃæÖÐËùʹÓõÄͼƬ£¬È»ºó¿ÉÒÔ½«ËùÒÔͼƬºÏ²¢µ½Ò»¸ö“Sprite”ͼƬ£¬È»ºóÔÙͨ¹ý
CSS¿ØÖƵ÷ÓÃÄÄÒ»¸öÇøÓò£¬ÆäÌṩÁËÒ»¸öÍøÕ¾À´°²×°£¬ÑÝʾʹÓ÷½·¨£¬http://spriteme.org/ ¡£
°²×°·½·¨ºÜ¼òµ¥£¬°´ÕÕÉÏÃæÄǸöÒ³ÃæÉϵÄÌáʾ£¬½«Ò»¸öÁ´½ÓÍϵ½“ÊéÇ©¹¤¾ßÀ¸”¼´¿É£¬È»ºóÔÙ°´ÕÕÉÏÃæµÄ“Demo”Ò»²½²½µÄ²Ù×÷¡£
SpriteMe ÌṩµÄÌØÐÔ:
²éÕÒÒ³Ãæ±³¾°Í¼Æ¬£»
×éÖ¯ËùÓÐͼƬµ½Ò»¸ö sprites£»
Éú³É sprite£»
½«Éú³ÉµÄ sprite ×¢µ½µ±Ç°Ò³Ã棻
ÖØÐ¼ÆËã±³¾°Í¼Æ¬Î»ÖõÄCSS¡£
¸Ã¹¤¾ßºÜ·½±ãʹÓ㬶ÔÓÚÍøÒ³¿ª·¢Õß¿ÉÒÔÌá¸ßÆäÒ³ÃæÉè¼ÆµÄЧÂÊ£¬ºÜÔÞ£¡£¡
Ïà¹ØÎĵµ£º
¡¡¡¡CSS¼òд
¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆÎªCSS
´úÂëÓÅ»¯
¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔÖø¼õÉÙCSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö×¶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶӯäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡Ì«¶àµÄÈËʹÓÃDreamwe ......
Á½Áв¼¾Ö
1¡¢×óÁй̶¨£¬ÓÒÁÐ×ÔÊÊÓ¦
#left{ width:190px; float:left; }
#right{ margin-left:205px; }
2¡¢ÓÒÁй̶¨£¬×óÁÐ×ÔÊÊÓ¦
#left{ float:left; width:100%; }
#right{ float:left; margin-left:-100px; width:100px; }
ÈýÁв¼¾Ö
×óÓ ......
¡¡¡¡×÷ÎªÍøÒ³Éè¼ÆÊ¦(ǰ¶Ë¹¤³Ìʦ)£¬Äã¿ÉÄÜ»¹¼ÇµÃÔø¾µÄÄǸöÍøÒ³´óС½¨Òé:Ò»¸öÍøÒ³£¨°üÀ¨HTML¡¢CSS¡¢Javacript¡¢FlashºÍͼ
Ƭ£©¾¡Á¿²»Òª³¬¹ý30KBµÄ´óС£¬Ëæ×Å»¥ÁªÍøµÄÈÕÒæÅÓ´ó£¬ÍøÂç´ø¿íÒ²ÔÚ·ÉËÙ·¢Õ¹£¬ºÜ¶àÉè¼ÆÊ¦ÒѾ²»ÔÙ¿¼ÂÇÕâÌõ30KBµÄÀíÏë×¼Ôò¡£Ëæ×ÅÔ½À´Ô½ÊÜ»¶ÓµÄ
CSS²¼¾ÖºÍJavascript¶ÔÍøÕ¾Óû§ÌåÑéµÄÇ¿»¯£¬Ê¹µÃÕâÖÖÏÖÏ ......
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
¡¡¡¡2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö± ......
¡¡¡¡ÔÚµ±½ñÍøÒ³Éè¼Æ/¿ª·¢Êµ¼ùÖУ¬Ê¹ÓÃCSSÀ´ÎªÓïÒ廯µÄ(X)HTML±ê¼ÇÌí¼ÓÑùʽ·ç¸ñÊÇÖØÒªµÄ¹Ø¼ü¡£ÔÚÉè¼ÆÊ¦ÃǵÄÃÎÏëÖж¼´æÔÚ×ÅÕâÑùµÄÒ»¸öÍêÃÀ
ÊÀ½ç:ËùÓеÄä¯ÀÀÆ÷¶¼Äܹ»Àí½âºÍÊÊÓöàÓÐCSS¹æÔò£¬²¢ÇÒ³ÊÏÖÏàͬµÄÊÓ¾õЧ¹û(ûÓмæÈÝÐÔÎÊÌâ)¡£µ«ÊÇ£¬ÎÒÃDz¢Ã»ÓÐÉú»îÔÚÕâ¸öÍêÃÀµÄÊÀ½ç£¬ÏÖʵÖз¢ÉúµÄʧ
ÇÔÈ´×ÜÊÇǡǡÏà·´£¬ºÜ¶àCSSÑùʽÔÚ ......