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

ѧϰCSSÁ˽ⵥλemºÍpxµÄÇø±ð

ÔÚ¹úÄÚÍøÕ¾ÖУ¬°üÀ¨Èý´óÃÅ»§£¬ÒÔ¼°“ÒýÁì”ÖйúÍøÕ¾Éè¼Æ³±Á÷µÄÀ¶É«ÀíÏ룬ChinaUIµÈ¶¼ÊÇʹÓÃÁËpx×÷Ϊ×ÖÌ嵥λ¡£Ö»ÓаٶȺôõ×öÁ˸ö¿Éµ÷µÄ±íÂÊ¡£¶øÔÚ´óÑó±Ë°¶£¬¼¸ºõËùÓеÄÖ÷Á÷Õ¾µã¶¼Ê¹ÓÃem×÷Ϊ×ÖÌ嵥룬Ҳ¾ÍÊǿɵ÷µÄ¡£Ã»´í£¬px±Èem¸ü¼ÓÈÝÒ×ʹÓ㬴󲿷ֶÁÕß²»ÖªµÀemΪºÎÎï»òÕßËüÏ൱ÓÚ¶àÉÙpx¡£¹úÍâÈËÊ¿Èç´ËÖØÊÓÍøÕ¾Ò×ÓÃÐÔ(Accessibility)£¬²»½öÒòΪÆä¸ùÉúµÙ¹ÌµÄÈËÎľ«Éñ£¬Ö±½ÓÔ­Òò¿ÉÄÜÊÇÒòΪÓÐÒ»²¿·¨ÂÉÀ´Ô¼ÊøËûÃÇ—ÀýÈçÃÀ¹úµÄSection 508£¬Ç¿ÖÆÍøÕ¾´ïµ½Ò»¶¨µÄÒ×ÓÃÐÔ¡£
      ¹Ø¼üµã£º
¡¡¡¡1. IEÎÞ·¨µ÷ÕûÄÇЩʹÓÃpx×÷Ϊµ¥Î»µÄ×ÖÌå´óС;
¡¡¡¡2. ¹úÍâµÄ´ó²¿·ÖÍøÕ¾Äܹ»µ÷ÕûµÄÔ­ÒòÔÚÓÚÆäʹÓÃÁËem×÷Ϊ×ÖÌ嵥λ;
¡¡¡¡3. FirefoxÄܹ»µ÷ÕûpxºÍem£¬µ«ÊÇ96%ÒÔÉϵÄÖйúÍøÃñʹÓÃIEä¯ÀÀÆ÷(»òÄÚºË)¡£
¡¡¡¡pxÏñËØ(Pixel)¡£Ïà¶Ô³¤¶Èµ¥Î»¡£ÏñËØpxÊÇÏà¶ÔÓÚÏÔʾÆ÷ÆÁÄ»·Ö±æÂʶøÑԵġ£
¡¡¡¡emÊÇÏà¶Ô³¤¶Èµ¥Î»¡£Ïà¶ÔÓÚµ±Ç°¶ÔÏóÄÚÎı¾µÄ×ÖÌå³ß´ç¡£È統ǰ¶ÔÐÐÄÚÎı¾µÄ×ÖÌå³ß´çδ±»ÈËΪÉèÖã¬ÔòÏà¶ÔÓÚä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå³ß´ç¡£
¡¡¡¡ÈÎÒâä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå¸ß¶¼ÊÇ16px¡£ËùÓÐδ¾­µ÷ÕûµÄä¯ÀÀÆ÷¶¼·ûºÏ: 1em=16px¡£ÄÇô12px=0.75em,10px=0.625em¡£ÎªÁ˼ò»¯font-sizeµÄ»»Ë㣬ÐèÒªÔÚcssÖеÄbodyÑ¡ÔñÆ÷ÖÐÉùÃ÷Font-size=62.5%£¬Õâ¾ÍʹemÖµ±äΪ 16px*62.5%=10px, ÕâÑù12px=1.2em, 10px=1em, Ò²¾ÍÊÇ˵ֻÐèÒª½«ÄãµÄÔ­À´µÄpxÊýÖµ³ýÒÔ10£¬È»ºó»»ÉÏem×÷Ϊµ¥Î»¾ÍÐÐÁË¡£
¡¡¡¡emÓÐÈçÏÂÌØµã£º
¡¡¡¡1. emµÄÖµ²¢²»Êǹ̶¨µÄ;
¡¡¡¡2. em»á¼Ì³Ð¸¸¼¶ÔªËصÄ×ÖÌå´óС¡£
¡¡¡¡ËùÒÔÎÒÃÇÔÚдCSSµÄʱºò£¬ÐèҪעÒâÁ½µã£º
¡¡¡¡1. bodyÑ¡ÔñÆ÷ÖÐÉùÃ÷Font-size=62.5%;
¡¡¡¡2. ½«ÄãµÄÔ­À´µÄpxÊýÖµ³ýÒÔ10£¬È»ºó»»ÉÏem×÷Ϊµ¥Î»;
¡¡¡¡3. ÖØÐ¼ÆËãÄÇЩ±»·Å´óµÄ×ÖÌåµÄemÊýÖµ¡£±ÜÃâ×ÖÌå´óСµÄÖØ¸´ÉùÃ÷¡£
¡¡¡¡Ò²¾ÍÊDZÜÃâ1.2 * 1.2= 1.44µÄÏÖÏó¡£±ÈÈç˵ÄãÔÚ#contentÖÐÉùÃ÷ÁË×ÖÌå´óСΪ1.2em£¬ÄÇôÔÚÉùÃ÷pµÄ×ÖÌå´óСʱ¾ÍÖ»ÄÜÊÇ1em£¬¶ø²»ÊÇ1.2em, ÒòΪ´Ëem·Ç±Ëem£¬ËüÒò¼Ì³Ð#contentµÄ×ÖÌå¸ß¶ø±äΪÁË1em=12px¡£
¡¡¡¡µ«ÊÇ12pxºº×ÖÀýÍ⣬¾ÍÊÇÓÉÒÔÉÏ·½·¨µÃµ½µÄ12px(1.2em)´óСµÄºº×ÖÔÚIEÖв¢²»µÈÓÚÖ±½ÓÓÃ12px¶¨ÒåµÄ×ÖÌå´óС£¬¶øÊÇÉÔ´óÒ»µã¡£Õâ¸öÎÊÌâ JoruxÒѾ­½â¾ö£¬Ö»ÐèÔÚbodyÑ¡ÔñÆ÷ÖаÑ62.5%»»³É63%¾ÍÄÜÕý³£ÏÔʾÁË¡£Ô­Òò¿ÉÄÜÊÇIE´¦Àíºº×Öʱ£¬¶ÔÓÚ¸¡µãµÄȡֵ¾«È·¶ÈÓÐÏÞ¡£²»ÖªµÀÓÐûÓÐÆäËûµÄ½âÊÍ¡£
×ÊÁÏÒýÓÃ:http://www.knowsky.com/348005.html


Ïà¹ØÎĵµ£º

CSSµÄÁ½¸öС¼¼ÇÉ

 1¡¢ÁбíºáÅÅ
     ½«liµÄÑùʽÉèÖÃΪ
     li {display:block;float:left;}
2¡¢È¥³ýͼƬ´¹Ö±·½ÏòµÄ¿Õ°×
     ×îºÃµÄ×ö·¨ÊÇΪimg ¼ÓÉÏ vertical-alignÊôÐÔ£¬ÕâÑù¾Í¿´²»µ½¿Õ°×ÁË¡£
......

DIV+CSSÃæÊ԰˸öÌâ

ÕâЩ¶¼ÊÇ֮ǰѧϰµÄʱºò×ܽáµÄ£¬ÏÖÔÚ°ÑËüÃǶ¼ÉÏ´«ÉÏÀ´£º
DIV+CSSÃæÊ԰˸öÌâÊÇ֮ǰÔÚÄĸöÍøÕ¾¿´µ½ÁË£¬ÏÖÔÚÔõôҲÕÒ²»µ½ÁË£¬Ë÷ÐÔ×Ô¼ºÁôÒ»·Ý°É£¡
Ò»¡¢³¬Á´½Ó·ÃÎʹýºóhoverÑùʽ¾Í²»³öÏÖµÄÎÊÌ⣿
¡¡¡¡±»µã»÷·ÃÎʹýµÄ³¬Á´½ÓÑùʽ²»ÔÚ¾ßÓÐhoverºÍactiveÁË,½â¾ö·½·¨ÊǸıäCSSÊôÐÔµÄÅÅÁÐ˳Ðò: L-V-H-A
¶þ¡¢IE6µÄË«±¶±ß¾àBUG ......

CSSÑùʽ½â¾öÓ¢ÎÄ»»ÐжϴÊÎÊÌâ

ͨ³£µÄÎÒÃÇÔÚ¶ÁÈ¡ÎÄÕ±êÌâµÄʱºò£¬Óöµ½×Ö·û¹ý¶à£¬¶¼ÊÇͨ¹ý³ÌÐòÔÚSERVER¶Ë½ØÈ¡Ò»¶¨µÄ×Ö·ûÊý£¬È»ºóÌí¼Ó...À´ÊµÏÖ±êÌⳤ¶È½ØÈ¡µÄ¡£ÆäʵÎÒÃÇÒ²¿ÉÒÔͨ¹ýCSSÀ´¿ØÖÆ¡£
ʵÁÐÈçÏ£º
.title
{
width:200px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
¿ÉÓÃspan»òdivÒ ......

×Ô¶¨ÒåCSDN BlogµÄCSSÑùʽ

Ô­ÎÄ´«ËÍÃÅ£ºhttp://blog.csdn.net/dux003/archive/2009/11/08/4786371.aspx
csdn blog css×Ô¶¨ÒåÉèÖÃ
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_conten ......

CSSµÄÖÖÀà:Àà/±êÇ©Ñùʽ/IDÑ¡Ôñ·û/αÀà

CSSÑùʽµÄÖÖÀࣺ
1 £®HTML ±ê¼Ç·û£ºÓÃÓÚ¶¨ÒåHTML µÄTAGS Ñùʽ£¬ÀýÈç bodyp img µÈ¡£
ÀýStyle.cssÖж¨ÒåµÄbody\h1\p\img µÈ Àýstyle.css
2 £®ÀàÑ¡ÔñÆ÷£ºÒÔ . ¿ªÍ·£¬Ñùʽһµ©¶¨Ò壬¿É¾ÍÓÃÓÚÈκÎHTML ÔªËØ ¡£
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Trans
CSSÑùʽµÄÖÖÀࣺ
1
£®HTML
±ê¼Ç·û£ºÓÃÓÚ¶¨ÒåHTML
µ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ