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

CSSä¯ÀÀÆ÷¼æÈÝÎÊÌâÕûÀí(IE6.0¡¢IE7.0 Óë FireFox)

Ô­ÎÄ:http://www.52css.com/article.asp?id=1026
 
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.
 
¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃ÷.
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ  
vertical-align:middle; 
½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; 
È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐС£
2. margin¼Ó±¶µÄÎÊÌâ      
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö·½°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;    
ÀýÈ磺
<#div id=”imfloat”>    
ÏàÓ¦µÄcssΪ    
#IamFloat
{
float:left; margin:5px;/*IEÏÂÀí½âΪ10px*/ 
display:inline;/*IEÏÂÔÙÀí½âΪ5px*/
}  
3.¸¡¶¯ie²úÉúµÄË«±¶¾àÀë      
#box{
float:left; width:100px; margin:0 0 0 100px; //ÕâÖÖÇé¿öÖ®ÏÂIE»á²úÉú200pxµÄ¾àÀë display:inline; //ʹ¸¡¶¯ºöÂÔ

ÕâÀïϸ˵һÏÂblockÓëinlineÁ½¸öÔªËØ£º
blockÔªËØµÄÌØµãÊÇ,×ÜÊÇÔÚÐÂÐÐÉÏ¿ªÊ¼,¸ß¶È,¿í¶È,Ðиß,±ß¾à¶¼¿ÉÒÔ¿ØÖÆ(¿éÔªËØ);
InlineÔªËØµÄÌØµãÊÇ,ºÍÆäËûÔªËØÔÚͬһÐÐÉÏ,²»¿É¿ØÖÆ(ÄÚÇ¶ÔªËØ);    
#box

display:block; //¿ÉÒÔΪÄÚÇ¶ÔªËØÄ£ÄâΪ¿éÔªËØ 
display:inline; //ʵÏÖͬһÐÐÅÅÁеÄЧ¹û 
diplay:table; 
}
4 IEÓë¿í¶ÈºÍ¸ß¶ÈµÄÎÊÌâ
IE ²»ÈϵÃmin-Õâ¸ö¶¨Ò壬µ«Êµ¼ÊÉÏËü°ÑÕý³£µÄwidthºÍheightµ±×÷ÓÐminµÄÇé¿öÀ´Ê¹¡£ÕâÑùÎÊÌâ¾Í´óÁË£¬Èç¹ûÖ»Óÿí¶ÈºÍ¸ß¶È£¬Õý³£µÄä¯ÀÀÆ÷ÀïÕâÁ½¸öÖµ¾Í²»»á±ä£¬Èç¹ûÖ»ÓÃmin-widthºÍmin-heightµÄ»°£¬IEÏÂÃæ¸ù±¾µÈÓÚûÓÐÉèÖÿí¶ÈºÍ¸ß¶È¡£    
±ÈÈçÒªÉèÖñ³¾°Í¼Æ¬£¬Õâ¸ö¿í¶ÈÊDZȽÏÖØÒªµÄ¡£
Òª½â¾öÕâ¸öÎÊÌ⣬¿ÉÒÔÕâÑù£º    
#box{ width: 80px; height: 35px;}
html>body #box

width: auto; height: auto; min-width: 80px; min-height: 35px;
}
5.Ò³ÃæµÄ×îС¿í¶È     
min -widthÊǸö·Ç³£·½±ãµÄCSSÃüÁËü¿ÉÒÔÖ¸¶¨ÔªËØ×îСҲ²»ÄÜСÓÚij¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£


Ïà¹ØÎĵµ£º

cssÖеÄborderÊôÐÔ

¡¡ÖÆ×÷¹ýÍøÒ³µÄÈ˶¼ÓÐΪ»­Ïß¶ø·³Äյľ­Àú£¬±¾ÎĽéÉܵÄС¼¼ÇÉÒ²Ðí¶ÔÄãÓÐËù°ïÖú¡£ÎÒÃÇÏÈÀ´ÈÏʶһÏ“Border”£¨»­±ß¿ò£©£¬ËüÊÇCSSµÄÒ»¸öÊôÐÔ£¬ÓÃËü¿ÉÒÔ¸øÄÜÈ·¶¨·¶Î§µÄHTML±ê¼Ç£¨ÈçTD¡¢DIVµÈµÈ£©»­±ß¿ò£¬Ëü¿ÉÒÔ¶¨Òå±ß¿òÏßµÄÀàÐÍ¡¢¿í¶ÈºÍÑÕÉ«£¬ÀûÓÃÕâ¸öÌØÐÔ£¬¿ÉÒÔÖÆ×÷Ò»Ð©ÌØÊâЧ¹û¡£ÏÂÃæ½«Í¨¹ýʵÀýÀ´ËµÃ÷ÆäÓ¦Óü¼ÇÉ¡£ ......

css µÄÃüÃû¹æ·¶

 Ò»£®ÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
¶þ£®³£ÓÃÀà/IDÃüÃû¹æ·¶
Ò³¡¡Ã¼£ºheader
ÄÚ¡¡ÈÝ£ºcontent
ÈÝ¡¡Æ÷£ºcontainer
Ò³¡¡½Å£ºfooter
°æ¡¡È¨£ºcopyright¡¡
µ¼¡¡º½£ºmenu
Ö÷µ¼º½£ºmainMenu
×Óµ¼º½£ºsubMenu
......

ÍøÕ¾±äºÚ»ÒÉ«CSSÂ˾µ´úÂë

ÍøÕ¾±äºÚ»ÒÉ«CSSÂ˾µ´úÂë
Òý×Ô:http://edu.seuuo.com/html/81/n-12181.html
Ϊ·½±ãÕ¾µã°§µ¿£¬ÌØÌṩcssÂ˾µ´úÂ룬ÒÔ±í°§µ¿¡£ÒÔÏÂΪȫվCSS´úÂë¡£
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
ʹÓ÷½·¨£ºÕâ¶Î´úÂë¿ÉÒÔ±äÍøÒ³ÎªºÚ°×£¬½«´úÂë¼Óµ½CSS×î¶¥¶Ë¾Í¿ÉÒÔʵÏÖËØ×°¡£½¨ÒéÈ«¹úÕ¾³¤¶¯ ......

³£ÓÃCSSÑ¡ÔñÆ÷


Ñ¡ÔñÆ÷ Óï·¨ ÃèÊö ʾÀý ±êǩѡÔñÆ÷ E{ .....} ÒÔÎĵµÔªËØ×÷ΪѡÔñ·û td{font-size:14px;
    ......} IDÑ¡ÔñÆ÷ #ID{...} ÒÔÎĵµÔªËصÄΩһ± ......

ÓÃCSSÉèÖÃÎı¾µÄÊôÐÔ

Ò»¡¢CSS Ö㤶ÈÓëÑÕÉ«
1¡¢³¤¶Èµ¥Î»ËµÃ÷
in Ó¢´ç
cm ¹«·Ö
mm ¹«Àï
cm ÒÔĿǰ×ÖÌå¸ß¶ÈΪµ¥Î»
ex ÒÔСд×Öĸ¸ß¶ÈΪµ¥Î»£¨´ó²¿·Ö²»Ö§³Ö£©
pt 1pt/72Ó¢´ç
pc 1pc/12pt
px ÏñËØ£¨ÍƼöʹÓã©
2¡¢ÑÕÉ«µ¥Î»£º ˵Ã÷
Ê®Áù½øÖÆÈ磺color:#ff0000
ÑÕÉ«Ãû³ÆÈ磺color:red
ÈýÔ­É«µ¥Î»È磺rgb(255,0,0)
Ò»°ã×î³£ÓõÄÊÇÊ®Áù½øÖ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ