×îÈ«µÄCSSä¯ÀÀÆ÷¼æÈÝÎÊÌâ
CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔÀí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle;
½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px;
È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
2. margin¼Ó±¶µÄÎÊÌâ
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö·½°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;
ÀýÈ磺 <#div id=”imfloat”> ÏàÓ¦µÄcssΪ #IamFloat{ float:left; margin:5px;/*IEÏÂÀí½âΪ10px*/ display:inline;/*IEÏÂÔÙÀí½âΪ5px*/}
3.¸¡¶¯ie²úÉúµÄË«±¶¾àÀë
#box{ float:left; width:100px; margin:0 0 0 100px; //ÕâÖÖÇé¿öÖ®ÏÂIE»á²úÉú200pxµÄ¾àÀë display:inline; //ʹ¸¡¶¯ºöÂÔ}
ÕâÀïϸ˵һÏÂblockÓëinlineÁ½¸öÔªËØ£ºblockÔªËØµÄÌØµãÊÇ,×ÜÊÇÔÚÐÂÐÐÉÏ¿ªÊ¼,¸ß¶È,¿í¶È,Ðиß,±ß¾à¶¼¿ÉÒÔ¿ØÖÆ(¿éÔªËØ);InlineÔªËØµÄÌØµãÊÇ,ºÍÆäËûÔªËØÔÚͬһÐÐÉÏ,²»¿É¿ØÖÆ(ÄÚÇ¶ÔªËØ);
#box{ display:block; //¿ÉÒÔΪÄÚÇ¶ÔªËØÄ£ÄâΪ¿éÔªËØ display:inline; //ʵÏÖͬһÐÐÅÅÁеÄЧ¹û diplay:table;
4 IEÓë¿í¶ÈºÍ¸ß¶ÈµÄÎÊÌâ
IE ²»ÈϵÃmin-Õâ¸ö¶¨Ò壬µ«Êµ¼ÊÉÏËü°ÑÕý³£µÄwidthºÍheightµ±×÷ÓÐminµÄÇé¿öÀ´Ê¹¡£ÕâÑùÎÊÌâ¾Í´óÁË£¬Èç¹ûÖ»Óÿí¶ÈºÍ¸ß¶È£¬Õý³£µÄä¯ÀÀÆ÷ÀïÕâÁ½¸öÖµ¾Í²»»á±ä£¬Èç¹ûÖ»ÓÃmin-widthºÍmin-heightµÄ»°£¬IEÏÂÃæ¸ù±¾µÈÓÚûÓÐÉèÖÿí¶ÈºÍ¸ß¶È¡£
±ÈÈçÒªÉèÖñ³¾°Í¼Æ¬£¬Õâ¸ö¿í¶ÈÊDZȽÏÖØÒªµÄ¡£Òª½â¾öÕâ¸öÎÊÌ⣬¿ÉÒÔÕâÑù£º
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.Ò³ÃæµÄ×îС¿í¶È
min -widthÊǸö·Ç³£·½±ãµÄCSSÃüÁËü¿ÉÒÔÖ¸¶¨ÔªËØ×îСҲ²»ÄÜСÓÚij¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£µ«IE²»ÈϵÃÕâ¸ö£¬¶øËüʵ¼ÊÉϰÑwidthµ±×ö×îС¿í¶ÈÀ´Ê¹¡£Îª
Ïà¹ØÎĵµ£º
ת×Ô£º
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ͼƬÅÜÂíµÆ</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>
<!-- ÕâÀïÊǵÚÒ»¸ö¹Ø¼üµã£¬o ......
1. CSS×ÖÌ嶨Òå¼òд¹æÔò
Ò»°ãµÄд·¨»áÊÇÕâÑù£º
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
¶øÊµ¼ÊÉÏÄã¿ÉÒÔÓøü¼ò½àµÄд·¨£º
font: bold italic small-caps 1em/1.5em verdana,sans-serif
ÊDz»ÊǸüʡʣ¿²»¹ýʹÓÃÕâ ......
* {
margin:0;
padding:0;
font-size:13px;
*font-size:11px;
font-family:Verdana, Arial, ËÎÌå,Helvetica, sans-serif;
/*scrollbar-face-color:#dff9fe;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#9adae7;
scrollbar-darkshadow-co ......
dojo.query()º¯ÊýÒªÓõ½¸÷ÖÖcssÑ¡ÔñÆ÷À´Ñ°ÕÒdomÔªËØ£¬ÏÂÃæ¾Í³£¼ûµÄcss3Ñ¡ÔñÆ÷½øÐмòÂԵĽéÉÜ¡£
1¡¢ »ù±¾Ñ¡ÔñÆ÷£º¸ù¾Ý±êÇ©¡£
ÀýÈ磺P{color£ºblue}
2¡¢ Ñ¡ÔñÆ÷×飺¶à¸ö±êǩ֮¼äÓöººÅ¸ô¿ª¡£
ÀýÈ磺P£¬h{color£ºblue}
3¡¢ IdÑ¡ÔñÆ÷£ºÓÃ#idÃû±íʾ¡£
ÀýÈ磺<div id=”d”>111</div>, #d{color:blue ......
ÒÔÏÂÊÕ¼¯·ÖÏíµÄÊý¾Ýͼ±íµÄչʾЧ¹û£¬ÊÇÍêÈ«ÓÃhtmlºÍcssÀ´ÊµÏֵġ£Í¨¹ý×ÐϸÑо¿Ñ§Ï°ÕâЩ°¸Àý¶ÔÓÚÎÒÃÇѧϰcss»áÓкܴó°ïÖúµÄ¡£
1¡¢ÍêȫʹÓÃdiv¡¢spanºÍcssÖÆ×÷µÄÊý¾Ýͼ±í¡£
2¡¢ÓкܶàÓô¿cssÖÆ×÷µÄÊý¾Ýͼ±í£¬ÎҸоõÕâ¸öÊÇ×öµÄ×îÆ¯ÁÁµÄÒ»¸ö¡£
3¡¢Õâ¸öÏßÐÎÊý¾Ýͼ±íÍêÈ«»ùÓÚhtmlºÍcssÖÆ×÷µÄ£¬Ã»ÓÐÓ¦ÓÃjs¡£ÕâÑùµÄͼͼ±í¼ÓÔØ¿ì£ ......