ul li css ×öºáÏò²Ëµ¥
ת×Ôhttp://www.w3cn.org/article/tips/2005/105.html
ÎÒÃÇÏÈÀ´¿´Ò»¸ö²Ëµ¥µÄÀý×Ó£¬×îÖÕЧ¹ûÊÇ:
µÚÒ»²½£º½¨Á¢Ò»¸öÎÞÐòÁбí
ÎÒÃÇÏȽ¨Á¢Ò»¸öÎÞÐòÁÐ±í£¬À´½¨Á¢²Ëµ¥µÄ½á¹¹¡£´úÂëÊÇ£º
<ul>
<li><a href="1">Ê×Ò³</a></li>
<li><a href="2">²úÆ·½éÉÜ</a></li>
<li><a href="3">·þÎñ½éÉÜ</a></li>
<li><a href="4">¼¼ÊõÖ§³Ö</a></li>
<li><a href="5">Á¢¿Ì¹ºÂò</a></li>
<li><a href="6">ÁªÏµÎÒÃÇ</a></li>
</ul>
µÚ¶þ²½£ºÒþ²ØliµÄĬÈÏÑùʽ
ÒòΪ¿´ÆðÀ´²»ÊǺܺÿ´£¬²Ëµ¥Í¨³£¶¼²»ÐèÒªliĬÈϵÄÔ²µã£¬ÎÒÃǸøUL¶¨ÒåÒ»¸öÑùʽÀ´Ïû³ýÕâЩԲµã¡£
µ±È»£¬ÎªÁ˸üºÃµÄ¿ØÖÆÕû¸ö²Ëµ¥£¬ÎÒÃǰѲ˵¥·ÅÔÚÒ»¸ödivÀï¡£Ò³Ãæ´úÂë±ä³É£º
<div class="test"> <ul>
<li><a href="1">Ê×Ò³</a></li>
<li><a href="2">²úÆ·½éÉÜ</a></li>
<li><a href="3">·þÎñ½éÉÜ</a></li>
<li><a href="4">¼¼ÊõÖ§³Ö</a></li>
<li><a href="5">Á¢¿Ì¹ºÂò</a></li>
<li><a href="6">ÁªÏµÎÒÃÇ</a></li>
</ul> </div>
CSS¶¨ÒåΪ£º
.test ul{list-style:none;}
˵Ã÷£º“.test ul”±íʾÎÒÒª¶¨ÒåµÄÑùʽ½«×÷ÓÃÔÚtestµÄ²ãÀïµÄul±êÇ©ÉÏ¡£
ÏÖÔÚµÄЧ¹ûÊÇûÓÐÔ²µãÁË£º
µÚÈý²½£º¹Ø¼üµÄ¸¡¶¯
ÕâÀïÊDz˵¥±ä³ÉºáÏòµÄ¹Ø¼ü£¬ÎÒÃǸøliÔªËØ¼ÓÉÏÒ»¸ö“float:left;”ÊôÐÔ£¬ÈÃÿ¸öli¸¡¶¯ÔÚÇ°ÃæÒ»¸öliµÄ×óÃæ¡£
CSS¶¨ÒåΪ£º
.test li{float:left;}
²Ëµ¥±äºáÏòÁË¡£¾ÍÕâô¼òµ¥£¡ÏÂÃæÐèÒª×öµÄ¾ÍÊÇÓÅ»¯Ï¸½ÚÁË¡£
µÚËIJ½£ºµ÷Õû¿í¶È
²Ëµ¥¶¼¼·ÔÚÒ»Æð²»ºÃ¿´Ôõô°ì£¿ÎÒÃÇÀ´µ÷½ÚliµÄ¿í¶È¡£
ÔÚCSSÖÐÌí¼Ó¶¨Òåwidth:100pxÖ¸¶¨Ò»¸öliµÄ¿í¶ÈÊÇ100px£¬µ±È»Äã¿ÉÒÔ¸ù¾ÝÄãµÄÐèÒªµ÷ÕûÊýÖµ£º
.test li{float:left;width:100px;}
Ч¹ûÊÇ£º
Èç¹ûÎÒÃÇͬʱ¶¨ÒåÍâÃædivµÄ¿í¶È£¬li¾Í»á¸ù¾ÝdivµÄ¿í¶È×Ô¶¯»»ÐУ¬ÀýÈ綨ÒåÁËdiv¿í350px£¬6¸öliµÄ×Ü¿í¶ÈÊÇ600px£¬Ò»ÐÐÅŲ»Ï¾Í×Ô¶¯±ä³ÉÁ½ÐУº
.test{width:350px;}
µÚÎå²½£ºÉèÖûù±¾Á´½ÓЧ¹û
½ÓÏÂÀ´£¬ÎÒÃÇͨ¹ýCSSÀ´ÉèÖÃÁ´½ÓµÄÑùʽ£¬·Ö±ð¶¨Òå:link¡¢:visited¡¢:hoverµÄ״̬
.test a:link{color:#6
Ïà¹ØÎĵµ£º
1. ÔÚFireFoxÏ£¬µ¼º½À¸¾ÓÖУ¬µ«Ö÷ÌåÄÚÈÝÀ¸È´ÊÇ×ó¶ÔÆë¡£
ÔÚdivÀïµÄÄÚÈÝ£¬IEĬÈÏΪcenter£¬¶øFireFoxĬÈÏΪleft¡£Èç¹ûÏëÒªÈÃÆä¾ÓÖУ¬¸ÕÐèÒªÔÚCSSÖÐÌí¼Ó£º
margin-left: auto; margin-right: auto;
ÕâÑù¾ÍÊǸæËßFireFox£¬×óÓÒÒ»Ö£¬ÊµÏÖ¾ÓÖС££¨¾Ý˵£¬Õâ²»ÊÇÍòÄܵġ£µ«Î񵀮¤·ô¾ÓÖÐÁË¡££©
2. ÔÚFireFoxÏ£¬ÓÐЩЧ¹û²»Äܼæ ......
·½·¨Ò»£º
¿çä¯ÀÀÆ÷µÄÍøÒ³Éè¼ÆÒ»Ö±ÊÇÈÃÈ˺ÜÍ·ÌÛµÄÎÊÌ⣬Õâ²»Ö»ÊÇÒòΪä¯ÀÀÆ÷µÄ°æ±¾Öڶ࣬»¹ÓÐÒ»¸öÖØÒªµÄÔÒòÊÇÏàͬä¯ÀÀÆ÷µÄ²»Í¬Ê±ÆÚµÄ°æ±¾Ò²»áÓвîÒ죬
ÉõÖÁÊÇÔÚ²»Í¬²Ù×÷̨ͬÉÏ»¹»áÓв»Í¬¡£Òò´ËʹCSS hack¼¼Êõ½øÐÐä¯ÀÀÆ÷Çø·ÖÊÇʵÏÖ¿çä¯ÀÀÆ÷·ÃÎÊÒ»¸öºÃ·½·¨¡£CSS
Hack¼¼ÊõÓкܶ࣬¾ßÌå¿ÉÒԲ鿴£º
± ......
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px
µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö±ÔÚÓÃÕâ¸ö¡£ border:0;
Ö»ÊǶ¨Òå±ß¿ò¿í¶ÈΪÁ㣬µ«±ß¿òÑùʽ¡¢ÑÕÉ«»¹Êǻᱻä¯ÀÀÆ÷½âÎö£¬Õ¼ÓÃ×Ê ......