Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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͸Ã


Ïà¹ØÎĵµ£º

½¨Õ¾DIV+CSS Ö®ÍøÒ³ÇÐͼ¹ý³ÌÖÐdiv+cssÃüÃû¹æÔò

¡¡¡¡ÄÚÈÝ£ºcontentcontainer µ¼º½£ºnav ²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn ±êÖ¾£ºlogo Ò³ÃæÖ÷Ì壺main
¡¡¡¡¹ã¸æ£ºbanner Èȵ㣺hot ÐÂÎÅ£ºnews
¡¡¡¡ÏÂÔØ£ºdownload ×Óµ¼º½£ºsubnav ²Ëµ¥£ºmenu
¡¡¡¡ËÑË÷£ºsearch Ò³½Å£ºfooter ¹ö¶¯£ºscroll
¡¡¡¡°æÈ¨£ºcopyright ÓÑÇéÁ´½Ó£ºfriendlink ×Ӳ˵¥£ºsubmenu
¡¡¡¡ÄÚÈÝ£ºcontent ......

cssºÍjavascriptÔÚIEºÍFirefoxÖжþÊ®Èý¸ö²»Í¬µã

Ò»¡¢document.formName.item(“itemName”) ÎÊÌâ
ÎÊÌâ˵Ã÷£ºIEÏ£¬¿ÉÒÔʹÓà document.formName.item(“itemName”) »ò document.formName.elements ["elementName"]£»FirefoxÏ£¬Ö»ÄÜʹÓÃdocument.formName.elements["elementName"]¡£
½â¾ö·½·¨£ºÍ³Ò»Ê¹ÓÃdocument.formName.elements["elementName" ......

CSSÔÚMyEclipseÏÂÎÞ·¨ÔØÈëÎÊÌâ¡£

ÔÚJSPÒ³ÃæÉϼÓÈë
<%String path = request.getContextPath();%>
<link  href="<%=path%>/css/style.css" rel="stylesheet" type="text/css">
ÏÂÁз½Ê½Ã²ËƲ»ÐУº
<link  href="../css/style.css" rel="stylesheet" type="text/css">
<link  href="../../css/style.css" rel ......

CSS²¼¾Ö¿Ú¾÷

 
¡¡¡¡
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈ˰ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסĨ£¿
Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£»
¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬ÈÝÆ÷×ÔÈ»ÏÔÆäÖУ»
Èý¡¢ÈýÏñËØÎı¾ÂýÒÆ²»±Ø»Å£¬¸ß¶ÈÉèÖðïÄãæ ......

5¸ö¼òµ¥£¬µ«ºÜʵÓÃµÄ cssÊôÐÔ

Õâ5¸öÓÐÓõÄcssÊôÐÔ¿ÉÄÜÄãÊDZȽÏÊìϤµÄ£¬µ«ÊǺÜÉÙʹÓõ½ËüÃÇ¡£ÎÒÕâÀïÌÖÂ۵IJ»ÊÇcss3µÄÐÂÊôÐÔ
¡£ÎÒÌáµ½µÄ¶¼ÊDZ»ËùÓÐä¯ÀÀÆ÷Ö§³ÖµÄcss2ÊôÐÔ±ÈÈ磺clip¡¢min-height¡¢white-space¡¢cursorºÍdisplay¡£Ç§Íò±ð´í
¹ýÕâÆªÎÄÕ£¬ÒòΪÄã»á¾ªÑȵķ¢ÏÖËûÃÇÊǺÜÓÐÓõġ£
Ò»¡¢css clip£¨²ÃÇУ©
clip²ÃÇÐÕâ¸öÊôÐÔÓеãÏñÊÇÕÚÕÖ¡£ËüÔÊÐíÄã ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ