Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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 Ñùʽ ±ß¿ò´óС cssʹÓÃjs

* {
 margin:0;
 padding:0;
 font-size:13px;
 *font-size:11px;
 font-family:Verdana, Arial, ËÎÌå,Helvetica, sans-serif;
 /*scrollbar-face-color:#dff9fe;
 scrollbar-highlight-color:#FFFFFF;
 scrollbar-3dlight-color:#9adae7;
 scrollbar-darkshadow-co ......

ͼƬÎÞ·ì¹ö¶¯´úÂë(DIV+CSS+JavaScript)

<div id="imgbox" style="height:110px;width:600px;overflow:hidden;">
<div id="imgbox1" style="float:left;width:1000%">
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">
<img src="http://www ......

CSSÖеÄcursorÓ÷¨

CSSÖеĹâ±êÀàÐÍ
Óï·¨£º
¡¡¡¡cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )
¡¡¡¡È¡Öµ£º
auto
:¡¡
ĬÈÏÖµ¡£ä¯ÀÀÆ÷¸ù¾Ýµ±Ç°Çé¿ö×Ô¶¯È·¶¨Êó±ê¹â±êÀàÐÍ¡£
......

CSS ͸Ã÷¶È´ó»ã×Ü


¡¡¡¡½üÄêÀ´£¬CSS²»Í¸Ã÷ËãµÃÉÏÊÇÒ»ÖÖÏ൱Á÷Ðеļ¼Êõ£¬µ«ÔÚ¿çä¯ÀÀÆ÷Ö§³ÖÉÏ£¬¶ÔÓÚ¿ª·¢ÕßÀ´Ëµ£¬¿ÉÒÔ˵ÊÇÒ»¼þÁîÈËÍ·ÌÛµÄÊÂÇ顣Ŀǰ»¹Ã»ÓÐÒ»¸öͨÓ÷½·¨£¬ÒÔÈ·±£Í¸Ã÷¶ÈÉèÖÿÉÒÔÔÚĿǰʹÓõÄËùÓÐä¯ÀÀÆ÷ÉÏÓÐЧ¡£
¡¡¡¡ÕâÆª»ã×ÜÖ÷ÒªÊÇÌṩһЩCSS²»Í¸Ã÷µÄÏêϸ½éÉÜ£¬´úÂëʾÀýºÍ½âÊÍ£¬ÒÔʵÏÖÕâÏîÓÐÓõÄCSS¼¼ÊõÔÚÄúµÄÏîÄ¿ÖмæÈÝËùÓÐä¯À ......

js ÐÞ¸ÄCSSÎļþÖеÄÑùʽ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT=""& ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ