CSSÖв»Í¬ä¯ÀÀÆ÷µÄ¼æÈÝÐÔÎÊÌ⣨ËѼ¯µ½µÄ£©
Ëæ×Å×îÐÂCSSµÄ²»¶ÏÍêÉÆ£¬Ô½À´Ô½¶àµÄÍøÕ¾²ÉÓÃDIV+CSS²¼¾Ö¡£¶øÔÀ´Ê¹ÓÃtableÌ×tableµÄÍøÒ³²¼¾ÖģʽҲÖð½¥Ó¦¸ÃÌÔÌÁË¡£ÓÉÓÚĿǰIE6²»ÄÜÖ§³ÖÓÐЩ±ê×¼µÄCSS£¬ÐèÒªÓÃ΢ÈíÌØÓеÄCSSÀ´ÐÞ¸´ÕâЩBUG.¶øÇÒÏÖÔÚËæ×Åä¯ÀÀÆ÷²ã³ö²»ÇҪÊÇÒ³ÃæÄܹ»ÊÊÓ¦¾¡Á¿¶àµÄä¯ÀÀÆ÷³ÉΪһ¸ö¿ÎÌâ¡£ µ«ÊÇËæ×ÅCSS±ê×¼µÄ½øÒ»²½ÍêÉÆ£¬ä¯ÀÀÆ÷½«×îÖÕ¶¼»á×ñÑÕâ¸ö±ê×¼£¬µ½Ê±ºòдDIV+CSS²¼¾ÖµÄÒ³Ãæ¾Í²»ÄÇôÂé·³ÁË¡£
µ«ÊÇÏÖÔÚ£¬ÎÒÃÇ»¹ÊÇÐèÒª´¦ÀíCSSÔÚ²»Í¬ä¯ÀÀÆ÷ϵļæÈÝÐÔ¡£Ò»ÏÂÊÇÒ»¸öÍøÓÑдµÄCSS¼æÈݼ¼ÇÉ£¬ÖµµÃ´ó¼Ò²Î¿¼¡£
CSS¼æÈݼ¼ÇÉ
¡¡¡¡1, FFϸø div ÉèÖà padding ºó»áµ¼Ö width ºÍ height Ôö¼Ó, µ«IE²»»á.
¿ÉÓÃ!important½â¾ö
¡¡¡¡2, ¾ÓÖÐÎÊÌâ.
¡¡¡¡ 1).´¹Ö±¾ÓÖÐ.½« line-height ÉèÖÃΪ µ±Ç° div ÏàͬµÄ¸ß¶È, ÔÙͨ¹ý vertical-align: middle.( ×¢ÒâÄÚÈݲ»Òª»»ÐÐ.)
¡¡¡¡ 2).ˮƽ¾ÓÖÐ. margin: 0 auto;(µ±È»²»ÊÇÍòÄÜ)
¡¡¡¡3, ÈôÐè¸ø a ±êÇ©ÄÚÄÚÈݼÓÉÏÑùʽ, ÐèÒªÉèÖà display: block;(³£¼ûÓÚµ¼º½±êÇ©)
¡¡¡¡4, FF ºÍ IE ¶Ô BOX Àí½âµÄ²îÒìµ¼ÖÂÏà²î 2px µÄ»¹ÓÐÉèΪ floatµÄdivÔÚieÏ margin¼Ó±¶µÈÎÊÌâ.
¡¡¡¡5, ul ±êÇ©ÔÚ FF ÏÂÃæÄ¬ÈÏÓÐ list-style ºÍ padding . ×îºÃÊÂÏÈÉùÃ÷, ÒÔ±ÜÃâ²»±ØÒªµÄÂé·³. (³£¼ûÓÚµ¼º½±êÇ©ºÍÄÚÈÝÁбí)
¡¡¡¡6, ×÷ΪÍⲿ wrapper µÄ div ²»Òª¶¨ËÀ¸ß¶È, ×îºÃ»¹¼ÓÉÏ overflow: hidden.ÒÔ´ïµ½¸ß¶È×ÔÊÊÓ¦.
¡¡¡¡7, ¹ØÓÚÊÖÐιâ±ê. cursor: pointer. ¶øhand Ö»ÊÊÓÃÓÚ IE.
Õë¶Ôfirefox ie6 ie7µÄcssÑùʽ
¡¡¡¡ÏÖÔڴ󲿷ֶ¼ÊÇÓÃ!importantÀ´hack£¬¶ÔÓÚie6ºÍfirefox²âÊÔ¿ÉÒÔÕý³£ÏÔʾ£¬
¡¡¡¡µ«ÊÇie7¶Ô!important¿ÉÒÔÕýÈ·½âÊÍ£¬»áµ¼ÖÂÒ³ÃæÃ»°´ÒªÇóÏÔʾ!ÕÒµ½Ò»¸öÕë
¡¡¡¡¶ÔIE7²»´íµÄhack·½Ê½¾ÍÊÇʹÓÓ*+html”£¬ÏÖÔÚÓÃIE7ä¯ÀÀһϣ¬Ó¦¸ÃûÓÐÎÊÌâÁË¡£
¡¡¡¡ÏÖÔÚдһ¸öCSS¿ÉÒÔÕâÑù£º
¡¡¡¡#1 { color: #333; } /* Moz */
¡¡¡¡* html #1 { color: #666; } /* IE6 */
¡¡¡¡*+html #1 { color: #999; } /* IE7 */
¡¡¡¡ÄÇôÔÚfirefoxÏÂ×ÖÌåÑÕÉ«ÏÔʾΪ#333£¬IE6ÏÂ×ÖÌåÑÕÉ«ÏÔʾΪ#666£¬IE7ÏÂ×ÖÌåÑÕÉ«ÏÔʾΪ#999¡£
css²¼¾ÖÖеľÓÖÐÎÊÌâ
¡¡¡¡Ö÷ÒªµÄÑùʽ¶¨ÒåÈçÏ£º
¡¡¡¡body {TEXT-ALIGN: center;}
¡¡¡¡#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
¡¡¡¡ËµÃ÷£º
¡¡¡¡Ê×ÏÈÔÚ¸¸¼¶ÔªËض¨ÒåTEXT-ALIGN: center;Õâ¸öµÄÒâ˼¾ÍÊÇÔÚ¸¸¼¶ÔªËØÄÚµÄÄÚÈݾÓÖÐ;¶ÔÓÚIEÕâÑùÉ
Ïà¹ØÎĵµ£º
¡¡div cssÍøÕ¾²¼¾ÖµÄ°Ë¸öС¼¼ÇÉ
¡¡¡¡1.ÈôÓÐÒÉÎÊÁ¢¼´¼ì²â
¡¡
¡¡ÔÚ³ö´íʱÈôÄܶÔÔʼ´úÂë×ö¼òµ¥¼ì²â¿ÉÒÔʡȥºÜ¶àÍ·Í´ÎÊÌâ¡£W3C¶ÔÓÚXHTMLÓëCSS ¶¼Óмì²â¹¤¾ß¿ÉÓã¬Çë
¼û http://validator.w3.org ¡£Çë×¢Ò⣬ÔÚÎļþ¿ªÍ·µÄ´íÎ󣬿ÉÄÜÒòΪ²»µ±µÄ½á¹¹µÈÒòËØÔì³É¸ü¶à´íÎó£»ÎÒÃǽ¨ÒéÏÈÐÞÕýһЩ×îÃ÷Ï﵀ ......
1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
2. ¼ì²éCSSÊÇ·ñÕýÈ·
¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
3. È·¶¨´íÎó·¢ ......
jsÒªÇó£ºÎªÊ¹ÏµÍ³ÄÜÔÚIEºÍFFÏÂÕý³£ÔËÐУ¬²»ÒªÊ¹ÓÃÔÉú̬µÄjavascript£¬½¨ÒéʹÓÃjsµÄ¿â£¨È磺jquery£©
²¢ÇÒÒªÇóÓÃjqueryÖУ¬»ñÈ¡¶ÔÏóµÄÊôÐÔʹÓÃ$obj.attr("attrName"),²»ÒªÊ¹ÓÃobj.attrName,·ÀÖ¹×Ô¶¨ÒåµÄÊôÐÔÔÚFFÖв»ÄÜÕý³£ÔËÐÐ
1¡¢ÎÊÌ⣺<span></span>ÔÚFFÏÂÔË ......
1. ¶¨ÒåÑùʽ
1.1 °´html±êÇ©¶¨Òå
ÀýÈ磺body{background-color:#999999; text-align:center}
1.2 °´ÀඨÒå
ÀýÈ磺.style1{border-style:solid; border-color:#0000FF; border-width:1px}
1.3 °´id¶¨Òå
ÀýÈ磺#style2{border-style:solid; border-color:#FF0000; border-width:1px}
2. CSSµÄλÖúÍÒýÓÃ
......
1¡¢CSSµÄÓï·¨ÊÇÕâÑùµÄ£ºselector {property: value}
selector-Ñ¡ÔñÆ÷£¨±ÈÈçbody¡¢div¡¢h2……£©
property-ÊôÐÔ £¨±ÈÈçbackground-color¡¢hidden¡¢text-align……£©
value-Öµ£¨±ÈÈçyellow¡¢blue¡¢12px¡¢center……£©
[×¢]£º
a¡¢³ýidÍâ´óСд²»Ãô¸Ð
b¡¢value´æÔÚ¶à¸öµ¥´Êʱ£¬ÒªÓÃÒ ......