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>
<head>
<title>CSSαÀà pseudo-class</title>
<style type="text/css">
a:link {color: #FF0000} /* δ±»·ÃÎʵÄÁ´½Ó ºìÉ« */
a:visited {color: #00FF00} /* Òѱ»·ÃÎʹýµÄÁ´½Ó ÂÌÉ« */
a:hover {color: #FFCC00} /* Êó±êÐü¸¡ÔÚÉϵÄÁ ......
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} ......
ÊÂʵÉÏ£¬ËùÓбíÏֵĵط½¶¼ÐèÒªÓÃCSSÀ´ÊµÏÖ¡£ÎÒÃÇÒÔǰ¶¼Ï°¹ßÓÃtableÀ´¶¨Î»ºÍ²¼¾Ö£¬ÏÖÔÚÒª¸ÄÓÃDIVÀ´¶¨Î»ºÍ²¼¾Ö¡£ÕâÊÇ˼ά·½Ê½µÄ±ä»¯£¬Ò»¿ªÊ¼ÓÐЩ²»Ï°¹ß¡£ºÇºÇ£¬Èκαä¸ï¶¼»áÓÐ×èÁ¦µÄ£¬ÎªÁËÏíÊܱê×¼´øÀ´µÄ"Òæ´¦"£¬·ÅÆúһЩÀϵĴ«Í³×ö·¨ÊÇÖµµÃµÄ¡£
¡¡¡¡Íⲿµ÷ÓÃÑùʽ±í
¡¡¡¡ÔÚÒÔǰ£¬ÎÒÃÇͨ³£²ÉÓÃ2ÖÖ·½·¨Ê¹ÓÃÑùʽ±í£º
......