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

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
     padding: 0;
     margin: 0;
}
fieldset, img {
     border: 0;
}
table {
     border-co ......

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±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£»
¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬ÈÝÆ÷×ÔÈ»ÏÔÆäÖУ»
Èý¡¢ÈýÏñËØÎı¾ÂýÒÆ²»±Ø»Å£¬¸ß¶ÈÉèÖðïÄãæ ......

17+ cssÖÆ×÷Êý¾ÝչʾЧ¹û

ÒÔÏÂÊÕ¼¯·ÖÏíµÄÊý¾Ýͼ±íµÄչʾЧ¹û£¬ÊÇÍêÈ«ÓÃhtmlºÍcssÀ´ÊµÏֵġ£Í¨¹ý×ÐϸÑо¿Ñ§Ï°ÕâЩ°¸Àý¶ÔÓÚÎÒÃÇѧϰcss»áÓкܴó°ïÖúµÄ¡£
1¡¢ÍêȫʹÓÃdiv¡¢spanºÍcssÖÆ×÷µÄÊý¾Ýͼ±í¡£
2¡¢ÓкܶàÓô¿cssÖÆ×÷µÄÊý¾Ýͼ±í£¬ÎҸоõÕâ¸öÊÇ×öµÄ×îÆ¯ÁÁµÄÒ»¸ö¡£
3¡¢Õâ¸öÏßÐÎÊý¾Ýͼ±íÍêÈ«»ùÓÚhtmlºÍcssÖÆ×÷µÄ£¬Ã»ÓÐÓ¦ÓÃjs¡£ÕâÑùµÄͼͼ±í¼ÓÔØ¿ì£ ......

cssÀý×Ó

/*
*´´½¨ÈË£ºÝþÒËÖÒ
*ÓÃ;£ºÑ§Ï°css£¬Ó¦ÓÃÓÚÐÂÎÅϵͳ
*/
*
{
    /*°ÑĬÈÏÖµÉèÖÃΪ0*/
    margin: 0;
    padding: 0;
    border-width: 0;
}
body
{
    font-size: 14px;
}
a:link£¬a:visited
{
    /*Êó ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ