Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

CSS Sprites

CSS SpritesÆäʵ¾ÍÊÇ°ÑÍøÒ³ÖÐһЩ±³¾°Í¼Æ¬ÕûºÏµ½Ò»ÕÅͼƬÎļþÖУ¬ÔÙÀûÓÃCSSµÄ“background-image”£¬“background- repeat”£¬“background-position”µÄ×éºÏ½øÐб³¾°¶¨Î»£¬background-position¿ÉÒÔÓÃÊý×ÖÄܾ«È·µÄ¶¨Î»³ö±³¾°Í¼Æ¬µÄλÖá£
Óŵ㣺
µ±Óû§ÍùUÅÌÖп½200ÕÅͼƬ£¬»áµÈºÜ¾Ã¡£µ«ÊÇÈç¹ûŪ³ÉÒ»¸öÎļþ£¬ÔÙ¿½±´¾Í»á¿ìºÜ¶à¡£
CSS Sprites µÄÄ¿µÄ¾ÍÊÇͨ¹ýÕûºÏͼƬ£¬¼õÉÙ¶Ô·þÎñÆ÷µÄÇëÇóÊýÁ¿£¬´Ó¶ø¼Ó¿ìÒ³Ãæ¼ÓÔØËٶȡ£
ʵÏÖ·½·¨£º
1,Ê×ÏȽ«Ð¡Í¼Æ¬ÕûºÏµ½Ò»ÕÅ´óµÄͼƬÉÏ 
2,È»ºó¸ù¾Ý¾ßÌåͼ±êÔÚ´óͼÉϵÄλÖ㬸ø±³¾°¶¨Î»¡£ 
3СͼƬÅÅÁз½Ã棺ÑÕÉ«Ïà½üµÄͼƬ·ÅÔÚÒ»Æ𣬿ÉÒÔ¼õÉÙÊä³öµÄÉ«Êý£¬½øÒ»²½½µµÍÎļþÌå»ý¡£
4.ÕûºÏͼƬÉú³É·½Ã棺PNG8µÄͼÏñ±ÈGIFͼÏñҪС30%×óÓÒ¡£
µ«ÊÇÔÚÕûºÏͼƬµÄ¹ý³ÌÖÐҲҪעÒ⣺²¢²»ÊÇËùÓеÄͼƬ¶¼ÊÇÓ¦¸ÃÕûºÏµ½ÕâÕžÞͼÉϵģ¬±ÈÈçһЩ¹ã¸æ¡¢ÕÕƬ¡¢´óµÄÀ¸Ä¿±êÌâ±³¾°£¬ÕâÀàͼƬ²»ÊʺÏÓÃ×÷ͼƬÕûºÏ¡£CSS SpritesÖ÷ÒªÃæÏòÄÇЩ“¸ü¶à”“µÇ½”“×¢²á”Ö®ÀàµÄСͼ±ê£¬ÍøÕ¾¹æÄ£Ò»°ãÊDZȽϴóµÄ¡£


Ïà¹ØÎĵµ£º

¼¸¸ö¾­µäµÄcss¼¼ÇÉ

ʹÓà line-height ´¹Ö±¾ÓÖÐ
line-height:24px;
ʹÓù̶¨¿í¶ÈµÄÈÝÆ÷²¢ÇÒÐèÒªÒ»Ðд¹Ö±¾ÓÖÐʱ£¬Ê¹Óà line-height ¼´¿É£¨¸ß¶ÈÓ븸²ãÈÝÆ÷Ò»Ö£©£¬¸ü¶àµÄ´¹Ö±¾ÓÖÐ×ܽá¿ÉÒÔ¿´ÕâÀï¡£
Çå³ýÈÝÆ÷¸¡¶¯
#main {
overflow:hidden;
}
²»ÈÃÁ´½ÓÕÛÐÐ
a {
white-space:nowrap;
}
ÉÏÃæµÄÉ趨¾ÍÄܱÜÃâÁ´½ÓÕÛÐУ¬²»¹ý¸ö ......

CSSÑ¡Ï

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ÎҵĻ¬¶¯ÃÅ& ......

°¢Àï°Í°Ícss»¬¶¯²Ëµ¥ ,»¬¶¯ÃÅ

°¢Àï°Í°ÍµÄÒ»¿î»¬¶¯·ÖÀà²Ëµ¥,Ч¹ûºÜ²»´í,µ«ÊÇʹÓÃÁ˽϶àµÄͼƬ,²»¹ýÕâЩͼƬֻÊDZ³¾°,²»Ó°ÏìÄãÐ޸IJ˵¥µÄÎÄ×Ö,ËùÒÔºÜÖµµÃ´ó¼ÒʹÓÃ,´úÂëÉÔÏÓ¶à,ѧϰCSSµÄÅóÓѺúÃÑо¿Ò»ÏÂ.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ......

CSS ʵÏÖ±³¾°Í¼Æ¬×ÔÊÊÓ¦td´óС

½â¾ö·½·¨£º
1¡¢
ÓÃcssÂ˾µ¡£
<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_img.jpg', sizingMethod='scale'" >
2¡¢
Äã¿ÉÒÔ¿¼ÂÇÓÃcssÂ˾µÀ´×ö±³¾°½¥±äЧ¹û£¬ÉèÖÃtdµÄcss
style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFFFFF' ......

CSSÈëÃŽ̳ÌÖ®CSSµÄÓï·¨

1.»ù±¾Óï·¨
¡¡¡¡
¡¡¡¡CSSµÄ¶¨ÒåÊÇÓÉÈý¸ö²¿·Ö¹¹³É£ºÑ¡Ôñ·û£¨selector£©£¬ÊôÐÔ£¨properties£©ºÍÊôÐÔµÄÈ¡Öµ£¨value£©¡£
¡¡¡¡»ù±¾¸ñʽÈçÏ£º
¡¡¡¡selector { property: value}
¡¡¡¡£¨Ñ¡Ôñ·û { ÊôÐÔ£ºÖµ}£©
¡¡¡¡Ñ¡Ôñ·ûÊÇ¿ÉÒÔÊǶàÖÖÐÎʽ£¬Ò»°ãÊÇÄãÒª¶¨ÒåÑùʽµÄHTML±ê¼Ç£¬ÀýÈçBODY¡¢P¡¢TABLE……£¬Äã¿ÉÒÔÍ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ