SpriteMe Ò³ÃæCSSͼƬ¹¤¾ß
SpriteMeÊÇGoogleµÄÒ»¸ö¿ªÔ´ÏîÄ¿£¬¿ÉÒÔÓÃÀ´·½±ãµØÕÒ³öÒ»¸öÒ³ÃæÖÐËùʹÓõÄͼƬ£¬È»ºó¿ÉÒÔ½«ËùÒÔͼƬºÏ²¢µ½Ò»¸ö“Sprite”ͼƬ£¬È»ºóÔÙͨ¹ý
CSS¿ØÖƵ÷ÓÃÄÄÒ»¸öÇøÓò£¬ÆäÌṩÁËÒ»¸öÍøÕ¾À´°²×°£¬ÑÝʾʹÓ÷½·¨£¬http://spriteme.org/ ¡£
°²×°·½·¨ºÜ¼òµ¥£¬°´ÕÕÉÏÃæÄǸöÒ³ÃæÉϵÄÌáʾ£¬½«Ò»¸öÁ´½ÓÍϵ½“ÊéÇ©¹¤¾ßÀ¸”¼´¿É£¬È»ºóÔÙ°´ÕÕÉÏÃæµÄ“Demo”Ò»²½²½µÄ²Ù×÷¡£
SpriteMe ÌṩµÄÌØÐÔ:
²éÕÒÒ³Ãæ±³¾°Í¼Æ¬£»
×éÖ¯ËùÓÐͼƬµ½Ò»¸ö sprites£»
Éú³É sprite£»
½«Éú³ÉµÄ sprite ×¢µ½µ±Ç°Ò³Ã棻
ÖØÐ¼ÆËã±³¾°Í¼Æ¬Î»ÖõÄCSS¡£
¸Ã¹¤¾ßºÜ·½±ãʹÓ㬶ÔÓÚÍøÒ³¿ª·¢Õß¿ÉÒÔÌá¸ßÆäÒ³ÃæÉè¼ÆµÄЧÂÊ£¬ºÜÔÞ£¡£¡
Ïà¹ØÎĵµ£º
CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔÀí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ......
¡¡¡¡×÷ÎªÍøÒ³Éè¼ÆÊ¦(ǰ¶Ë¹¤³Ìʦ)£¬Äã¿ÉÄÜ»¹¼ÇµÃÔø¾µÄÄǸöÍøÒ³´óС½¨Òé:Ò»¸öÍøÒ³£¨°üÀ¨HTML¡¢CSS¡¢Javacript¡¢FlashºÍͼ
Ƭ£©¾¡Á¿²»Òª³¬¹ý30KBµÄ´óС£¬Ëæ×Å»¥ÁªÍøµÄÈÕÒæÅÓ´ó£¬ÍøÂç´ø¿íÒ²ÔÚ·ÉËÙ·¢Õ¹£¬ºÜ¶àÉè¼ÆÊ¦ÒѾ²»ÔÙ¿¼ÂÇÕâÌõ30KBµÄÀíÏë×¼Ôò¡£Ëæ×ÅÔ½À´Ô½ÊÜ»¶ÓµÄ
CSS²¼¾ÖºÍJavascript¶ÔÍøÕ¾Óû§ÌåÑéµÄÇ¿»¯£¬Ê¹µÃÕâÖÖÏÖÏ ......
1.¶¨ÒåDIV
¡¡¡¡·ÖÎöÒ»¸öµäÐ͵͍ÒådivÀý×Ó£º
¡¡¡¡#sample{ MARGIN: 10px 10px 10px 10px;
¡¡¡¡PADDING:20px 10px 10px 20px;
¡¡¡¡BORDER-TOP: #CCC 2px solid;
¡¡¡¡BORDER-RIGHT: #CCC 2px solid;
¡¡¡¡BORDER-BOTTOM: #CCC 2px solid;
¡¡¡¡BORDER-LEFT: #CCC 2px solid;
¡¡¡¡BACKGROUND: url(images/bg_poem.jpg) # ......
Â˾µÐ§¹û | ¹¦ÄÜÃèÊö
-----------------------------------------------
Alpha | ÉèÖò»Í¬µÄ͸Ã÷¶È±ä»¯Ð§¹û
-----------------------------------------------
Blur | ½¨Á¢Ä£ºýЧ¹û
-----------------------------------------------
DropShadow| ½¨Á¢Ò»ÖÖÆ«ÒƵÄÓ°ÏóÂÖÀª£¬¼´Í¶ÉäÒõÓ°
---------------------- ......
¡¡¡¡ÔÚµ±½ñÍøÒ³Éè¼Æ/¿ª·¢Êµ¼ùÖУ¬Ê¹ÓÃCSSÀ´ÎªÓïÒ廯µÄ(X)HTML±ê¼ÇÌí¼ÓÑùʽ·ç¸ñÊÇÖØÒªµÄ¹Ø¼ü¡£ÔÚÉè¼ÆÊ¦ÃǵÄÃÎÏëÖж¼´æÔÚ×ÅÕâÑùµÄÒ»¸öÍêÃÀ
ÊÀ½ç:ËùÓеÄä¯ÀÀÆ÷¶¼Äܹ»Àí½âºÍÊÊÓöàÓÐCSS¹æÔò£¬²¢ÇÒ³ÊÏÖÏàͬµÄÊÓ¾õЧ¹û(ûÓмæÈÝÐÔÎÊÌâ)¡£µ«ÊÇ£¬ÎÒÃDz¢Ã»ÓÐÉú»îÔÚÕâ¸öÍêÃÀµÄÊÀ½ç£¬ÏÖʵÖз¢ÉúµÄʧ
ÇÔÈ´×ÜÊÇǡǡÏà·´£¬ºÜ¶àCSSÑùʽÔÚ ......