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

div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨


div+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µ±×ö×îС¿í¶ÈÀ´Ê¹¡£ÎªÁËÈÃÕâÒ»ÃüÁî


Ïà¹ØÎĵµ£º

DIV+CSSÖ®float

test.html£º
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id=&qu ......

ÄãÏÖÔÚµÄCSSˮƽ´¦ÓÚʲôµÈ¼¶£¿

CSS(²ãµþÑùʽ±í),¿ÉÄÜ¿´¹ýÍøÕ¾ÖÆ×÷½Ì³ÌÍø»ù´¡½Ì³ÌµÄÈ˶¼ÖªµÀ´ó¸ÅÊÇʲô»ØÊÂ.±¾ÎÄÀ´²âÒ»ÏÂ,ÄãѧϰCSSÏÖÔÚ´¦ÓÚÔõôһ¸ö½×¶Î»òÕß˵´¦ÔÚÒ»¸öʲôµÈ¼¶.
       ±¾ÎÄ×ܹ²½«CSSѧϰÕߴӵ͵½¸ß·ÖΪÁù¸öµÈ¼¶.¿ìÀ´¿´¿´ÄãÊÇÔÚÄĸöµÈ¼¶.
¡¡¡¡µÚ0¼¶£ºCSS£¿Ê²Ã´CSS,ÊDz»ÊÇCS°¡.ÄÇÓÎÏ·ÎÒÍæ¹ýѽ.ÊǸö¶àÈËÓÎ ......

´«ÖDz¥¿Íѧϰ×ܽá CSS²ãµþÑùʽ±í

CSS(Cascading Style Sheets)²ãµþÑùʽ±í×÷ÓÃÊǽ«ÍøÒ³ÄÚÈݺÍÏÔʾÑùʽ½øÐзÖÀ룬Ìá¸ßÁËÏÔʾ¹¦ÄÜ¡£
CSS´úÂë¸ñʽ£º
       Ñ¡ÔñÆ÷Ãû³Æ { ÊôÐÔÃû£ºÊôÐÔÖµ£»ÊôÐÔÃû£ºÊôÐÔÖµ£»……}
Ñ¡ÔñÆ÷£¨¶Ô²»Í¬µÄHTML±êÇ©½øÐпØÖÆ£¬²¢¸³Óè¸÷ÖÖÑùʽÉùÃ÷£¬¼´¿ÉʵÏÖ¸÷ÖÖЧ¹û£©£º
  ±êÇ©Ñ ......

CSSÔÚÏßÓÅ»¯

×î½üÔÚÍøÉÏÕÒµ½Á˼¸¿îCSSÔÚÏßÓÅ»¯Æ÷£¬×Ô¼ºÊÔÁËÊÔ£¬·ÅÉÏÀ´¸ú´ó¼Ò·ÖÏíһϡ£
1. Online CSS Optimizer /ÔÚÏßCSSÓÅ»¯
¸ÃÔÚÏß¹¤¾ßÓÃÓÚ¾«¼òºÍѹËõÑùʽ±íµÄÎļþ´óС£¬ÓÅ»¯ºóµÄ´úÂ뽫ÍêÈ«ÊÇ»ìÂҵģ¬Ö§³ÖÊäÈëURL£¬Ìá½»ÎļþºÍÖ±½ÓÊäÈë½øÐÐѹËõ¡£
2. CSS Compressor/CSSѹËõ
×÷ÓÃͬÉÏ£¬µ«Õâ¸ö¹¤¾ßÓµÓзdz£ÏêϸµÄѹËõÑ¡ÏËü°üº¬» ......

CssÌõ¼þÑùʽ±í

CssÖеÄÌõ¼þÑùʽ±í
<!--[if lte IE 6 ]>
<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" media="all"
type="text/css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" mce_href="ie7.css" media="all"
type="text/css"/>
<![en ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ