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

DIV CSSÉè¼ÆÊ±IE6/IE7/FF ¼æÈÝÐÔÎÊÌâ½â¾öƪ

ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌâ£¬ÌØ±ðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍø£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7 FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÂÒ¿ÉÄܳöÈ¥²»Ïë³öÏÖµÄЧ¹û£¡
ËùÓÐä¯ÀÀÆ÷ ͨÓÃ
height: 100px;
IE6 רÓÃ
_height: 100px;
IE6 רÓÃ
*height: 100px;
IE7 רÓÃ
*+height: 100px;
IE7¡¢FF ¹²ÓÃ
height: 100px !important;
Ò»¡¢CSS ¼æÈÝ
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓмæÈÝ.
1, !important (²»ÊǺÜÍÆ¼ö£¬ÓÃÏÂÃæµÄÒ»Öָоõ×ȫ)
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄ¼æÈÝ.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáǰ.)
´úÂë:
<style>
#wrapper {
width: 100px!important;
width: 80px;
}
</style>
2, IE6/IE77¶ÔFireFox <from Õë¶Ôfirefox ie6 ie7µÄcssÑùʽ>
*+html Óë *html ÊÇIEÌØÓеıêÇ©, firefox Ôݲ»Ö§³Ö.¶ø*+html ÓÖΪ IE7ÌØÓбêÇ©.
´úÂë:
<style>
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
</style>
×¢Òâ:
*+html ¶ÔIE7µÄ¼æÈݱØÐë±£Ö¤HTML¶¥²¿ÓÐÈçÏÂÉùÃ÷£º
´úÂë:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"¡¡"http://www.w3.org/TR/html4/loose.dtd">
¶þ¡¢ÍòÄÜ float ±ÕºÏ(·Ç³£ÖØÒª!) ¿ÉÒÔÓÃÕâ¸ö½â¾ö¶à¸ödiv¶ÔÆëʱµÄ¼ä¾à²»¶Ô£¬
¹ØÓÚ clear float µÄÔ­Àí¿É²Î¼û [How To Clear Floats Without Structural Markup]
½«ÒÔÏ´úÂë¼ÓÈëGlobal CSS ÖÐ,¸øÐèÒª±ÕºÏµÄdiv¼ÓÉÏ class=”clearfix” ¼´¿É,ÂÅÊÔ²»Ë¬.
´úÂë:
<style>
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {display:block;}
</style>
Èý¡¢ÆäËû¼æÈݼ¼ÇÉ(Ï൱ÓÐÓÃ)
1, FFϸø div ÉèÖà padding ºó»áµ¼Ö width ºÍ height Ôö¼Ó, µ«IE²»»á.(¿ÉÓÃ!important½â¾ö)
2, ¾ÓÖÐÎÊÌâ.
1).´¹Ö±¾ÓÖÐ.½« line-height ÉèÖÃΪ µ±Ç° div ÏàͬµÄ¸ß¶È, ÔÙͨ¹ý vetical-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 .


Ïà¹ØÎĵµ£º

ÍøÒ³²¼¾ÖÖÐÈçºÎ½øÐÐCSS²¼¾Öµ÷ÊÔ


¡¡¡¡ÍøÒ³Éè¼ÆÖÐCSS²¼¾ÖÊǺÜÖØÒªµÄ²¿·Ö£¬ÏÂÃæ½éÉܼ¸ÖÖ¼ì²éµ÷ÊÔCSS²¼¾ÖµÄÓÐЧ·½·¨¡£
¡¡¡¡1.¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾­³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡2.¼ì²éCSSÊÇ·ñÊéдÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ}µÈ¡£¿ÉÒÔÀûÓà ......

CSSÏÂÀ­²Ëµ¥

ÕâÊÇÒ»¸ö±ê×¼µÄCSSÏÂÀ­²Ëµ¥ÖÆ×÷½Ì³Ì£¬ÓÐÕë¶ÔĿǰÁ÷ÐеÄIE6/IE7/IE8²»Í¬°æ±¾µÄCSS´úÂ룬Òò´Ë¿ÉÒÔÔÚIEÖ®¼äÍêÈ«¼æÈÝ£¬²»¹ýÆäËüµÄä¯ÀÀÆ÷Ïñ»ðºü/GGä¯ÀÀÆ÷Ö®ÀàµÄûÓвâÊÔ£¬Èç¹û¼æÈÝIE8µÄ»°£¬ÄÇô¼æÈÝ»ðºüÓ¦¸ÃÎÊÌâ²»´ó°É¡£²Ëµ¥Ê¹ÓÃÀ¶É«»ùµ÷£¬»¬Ïò¶þ¼¶²Ëµ¥¸ü»»±³¾°£¬²Ù×÷µÄ¸Ð¾õºÜÊæ·þ¡£
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XH ......

15¸öÄã±ØÐëÖªµÀµÄCSS³£Ê¶

1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔ­Òò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö±ÔÚÓÃÕâ¸ö¡£border:0; Ö»ÊǶ¨Òå±ß¿ò¿í¶ÈΪÁ㣬µ«±ß¿òÑùʽ¡¢ÑÕÉ«»¹Êǻᱻä¯ÀÀÆ÷½âÎö£¬Õ¼ÓÃ×ÊÔ´¡£
3 ......

CSSʵÏÖÔ²½ÇµÄ 25 ÖÖ¼¼ÇÉ·ÖÏí

Ô­ÎĵØÖ·£ºhttp://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Ad ......

CSSÑùʽÎļþÓÅ»¯ ¸üÕû½à¶øÇåÎú


CSS¼òд¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆÎªCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙ
CSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö×¶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»
¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶӯäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òÐ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ