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

cssÔ²½Çbox±¸Íü

cssÔ²½Çbox±¸Íü <style type="text/css">
div.box{}
div.boxtitle{background-color:#888; height:24px; line-height:24px; vertical-align:middle; padding-left:10px;}
div.boxcontent{ padding:10px; border:1px #888 solid;}
b.r   {display:block;background: #fff}
b.r b {display:block;height: 1px;overflow: hidden; background: #888;}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.r b.r4{margin: 0 1px;height: 2px}
</style> <div class="box">
  <b class="r"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  <div class="boxtitle">±êÌâHello</div>
  <div class="boxcontent">
    <ul>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
      <li>eee</li>
      <li>fff</li>
      <li>ggg</li>
    </ul>
  </div>
</div>


Ïà¹ØÎĵµ£º

ÈçºÎÈÃCSSʵÏÖ¶àÓÎÀÀÆ÷¼æÈÝ

http://www.cnblogs.com/rubylouvre/archive/2009/08/10/1542476.html
˵ÊÇʵÏÖ¼æÈÝ£¬ÆäʵҲֻ²»¹ýΪÁËÕÕ¹ËIE6ÓëIE7£¬Æäʵ²»Ö§³Ö±ê×¼µÄ¶ÔÊÖÔç¾ÍÑÌ·É»ÒÃ𣬶øÏñfirefox£¬Opera£¬SafariµÈ¸üл»´úÌ«¿ì£¬¾ÍËãÓÐÎÊÌâºÜ¿ì¾Í±»¹Ù·½´¦Àí¡£Òò´ËÕâÆª²©ÎÄ´ó¼Ò×îºÃÔÚIE6ÖÐä¯ÀÀ£¬ÀïÃæ¿ÉÔËÐеÄÀý×Ó¶¼ÊÇΪIE6×¼±¸µÄ¡£
Ñ¡ÔñÆ÷
ͨÅä·û * ......

CSSÖÐpositionµÄabsoluteºÍrelativeµÄÓ¦ÓÃ

positionÊôÐÔÆäʵÊÇÖ¸±¾Ìå¶ÔÉϼ¶µÄ¶¨Î»¡£Èç¹ûÕâôÀí½â£¬¾ÍºÃ°ìÁË¡£
ĬÈϵÄÊôÐÔÖµ¶¼ÊÇstatic£¬¾²Ì¬¡£¾Í²»Óöà˵ÁË¡£×î¹Ø¼üµÄÊÇ
relative£¨Ïà¶Ô£©ÒÔ¼°absolute£¨¾ø¶Ô£©¡£
ÍùÍùÎÒÃÇÈç¹ûÊÇCOPY±ðÈ˵ĴúÂ룬»á°ÑabsoluteÊôÐÔÓëleft¡¢topÅäºÏÆðÀ´ÖÆ×÷Ïà¹ØµÄ“Ðü¸¡²ã”Ч¹û¡£È»¶øÓÐʱºòÎÒÃÇÐèÒªÕë¶Ôijһ¸öÈÝÆ÷µÄÐü¸¡Ð ......

×îÈ«µÄCSSä¯ÀÀÆ÷¼æÈÝÎÊÌâ

CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔ­Àí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû. 
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ......

IEÓëFirefoxµÄCSS¼æÈÝ´óÈ«

»¹Ëã²»´íµÄÎÄÕ£¬ËäÈ»ÌõÀíÐÔ²»ÊǷdz£Çå³þ£¬Ò²×ªÌùÊÕÁ˰ɣ¬·½±ã²é×ÊÁÏ¡£
    CSS¶Ôä¯ÀÀÆ÷Æ÷µÄ¼æÈÝÐÔ¾ßÓкܸߵļÛÖµ£¬Í¨³£Çé¿öÏÂIEºÍFirefox´æÔںܴóµÄ½âÎö²îÒ죬ÕâÀï½éÉÜһϼæÈÝÒªµã¡£
¡¡¡¡³£¼û¼æÈÝÎÊÌ⣺
¡¡¡¡1.DOCTYPE Ó°Ïì CSS
´¦Àí
¡¡¡¡2.FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ­ ......

cssµÄαÀà

<html>
<head>
<title>CSSαÀà pseudo-class</title>
<style type="text/css">
a:link {color: #FF0000}     /* δ±»·ÃÎʵÄÁ´½Ó ºìÉ« */
a:visited {color: #00FF00}  /* Òѱ»·ÃÎʹýµÄÁ´½Ó ÂÌÉ« */
a:hover {color: #FFCC00}   /* Êó±êÐü¸¡ÔÚÉϵÄÁ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ