SpriteMe Ò³ÃæCSSͼƬ¹¤¾ß
SpriteMeÊÇGoogleµÄÒ»¸ö¿ªÔ´ÏîÄ¿£¬¿ÉÒÔÓÃÀ´·½±ãµØÕÒ³öÒ»¸öÒ³ÃæÖÐËùʹÓõÄͼƬ£¬È»ºó¿ÉÒÔ½«ËùÒÔͼƬºÏ²¢µ½Ò»¸ö“Sprite”ͼƬ£¬È»ºóÔÙͨ¹ý
CSS¿ØÖƵ÷ÓÃÄÄÒ»¸öÇøÓò£¬ÆäÌṩÁËÒ»¸öÍøÕ¾À´°²×°£¬ÑÝʾʹÓ÷½·¨£¬http://spriteme.org/ ¡£
°²×°·½·¨ºÜ¼òµ¥£¬°´ÕÕÉÏÃæÄǸöÒ³ÃæÉϵÄÌáʾ£¬½«Ò»¸öÁ´½ÓÍϵ½“ÊéÇ©¹¤¾ßÀ¸”¼´¿É£¬È»ºóÔÙ°´ÕÕÉÏÃæµÄ“Demo”Ò»²½²½µÄ²Ù×÷¡£
SpriteMe ÌṩµÄÌØÐÔ:
²éÕÒÒ³Ãæ±³¾°Í¼Æ¬£»
×éÖ¯ËùÓÐͼƬµ½Ò»¸ö sprites£»
Éú³É sprite£»
½«Éú³ÉµÄ sprite ×¢µ½µ±Ç°Ò³Ã棻
ÖØÐ¼ÆËã±³¾°Í¼Æ¬Î»ÖõÄCSS¡£
¸Ã¹¤¾ßºÜ·½±ãʹÓ㬶ÔÓÚÍøÒ³¿ª·¢Õß¿ÉÒÔÌá¸ßÆäÒ³ÃæÉè¼ÆµÄЧÂÊ£¬ºÜÔÞ£¡£¡
Ïà¹ØÎĵµ£º
¡¡¡¡×÷ÎªÍøÒ³Éè¼ÆÊ¦(ǰ¶Ë¹¤³Ìʦ)£¬Äã¿ÉÄÜ»¹¼ÇµÃÔø¾µÄÄǸöÍøÒ³´óС½¨Òé:Ò»¸öÍøÒ³£¨°üÀ¨HTML¡¢CSS¡¢Javacript¡¢FlashºÍͼ
Ƭ£©¾¡Á¿²»Òª³¬¹ý30KBµÄ´óС£¬Ëæ×Å»¥ÁªÍøµÄÈÕÒæÅÓ´ó£¬ÍøÂç´ø¿íÒ²ÔÚ·ÉËÙ·¢Õ¹£¬ºÜ¶àÉè¼ÆÊ¦ÒѾ²»ÔÙ¿¼ÂÇÕâÌõ30KBµÄÀíÏë×¼Ôò¡£Ëæ×ÅÔ½À´Ô½ÊÜ»¶ÓµÄ
CSS²¼¾ÖºÍJavascript¶ÔÍøÕ¾Óû§ÌåÑéµÄÇ¿»¯£¬Ê¹µÃÕâÖÖÏÖÏ ......
.box128{
width:128px;
height:128px;
text-align: center;
vertical-align:middle;
display:table-cell !important;
display:block;
border:1px solid #DDD;
  ......
µÚÈý²½ÊǶ¨ÒåÄãµÄÓïÑÔ±àÂ룬ÀàËÆÕâÑù£º
¡¡¡¡<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
ΪÁ˱»ä¯ÀÀÆ÷ÕýÈ·½âÊͺÍͨ¹ýW3C´úÂëУÑ飬ËùÓеÄXHTMLÎĵµ¶¼±ØÐëÉùÃ÷ËüÃÇËùʹÓõıàÂëÓïÑÔ£¬ÎÒÃÇÒ»°ãʹÓÃgb2312(¼òÌåÖÐÎÄ)£¬ÖÆ×÷¶à¹úÓïÑÔÒ³ÃæÒ²ÓпÉÄÜÓÃUnicode¡¢ISO-8859-1µÈ£¬¸ù¾ÝÄãµÄÐ ......
ÊÂʵÉÏ£¬ËùÓбíÏֵĵط½¶¼ÐèÒªÓÃCSSÀ´ÊµÏÖ¡£ÎÒÃÇÒÔǰ¶¼Ï°¹ßÓÃtableÀ´¶¨Î»ºÍ²¼¾Ö£¬ÏÖÔÚÒª¸ÄÓÃDIVÀ´¶¨Î»ºÍ²¼¾Ö¡£ÕâÊÇ˼ά·½Ê½µÄ±ä»¯£¬Ò»¿ªÊ¼ÓÐЩ²»Ï°¹ß¡£ºÇºÇ£¬Èκαä¸ï¶¼»áÓÐ×èÁ¦µÄ£¬ÎªÁËÏíÊܱê×¼´øÀ´µÄ"Òæ´¦"£¬·ÅÆúһЩÀϵĴ«Í³×ö·¨ÊÇÖµµÃµÄ¡£
¡¡¡¡Íⲿµ÷ÓÃÑùʽ±í
¡¡¡¡ÔÚÒÔǰ£¬ÎÒÃÇͨ³£²ÉÓÃ2ÖÖ·½·¨Ê¹ÓÃÑùʽ±í£º
......
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) # ......