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; ......
Á½Áв¼¾Ö
1¡¢×óÁй̶¨£¬ÓÒÁÐ×ÔÊÊÓ¦
#left{ width:190px; float:left; }
#right{ margin-left:205px; }
2¡¢ÓÒÁй̶¨£¬×óÁÐ×ÔÊÊÓ¦
#left{ float:left; width:100%; }
#right{ float:left; margin-left:-100px; width:100px; }
ÈýÁв¼¾Ö
×óÓ ......
.box128{
width:128px;
height:128px;
text-align: center;
vertical-align:middle;
display:table-cell !important;
display:block;
border:1px solid #DDD;
  ......
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
¡¡¡¡2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö± ......
cssÔ²½Çbox±¸Íü <style type="text/css">
div.box{}
div.boxtitle{background-color:#888; height:24px; line-height:24px; vertical-align:middle; padding-left:10px;}
div.boxcontent{ padding:10px; border:1px #888 solid;}
b.r {display:block;background: #fff} ......