ѧϰ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
Ïà¹ØÎĵµ£º
1. CSSµÄÒªµãÊÇÔÚÄãµÄÒ³ÃæÖÐʹÓüò½àµÄHTML´úÂë,È»ºó±àдCSS"¿ØÖƹæÔò"À´Ñùʽ»¯Ò³ÃæÖеĶÔÏó.Ò³Ãæ±£³ÖÇåÎúÓÐÌõ²»ÎÉ¿´ÉÏÈ¥·Ç³£°ô.ÕâÑùÄãµÄHtmlÒ³Ãæ¿ÉÒÔÔÚÒÆ¶¯É豸ºÍ±ê×¼ä¯ÀÀÆ÷ÖÐÔËÐÐ.Õâ¾ÍÊÇCSSµÄÒªµã.
²»¹ýCSSµÄÒÕÊõÔÚÓÚÄܹ»ÀûÓÃCSS¿ØÖƹæÔò¿ìËÙÓÐЧµØ²Ù×ÝÒ³Ãæ¶ÔÏó.°ÑCSS¹æÔòÓëHTML±ê¼ÇÆ¥ÅäÆðÀ´µÄ²Ù×ö¾ÍºÃÏñÊÇÒ»ÖÖ¶ ......
css¿ØÖÆÎ»Öãº
´¿Êý×Ö
el.style.posLeft = 0;
el.style.posTop = 0;
Êý×Ö+µ¥Î»
el.style.left = "0px";
el.style.top = "0px";
css¿ØÖÆÔªËصÄÑùʽ£º
document.getElementById("para").style.fontWeight ="bold";
»ò£¨ÆäËûÒ²ÊÇÕâÑù£©£º
document.getElementById("para").className ="strong"; ......
°æÈ¨ÉùÃ÷£ºÔ´´×÷Æ·£¬ÔÊÐí×ªÔØ£¬×ªÔØÊ±ÇëÎñ±ØÒÔ³¬Á´½ÓÐÎʽ±êÃ÷ÎÄÕÂÔʼ³ö°æ¡¢×÷ÕßÐÅÏ¢ºÍ±¾ÉùÃ÷¡£·ñÔò½«×·¾¿·¨ÂÉÔðÈΡ£http://blog.csdn.net/mayongzhan - ÂíÓÀÕ¼,myz,mayongzhan
Êé½ÓÉϻأ¬ÉÏ´Î˵µ½Ï´θüÐÂÊǺܾúܾÃÖ®ºóµÄÊ£¬¹û²»ÆäÈ»£¬È·ÊµÊǾÃÁËÒ»µã£¬Ò²Õý˵Ã÷csdnÔÚÎȶ¨ÖÐǰ½ø¡£½ñÌì·¢ÏÖÔÀ´ÔÚ²©¿ÍÓÒÏÂµÄ¹ã¸æ¿ò£¬ÏÖÔ ......
I needed a tab pane to put some content in my web pages. There are many solutions around
and I must say that they are quite good, but I had some extra requirements that I needed.
I did search around but I did not find what I wanted, so I ended up producing something and now I am sharing
it with y ......
ͨ³£µÄÎÒÃÇÔÚ¶ÁÈ¡ÎÄÕ±êÌâµÄʱºò£¬Óöµ½×Ö·û¹ý¶à£¬¶¼ÊÇͨ¹ý³ÌÐòÔÚSERVER¶Ë½ØÈ¡Ò»¶¨µÄ×Ö·ûÊý£¬È»ºóÌí¼Ó...À´ÊµÏÖ±êÌⳤ¶È½ØÈ¡µÄ¡£ÆäʵÎÒÃÇÒ²¿ÉÒÔͨ¹ýCSSÀ´¿ØÖÆ¡£
ʵÁÐÈçÏ£º
.title
{
width:200px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
¿ÉÓÃspan»òdivÒ ......