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

×îÈ«µÄCSSä¯ÀÀÆ÷¼æÈÝÎÊÌâ

CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔ­Àí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû. 
CSS¼¼ÇÉ
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¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£µ«IE²»ÈϵÃÕâ¸ö£¬¶øËüʵ¼ÊÉϰÑwidthµ±×ö×îС¿í¶ÈÀ´Ê¹¡£Îª


Ïà¹ØÎĵµ£º

CSSÔÚMyEclipseÏÂÎÞ·¨ÔØÈëÎÊÌâ¡£

ÔÚJSPÒ³ÃæÉϼÓÈë
<%String path = request.getContextPath();%>
<link  href="<%=path%>/css/style.css" rel="stylesheet" type="text/css">
ÏÂÁз½Ê½Ã²ËƲ»ÐУº
<link  href="../css/style.css" rel="stylesheet" type="text/css">
<link  href="../../css/style.css" rel ......

CSS²¼¾Ö¿Ú¾÷

 
¡¡¡¡
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈ˰ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסĨ£¿
Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£»
¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬ÈÝÆ÷×ÔÈ»ÏÔÆäÖУ»
Èý¡¢ÈýÏñËØÎı¾ÂýÒÆ²»±Ø»Å£¬¸ß¶ÈÉèÖðïÄãæ ......

css×Ô¶¯Ê¹ÓÃÑùʽ

ÎÄ×Ö×Ô¶¯Ê¹ÓÃÑùʽ
.inputText{
border:1px solid #7898b8;
height:20px;
padding-left:2px;
line-height:20px;
background-image:url(images\\inputtext_bg.gif);
background-repeat:repeat-x;
color:#339900;
}
.inputTextÊÇ ×ÖÌå×Ô¶¯ÉèÖÃÑùʽµÄÃû³Æ
¸÷Öֿؼþ×Ô¶¯Ì×ÓÃÑùʽ
±ÈÈçtable,td
table{border-colla ......

cssÀý×Ó

/*
*´´½¨ÈË£ºÝþÒËÖÒ
*ÓÃ;£ºÑ§Ï°css£¬Ó¦ÓÃÓÚÐÂÎÅϵͳ
*/
*
{
    /*°ÑĬÈÏÖµÉèÖÃΪ0*/
    margin: 0;
    padding: 0;
    border-width: 0;
}
body
{
    font-size: 14px;
}
a:link£¬a:visited
{
    /*Êó ......

¡¾×ܽ᡿ä¯ÀÀÆ÷CSS Hacks»ã×Ü

ä¯ÀÀÆ÷¼æÈÝ¿ÉÒÔ˵ÊÇǰ¶Ë¿ª·¢ËùÒªÃæ¶ÔµÄµÚÒ»¸öÌôÕ½£¬Ä¿Ç°ÎҵĵçÄÔÉÏÒѾ­°²×°ÁË6ÖÖä¯ÀÀÆ÷£¨»ùÓÚIEÄں˵IJ»Ë㣬ÈçMaxthonµÈ£©¡£
¡¡¡¡CSS hacksÀûÓÃä¯ÀÀÆ÷µÄ©¶´À´Òþ²ØÌض¨ä¯ÀÀÆ÷µÄCSS¹æÔò¡£ÊµÏÖä¯ÀÀÆ÷¼æÈÝÖ÷ÒªÓÐÁ½ÖÖ·½Ê½Ìõ¼þÑùʽ±íºÍCSS Hacks£¨Selector Hacks¡¢Attribute Hacks£©¡£¶Ô´Ë¸ù¾ÝһЩ×ÊÁÏ»ã×ÜÁËһЩCSS Hacks·½·¨¡ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ