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µ±×ö×îС¿í¶ÈÀ´Ê¹¡£ÎªÁËÈÃÕâÒ»ÃüÁî
Ïà¹ØÎĵµ£º
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ѧϰÕߴӵ͵½¸ß·ÖΪÁù¸öµÈ¼¶.¿ìÀ´¿´¿´ÄãÊÇÔÚÄĸöµÈ¼¶.
¡¡¡¡µÚ0¼¶£ºCSS£¿Ê²Ã´CSS,ÊDz»ÊÇCS°¡.ÄÇÓÎÏ·ÎÒÍæ¹ýѽ.ÊǸö¶àÈËÓÎ ......
CSS(Cascading Style Sheets)²ãµþÑùʽ±í×÷ÓÃÊǽ«ÍøÒ³ÄÚÈݺÍÏÔʾÑùʽ½øÐзÖÀ룬Ìá¸ßÁËÏÔʾ¹¦ÄÜ¡£
CSS´úÂë¸ñʽ£º
Ñ¡ÔñÆ÷Ãû³Æ { ÊôÐÔÃû£ºÊôÐÔÖµ£»ÊôÐÔÃû£ºÊôÐÔÖµ£»……}
Ñ¡ÔñÆ÷£¨¶Ô²»Í¬µÄHTML±êÇ©½øÐпØÖÆ£¬²¢¸³Óè¸÷ÖÖÑùʽÉùÃ÷£¬¼´¿ÉʵÏÖ¸÷ÖÖЧ¹û£©£º
±êÇ©Ñ ......
×î½üÔÚÍøÉÏÕÒµ½Á˼¸¿îCSSÔÚÏßÓÅ»¯Æ÷£¬×Ô¼ºÊÔÁËÊÔ£¬·ÅÉÏÀ´¸ú´ó¼Ò·ÖÏíһϡ£
1. Online CSS Optimizer /ÔÚÏßCSSÓÅ»¯
¸ÃÔÚÏß¹¤¾ßÓÃÓÚ¾«¼òºÍѹËõÑùʽ±íµÄÎļþ´óС£¬ÓÅ»¯ºóµÄ´úÂ뽫ÍêÈ«ÊÇ»ìÂҵģ¬Ö§³ÖÊäÈëURL£¬Ìá½»ÎļþºÍÖ±½ÓÊäÈë½øÐÐѹËõ¡£
2. CSS Compressor/CSSѹËõ
×÷ÓÃͬÉÏ£¬µ«Õâ¸ö¹¤¾ßÓµÓзdz£ÏêϸµÄѹËõÑ¡ÏËü°üº¬» ......
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 ......