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ÕâÑùÉ
Ïà¹ØÎĵµ£º
½éÓÚ´¿´âCSSµÄÎÞͼƬԲ½ÇʵÔÚÊÇ´úÂëÌ«ÂÒ£¬»¹ÊÇÇãÏòÓÚÀûÓÃͼƬ½áºÏCSSÀ´×Ô×öÔ²½Ç£»
£¨1£©¸ß¿í½Ô×ÔÊÊÓ¦£º
.roundedcornr_box_510746 {
background: #dddddd url(roundedcornr_510746_grad.gif) repeat top left;width:300px;
}
.roundedcornr_top_510746 div {
background:transparent url(r ......
cssÔ²½Çbox(°Ù¶ÈÖªµÀÍÚ³ö) 1.css .zhidao_box {
position: relative;
width: 100%;
}
.zhidao_box .rg_1, .zhidao_box .rg_2, .zhidao_box .rg_3 {
height: 1px;
font-size: 0px;
ov ......
Í·£ºheader
¡¡¡¡ÄÚÈÝ£ºcontent/container
¡¡¡¡Î²£ºfooter
¡¡¡¡µ¼º½£ºnav
¡¡¡¡²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn
¡¡¡¡Ò³ÃæÍâΧ¿ØÖÆÕûÌå²¼¾Ö¿í¶È£ºwrapper
¡¡¡¡×óÓÒÖУºleft right center
¡¡¡¡µÇ¼Ìõ£ºloginbar
¡¡¡¡±êÖ¾£ºlogo
¡¡¡¡¹ã¸æ£ºbanner
¡¡¡¡Ò³ÃæÖ÷Ì壺main
¡¡¡¡Èȵ㣺hot
¡¡¡¡ÐÂÎÅ£ºnews
¡¡¡¡ÏÂÔØ£ºdown ......
20 ¸ö¾µäµÄ Ajax + CSS ±í¸ñ
²¢²»ÊÇËùÓеÄWeb ¿ª·¢Õß¶¼»á¶ÔÃÀ»¯±í¸ñÊý¾Ý¸ÐÐËȤ£¬½ñÌìÎÒÃÇÊÕ¼¯ÁË20 ¸ö¹¦ÄÜÇ¿´ó£¬Íâ¹ÛƯÁÁµÄ»ùÓÚAjax + CSS µÄ±í¸ñЧ¹û£¬Äã¿ÉÒÔ´ÓÕâЩʾÀýÖÐѧϰÔõôʹÓÃÕâЩ±í¸ñÌṩµÄÅÅÐòºÍ¹ýÂ˵ŦÄÜÀ´×éÖ¯±í¸ñÖеÄÊý¾Ý¡£
ÏÖÔÚÈÃÎÒÃÇÀ´¿´¿´ÕâЩ±í¸ñ£º£¨µã»÷ÿ¸öÑùÊ½Ç°ÃæµÄÁ´½Ó¼´¿É½øÈëÏÂÔØ£©
¡¡¡¡#1. ......
Css´úÂë
1.line-height:24px;
line-height:24px;
ʹÓù̶¨¿í¶ÈµÄÈÝÆ÷²¢ÇÒÐèÒªÒ»Ðд¹Ö±¾ÓÖÐʱ£¬Ê¹Óà line-height ¼´¿É£¨¸ß¶ÈÓ븸²ãÈÝÆ÷Ò»Ö£©£¬¸ü¶àµÄ´¹Ö±¾ÓÖÐ×ܽá¿ÉÒÔ¿´ÕâÀï¡£
Çå³ýÈÝÆ÷¸¡¶¯
Css´úÂë
1.#main {
2. overflow:hidden;
3.}
#ma ......