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

CSS ͸Ã÷¶È´ó»ã×Ü


¡¡¡¡½üÄêÀ´£¬CSS²»Í¸Ã÷ËãµÃÉÏÊÇÒ»ÖÖÏ൱Á÷Ðеļ¼Êõ£¬µ«ÔÚ¿çä¯ÀÀÆ÷Ö§³ÖÉÏ£¬¶ÔÓÚ¿ª·¢ÕßÀ´Ëµ£¬¿ÉÒÔ˵ÊÇÒ»¼þÁîÈËÍ·ÌÛµÄÊÂÇ顣Ŀǰ»¹Ã»ÓÐÒ»¸öͨÓ÷½·¨£¬ÒÔÈ·±£Í¸Ã÷¶ÈÉèÖÿÉÒÔÔÚĿǰʹÓõÄËùÓÐä¯ÀÀÆ÷ÉÏÓÐЧ¡£
¡¡¡¡ÕâÆª»ã×ÜÖ÷ÒªÊÇÌṩһЩCSS²»Í¸Ã÷µÄÏêϸ½éÉÜ£¬´úÂëʾÀýºÍ½âÊÍ£¬ÒÔʵÏÖÕâÏîÓÐÓõÄCSS¼¼ÊõÔÚÄúµÄÏîÄ¿ÖмæÈÝËùÓÐä¯ÀÀÆ÷¡£
¡¡¡¡¹ØÓÚCSS ͸Ã÷¶È£¬ÓÐÒ»µãÐèҪעÒâµÄÊÇ£¬ËüËäȻʹÓÃÁ˺ܶàÄ꣬µ«ËüÒ»Ö±ÒÔÀ´¶¼²»ÊÇÒ»¸ö±ê×¼ÊôÐÔ¡£ËüÊÇÒ»ÖַDZê×¼¼¼Êõ£¬Ó¦¸ÃÊÇCSS3¹æ·¶µÄÒ»²¿·Ö¡£
1. ¾ÉµÄOpacityÉèÖÃ
¡¡¡¡ÒÔÏ´úÂëÊÇFirefoxºÍSafari¾É°æ±¾ËùÐèµÄ͸Ã÷¶ÈÉèÖÃ:
#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}
¡¡¡¡-khtml-opacityÉèÖÃÊÇÕë¶Ô¾É°æ±¾µÄWebkitäÖȾÒýÇæ£¬ÕâÖÖרÓÃÊôÐÔÏÖÔÚÒѾ­¹ýʱÁË£¬³ý·ÇÄ㻹ÓÐÐèÒª¼æÈÝSafari 1.x.µÄÓû§¡£
µÚ¶þÐÐʹÓÃרÓÃÊôÐÔ -moz-opacityÊǠΪÁ˼æÈÝMozillaäÖȾÒýÇæµÄÔçÆÚ°æ±¾£¬ÒÔ¼°×·Ëݵ½Netscape Navigator¡£Firefox 0.9ÒÔºó¾Í²»ÒªÇóʹÓÃ-moz-opacityÊôÐÔ£¬Firefox 3.5£¨ÏÖÔÚʹÓÃGeckoÒýÇæ£©ÒѾ­²»ÔÚÖ§³ÖÕâ¸öÊôÐÔ¡£
2. ÔÚFirefox, Safari, ChromeºÍOperaϵÄCSS͸Ã÷¶È
¡¡¡¡ÒÔÏ´úÂëÊdzýÁËIEÍâµÄËùÓе±Ç°ä¯ÀÀÆ÷µÄ×î¼òµ¥£¬×î×îеIJ»Í¸Ã÷¶ÈÉèÖõÄCSSÓï·¨£º
#myElement {
opacity: .7;
}
¡¡¡¡ÉÏÊöÓï·¨½«ÉèÖÃÒ»¸öÔªËØÎª70£¥²»Í¸Ã÷£¨»ò30%͸Ã÷£©¡£ÉèÖÃopacity:1½«Ê¹ÔªËز»Í¸Ã÷£¬¶øÉèÖÃopacity:0½«Ê¹µÃÔªËØÍêÈ«²»¿É¼û¡£Äã
Ö»Òª¼Çס“opacity”µÈͬÓÚ“²»Í¸Ã÷”¾ÍºÜÈÝÒ×¼ÇסÁË£¬opacityֵԽС¾ÍÔ½½Ó½ü͸Ã÷¡£
¡¡¡¡opacityÊôÐÔ¿ÉÒÔ¾«È·µØÐ¡ÊýµãºóÁ½Î»£¬ËùÒÔֵȡ“.01”ºÍ“.02”ʵ¼ÊÉÏÊDz»Í¬µÄ£¬ËäÈ»¿É¼û¶ÈºÜÄѱ»·¢¾õ¡£Ò»°ãÇé¿öÏ£¬¾«È·µ½Ò»Î»¾Í¿ÉÒÔÁË£¬È¡ÖµÈç“.3”»ò“.7”¡£
3. IEϵÄCSS͸Ã÷¶È
¡¡¡¡IEÏÂÕÕ¾ÉÓбðÓÚÆäËûä¯ÀÀÆ÷£¬²¢ÇÒĿǰҲÓÐÈý¸ö²»Í¬°æ±¾µÄIEÔڹ㷺ʹÓã¬Í¸Ã÷¶ÈÉèÖÃÊDz»Í¬µÄ£¬ÓÐʱÐèÒª¶îÍâµÄCSSÀ´¿ØÖÆ£º
#myElement {
filter: alpha(opacity=40);
}
¡¡¡¡ÉÏÃæµÄCSSʹÓÃרÓõÄfilterÊôÐÔÀ´ÉèÖÃIE6-8͸Ã÷¶È¡£¶ÔÓÚIE6ºÍIE7ÐèҪעÒ⣺ΪÁËʹµÃ͸Ã÷ÉèÖÃÉúЧ£¬ÔªËرØÐëÊÇ“Óв¼¾Ö”¡£Ò»¸öÔªËØ¿ÉÒÔͨ¹ýʹÓÃһЩCSSÊôÐÔÀ´Ê¹Æä±»²¼¾Ö£¬ÓÐÈçwidth ºÍ position¡£¹ØÓÚ΢ÈíרÓеÄhasLayoutÊôÐÔÏêÇ飬ÒÔ¼°ÈçºÎ´¥·¢Ëü£¬²Î¿¼ÕâÀï¡£
¡¡¡¡ÁíÍâÒ»¸öÉèÖÃIE8µÄCSS͸Ã


Ïà¹ØÎĵµ£º

Ò»¸öCSS+JavaScript±àдµÄÅÜÂíµÆ³ÌÐò

ת×Ô£º
<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 ......

ÓÃDIV+CSS²¼¾ÖÖÐ,ÈçºÎÉèÖÃͼƬÓëÎÄ×ÖÔÚͬһ¸ß¶È?


Èç¹û°ÑÎÄ×ÖºÍͼƬ·ÅÔÚͬһ¸öͼ²ãµÄ£¬ÎÄ×Ö¿ÉÒÔ×öµ½¾ÓÖУ¬µ«ÊÇͼƬ¾Í²»ÄÜ£¬ÒòΪͼƬĬÈÏÊÇ×óÉÏ¶ÔÆëµÄ£¡Õâ¾ÍÊÇΪʲôÔÚÖÆ×÷µÄʱºò¿´µ½Í¼Æ¬
»á¿¿ÉϵÄÔ­Òò¡£Èç¹ûÄãÁͼƬ¾ÓÖÐÁË£¬ÎÄ×־ͻáÏà¶ÔÓÚͼƬÓÒÏÂ¶ÔÆëÁË£¡Èç¹ûÄãÏë2¸ö¶¼¾ÓÖеϰ£¬¾Í²»ÄܰÑËûÃÇ·ÅÔÚͬһ¸ödiv,»òÕßÄãÊÔÏÂ
°ÑËûÃÇ·ÅÔÚ2¸ödivÖУ¬»òÕßÒ»¸öͼƬ·ÅdivÖУ¬ÎÄ ......

css×Ô¶¯Ê¹ÓÃÑùʽ

ÎÄ×Ö×Ô¶¯Ê¹ÓÃÑùʽ
.inputText{
border:1px solid #7898b8;
height:20px;
padding-left:2px;
line-height:20px;
background-image:url(images\\inputtext_bg.gif);
background-repeat:repeat-x;
color:#339900;
}
.inputTextÊÇ ×ÖÌå×Ô¶¯ÉèÖÃÑùʽµÄÃû³Æ
¸÷Öֿؼþ×Ô¶¯Ì×ÓÃÑùʽ
±ÈÈçtable,td
table{border-colla ......

cssÑ¡ÔñÆ÷

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 ......

ͼƬÎÞ·ì¹ö¶¯´úÂë(DIV+CSS+JavaScript)

<div id="imgbox" style="height:110px;width:600px;overflow:hidden;">
<div id="imgbox1" style="float:left;width:1000%">
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">
<img src="http://www ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ