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

ת·¢Ï£¬Í¬ÊÂ×ܽáµÄ¡£
ä¯ÀÀÆ÷´óÕ½µÄ½á¹ûÔø¾­Ò»¶ÈÊÇIEһͳÌìÏ£¬ÔÚÄǸöʱ´ú£¬ÎÒÃǸù±¾²»Óõ£ÐÄä¯ÀÀÆ÷¼æÈÝÐÔÎÊÌ⣬ÓÃPS×Ô¶¯Éú³É´úÂë¶¼ÐС£È»¶ø°éËæÊ±´ú·¢Õ¹£¬ÈËÃǶÔWEBÓ¦ÓÃµÄÆÚÍûÔ½À´Ô½¸ß£¬ÓÚÊǺõ£¬½­ºþ·éÑÌÔÙÆð£¬¸÷ÖÖä¯ÀÀÆ÷ÈçÓêºó´ºËñ£¬Õâ¿É¿àÁËÎÒÃÇÕâЩ¿ª·¢Õߣ¬ÎªÁËÈø÷ä¯ÀÀÆ÷±íÏÖÒ»Ö£¬²»ÖªµÀÓжàÉÙǰ±²ºÄ·ÑÁ˶àÉÙÐÄѪ£¬Ï ......

CSS±Ê¼Ç

Ò»¡¢ÐǺÅ*
Ó¦¸ÃÊǸöͨÅä·û¡£±ÈÈç
<style type="text/css">
.roundBorder *
{
 background: white;
 display: block;
 height: 1px;
 overflow: hidden;
}
</style>
……
 <b class="roundBorder">
 <b class="round ......

´¿CSSÎÞͼʵÏÖDIV±ß¿òƽ»¬ÒõÓ°

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS±ß¿òÒõÓ°< ......

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ºÅ