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

div cssÍøÕ¾²¼¾ÖµÄ°Ë¸öС¼¼ÇÉ

¡¡div cssÍøÕ¾²¼¾ÖµÄ°Ë¸öС¼¼ÇÉ 
¡¡¡¡1.ÈôÓÐÒÉÎÊÁ¢¼´¼ì²â
¡¡
¡¡ÔÚ³ö´íʱÈôÄܶÔԭʼ´úÂë×ö¼òµ¥¼ì²â¿ÉÒÔʡȥºÜ¶àÍ·Í´ÎÊÌâ¡£W3C¶ÔÓÚXHTMLÓëCSS ¶¼Óмì²â¹¤¾ß¿ÉÓã¬Çë
¼û http://validator.w3.org ¡£Çë×¢Ò⣬ÔÚÎļþ¿ªÍ·µÄ´íÎ󣬿ÉÄÜÒòΪ²»µ±µÄ½á¹¹µÈÒòËØÔì³É¸ü¶à´íÎó£»ÎÒÃǽ¨ÒéÏÈÐÞÕýһЩ×îÃ÷ÏÔµÄ
´íÎóÖ®ºóÖØÐ¼ì²â£¬ÕâÑùÒ²Ðí»áÈôíÎóÊýÁ¿±¬¼õ¡£
¡¡¡¡2.ʹÓø¡¶¯¹¦ÄÜʱ¼ÇµÃÊʵ±Çå³ýÖ¸Áî 
¡¡¡¡¸¡¶¯ÊǸöΣÏյŦÄÜ£¬Î´±Ø»á²úÉúÄúËùÆÚÍûµÄ½á¹û¡£Èç¹ûÄúÓöµ½¸¡¶¯ÔªËØÑÓÉìµ½ÍâΧÈÝÆ÷µÄ±ß¿ò»òÕ߯äËû²»Õý³£Çé¿ö£¬ÇëÏÈÈ·¶¨ÄúµÄ×ö·¨ÊÇÕýÈ·µÄ¡£Çë²ÎÔÄ52CSS.comÍøÕ¾ÉϵĽÌѧ¡£
¡¡¡¡3.±ß½çÖØºÏʱÀûÓÃpadding»òborderÀ´±ÜÃâ
¡¡¡¡Äú¿ÉÄÜ»áΪÁËÒ»µã²»Ó¦¸Ã³öÏÖµÄ¿Õ¼ä¶ø½¹Í·Àö»òÕßÄúÐèÒªÒ»µãµã¿Õ¼äʱ£¬ÔõÑù¶¼¼·²»³öÀ´¡£Èç¹ûÄúÓÐÓõ½margin£¬ÄÇôºÜÈÝÒײúÉú±ß½çµÄÖØºÏ¡£
¡¡¡¡4.³¢ÊÔ±ÜÃâͬʱ¶ÔÔªËØÖ¸¶¨padding/borderÒÔ¼°¸ß¶È»ò¿í¶È
¡¡¡¡Windows°æIE¾­³£µ¼ÖÂwidthÓëheightµÄ¼ÆËãÎÊÌâ¡£ÓÐЩ·½·¨¿ÉÒÔ½â¾ö´ËÎÊÌ⣬µ«Èç¹ûÄ¸ÔªËØÐèÒªÖ¸¶¨¸ß¶ÈÓë¿í¶Èʱ£¬×îºÃÄܹ»ÔÚÄ¸ÔªËØÖ®ÄÚµÄ×ÓÔªËØÌ×ÓÃmargin,»òÕßµ±×ÓÔªËØÐèÒªÖ¸¶¨¸ß¶ÈÓë¿í¶Èʱ£¬ÔÚÄ¸ÔªËØÌ×ÓÃpaddingÒÔ´ïЧ¹û¡£
¡¡¡¡5.²»ÒªÒÀÀµmin-width/min-height
¡¡¡¡Windows°æIE²¢²»Ö§Ô®Á½ÖÖÓï·¨¡£µ«ÊÇÔÚijÖ̶ֳÈÏ£¬windows°æIE¿ÉÒÔ´ïµ½Ï൱ÓÚmin-width/min-heightµÄЧ¹û£¬ËùÒÔÖ»Òª¶ÔIE×öµã¹ýÂ˹¦ÄÜ£¬¼´¿É´ïµ½ÄúÏëÒªµÄ½á¹û¡£
¡¡¡¡6.ÈôÓÐÒÉÎÊ£¬ÏȼõÉٰٷֱÈ
¡¡¡¡ÓÐʱºòijЩ´íÎó»áʹ50%+50%³ÉΪ100.1%£¬Ê¹ÍøÒ³³öÏÖÎÊÌâ¡£ÕâʱÇë³¢ÊÔ½«ÕâЩֵ¸ÄΪ49%£¬ÉõÖÁ49.9%¡£
¡¡¡¡7.¼Çס“TRBL”д·¨
¡¡
¡¡border£¬marginÓëpaddingµÄ¼òдÓï·¨ÓÐÌØ¶¨Ë³Ðò£¬´ÓÉÏ·½¿ªÊ¼Ë³Ê±Õë·½Ïòת¶¯£ºtop,right,bottom,left. ËùÒÔ
margin:0 1px 3px 5px;µÄ½á¹ûÊÇÉÏ·½Îޱ߽磬ÓÒ±ß1ÏñËØ£¬ÒÔ´ËÀàÍÆ¡£¼Çס“TRBL”£¬Äú¾Í²»»áŪ´í´ÎÐòÁË¡£
¡¡¡¡8.Ö»Òª²»ÊÇÁãµÄÖµ£¬¶¼ÒªÖ¸¶¨µ¥Î»
¡¡¡¡CSSÐèÒªÄú¶Ôÿ¸öfont£¬marginµÈ¸÷ÖÖÖµÖ¸¶¨µ¥Î»¡£


Ïà¹ØÎĵµ£º

JavaScript CSS StyleÊôÐÔ¶ÔÕÕ±í


JavaScript CSS StyleÊôÐÔ¶ÔÕÕ±í
ÎÄÕÂÀ´Ô´£ºhttp://www.phplamp.org/2008/10/jsavscript-js-css-style/
ΪÁ˴ﵽijÖÖÌØÊâµÄЧ¹ûÎÒÃÇÐèÒªÓÃJavascript¶¯Ì¬µÄÈ¥¸ü¸Äijһ¸ö±êÇ©µÄCssÊôÐÔ¡£±ÈÈ磺Êó±ê¾­¹ýÒ»¸öͼƬʱÎÒÃÇÈÃͼƬ¼ÓÒ»¸ö±ß¿ò£¬´úÂë¿ÉÄÜÊÇÕâÑù£º
JavaScript´úÂë
<script type="text/javascript"> & ......

10¸ö·Ç³£ÓÐÓõÄCSS¼¼ÇÉ


1. ½«ÍøÒ³»òÔªËØ¾ÓÖР      
      
    
HTML£º
<div class="wrap">  
</div><!-- end wrap -->  
CSS£º
.wrap { width:960px; margin:0 auto;}   ......

css div Êó±ê¾­¹ýʱͼƬ±ä´ó

<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......

´«ÖDz¥¿Í——cssϸ½Ú

Ò»£ºcssµÄ¸ÅÄî
    CSSÊDzãµþÑùʽ±í£¨Cascading Style Sheets£©ÓÃÀ´¶¨ÒåÍøÒ³µÄÏÖʵЧ¹û¡£¿ÉÒÔ½â¾öhtml´úÂë¶ÔÑùʽ¶¨ÒåµÄÖØ¸´£¬Ìá¸ßÁ˺óÆÚÑùʽ´úÂëµÄ¿Éά»¤ÐÔ£¬²¢ÔöÇ¿ÁËÍøÒ³µÄÏÖʵЧ¹û¹¦ÄÜ¡£¼òµ¥Ò»¾ä»°£ºCSS½«ÍøÒ³ÄÚÈݺÍÏÔʾÑùʽ½øÐзÖÀ룬Ìá¸ßÁËÏÔʾ¹¦ÄÜ¡£
¶þ£ºcssµÄÓŵã
    Ñùʽ±í¶¨ÒåÈç ......

ÌÔ±¦css×¢½â

ÎÒÃǰÑËü·ÖΪÈçÏÂͼËùʾ¿é
¾ßÌåµÄHTML,DIV+CSSÅŰæÑùʽΪ
ÎÒÃÇÒ»ÐÐÒ»ÐзÖÎö,
1.È«²¿µÄ´úÂë¾ùÔÚÒ»¸öDIVÈÝÆ÷(ÎÒÔÝʱÕâÑù³Æºô) HeadÀïÃæ,ÎÒÃÇÀ´¿´¿´HeadµÄд·¨
#Head{
    text-align:center;
}
ΪʲôHeadÇ°ÃæÓÐÒ»¸ö"#"ºÅÄØ?
¶øÓеÄÈ´ÊÇÔÚÇ°Ãæ¼ÓÒ»¸ö"£®"±ÈÈç "£®Head",ÓÐʱºòдcssµÄʱºò¸É´àʲôҲ²»¼ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ