Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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µ±×ö×îС¿í¶ÈÀ´Ê¹¡£ÎªÁËÈÃÕâÒ»ÃüÁî


Ïà¹ØÎĵµ£º

ʹÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾµÄ¼¼ÇÉ

ת×Ô£ºhttp://www.linji.cn/post/1595/
ÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇ闗ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬µÄä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÔÚÕâÀÎÒ½éÉÜÒ»ÖֺܺõľÓÖд¦Àí°ì·¨£¬µ«Õâ֮ǰ£¬ÈÃÎÒÃÇÏÈÀ´¿´¿´×î³£¼ûµÄʹÓÃCSS¾ÓÖÐÔªËØµÄ·½·¨¡£
ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
CSS
ÖÐÊ×Ñ¡µÄÈÃÔªËØË®Æ½¾ÓÖеķ ......

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

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

cssαÀàhover ie6bug£¬½Ò¿ªIE6ÏÂhover²»ÏÔʾԭÒò

:hoverÊÇÎÒÃÇÔÚCSSÉè¼ÆÖÐ×î³£ÔËÓõÄαÀàÖ®Ò»£¬Ðí¶àѤÀöЧ¹ûµÄʵÏÖÀë²»¿ªÎ±Àà:hover£¬±ÈÈçÎÒÃdz£¼ûµÄ´¿CSS²Ëµ¥¡¢Ïà²áЧ¹ûµÈµÈ¡£
»òÐíÓÃÁËÕâô¾ÃµÄαÀà:hover£¬»¹Óв¿·ÖÅóÓÑ»¹²»ÍêÈ«Á˽âhoverµÄ¹æÔò£º
ÔÚCSS1ÖдËαÀà½ö¿ÉÓÃÓÚa¶ÔÏó¡£ÇÒ¶ÔÓÚÎÞhrefÊôÐÔ£¨ÌØÐÔ£©µÄa¶ÔÏ󣬴ËαÀ಻·¢Éú×÷Óá£
ÔÚCSS2ÖдËαÀà¿ÉÒÔÓ¦ÓÃÓÚÈκζÔÏ ......

È«Ãæ¼æÈÝIE6/IE7/IE8/FFµÄCSS HACKд·¨

margin-bottom:40px;       /*ffµÄÊôÐÔ*/
margin-bottom:140px\9;    /* IE6/7/8µÄÊôÐÔ */
color:red\0;              /* IE8Ö§³Ö */
*margin-bottom:450px;     /*IE6/7µÄÊôÐÔ*/ ......

ת:ÓÐÀûÓÚSEOµÄDIV+CSSµÄÃüÃû¹æÔò

ÎÄÕÂת×ÔÓÚ:http://www.pqshow.com/design/Dreamweaver/200912/12674.html
ÓÉÓÚÏîÄ¿ÖбàдÎĵµ½á¹¹¡¢±àдCSSµÄÈËÔ±½Ï¶à£¬²¢Óë³ÌÐòԱЭͬ¹¤×÷£¬ËùÒÔ¾ÍÐèҪͳһ¿ª·¢¹æ·¶£¬¸ù¾ÝXHTMlºÍCSS±àÖ¯µÄ¹æ·¶ºÍ´ó¶àÈ˵Äϰ¹ß£¬ÕûÀíÁËÒÔÏÂÕë¶Ô±¾ÏîÄ¿µÄÒ»¸ö¼òµ¥µÄ¿ª·¢¹æ·¶£º
Ò»¡¢CSSÎļþ¼°ÑùʽÃüÃû
1¡¢CSSÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºgl ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ