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

IEÓëFirefoxµÄCSS¼æÈÝ

CSS¶Ôä¯ÀÀÆ÷Æ÷µÄ¼æÈÝÐÔ¾ßÓкܸߵļÛÖµ£¬Í¨³£Çé¿öÏÂIEºÍFirefox´æÔںܴóµÄ½âÎö²îÒ죬ÕâÀï½éÉÜһϼæÈÝÒªµã¡£
¡¡¡¡³£¼û¼æÈÝÎÊÌ⣺
¡¡¡¡1.DOCTYPE
Ó°Ïì CSS ´¦Àí
¡¡¡¡2.FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ­¾ÓÖÐ, IE
²»ÐÐ
¡¡¡¡3.FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ
margin-left,margin-right) ·½¿É¾ÓÖÐ
¡¡¡¡4.FF: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ
width, µ« IE ²»»á, ¹ÊÐèÒªÓà !important ¶àÉèÒ»¸ö height ºÍ width
¡¡¡¡5.FF: Ö§³Ö
!important, IE ÔòºöÂÔ, ¿ÉÓà !important Ϊ FF ÌØ±ðÉèÖÃÑùʽ
¡¡¡¡6.div µÄ´¹Ö±¾ÓÖÐÎÊÌâ:
vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px;
È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
¡¡¡¡7.cursor: pointer ¿ÉÒÔͬʱÔÚ IE FF ÖÐÏÔʾÓαêÊÖָ״£¬ hand
½ö IE ¿ÉÒÔ
¡¡¡¡8.FF: Á´½Ó¼Ó±ß¿òºÍ±³¾°É«£¬ÐèÉèÖà display: block, ͬʱÉèÖà float: left ±£Ö¤²»»»ÐС£²ÎÕÕ
menubar, ¸ø a ºÍ menubar ÉèÖø߶ÈÊÇΪÁ˱ÜÃâµ×±ßÏÔʾ´íλ, Èô²»Éè height, ¿ÉÒÔÔÚ menubar
ÖвåÈëÒ»¸ö¿Õ¸ñ¡£
¡¡¡¡9.ÔÚmozilla firefoxºÍIEÖеÄBOXÄ£ÐͽâÊͲ»Ò»Öµ¼ÖÂÏà²î2px½â¾ö·½·¨£º
div{margin:30px!important;margin:28px;}
¡¡¡¡×¢ÒâÕâÁ½¸ömarginµÄ˳ÐòÒ»¶¨²»ÄÜд·´£¬¾Ý°¢½ÝµÄ˵·¨!importantÕâ¸öÊôÐÔIE²»ÄÜʶ±ð£¬µ«±ðµÄä¯ÀÀÆ÷¿ÉÒÔʶ±ð¡£ËùÒÔÔÚIEÏÂÆäʵ½âÊͳÉÕâÑù£º
div{maring:30px;margin:28px}
¡¡¡¡Öظ´¶¨ÒåµÄ»°°´ÕÕ×îºóÒ»¸öÀ´Ö´ÐУ¬ËùÒÔ²»¿ÉÒÔֻдmargin:XXpx!important;
¡¡¡¡10.IE5
ºÍIE6µÄBOX½âÊͲ»Ò»ÖÂ
¡¡¡¡IE5ÏÂ
div{width:300px;margin:0 10px 0
10px;}
¡¡¡¡divµÄ¿í¶È»á±»½âÊÍΪ300px-10px(ÓÒÌî³ä)-10px(×óÌî³ä)×îÖÕdivµÄ¿í¶ÈΪ280px£¬¶øÔÚIE6ºÍÆäËûä¯ÀÀÆ÷ÉÏ¿í¶ÈÔòÊÇÒÔ300px+10px(ÓÒÌî³ä)+10px(×óÌî³ä)=320pxÀ´¼ÆËãµÄ¡£ÕâʱÎÒÃÇ¿ÉÒÔ×öÈçÏÂÐÞ¸Ä
div{width:300px!important;width /**/:340px;margin:0 10px 0
10px}
¡¡¡¡¹ØÓÚÕâ¸ö/**/ÊÇʲôÎÒÒ²²»Ì«Ã÷°×£¬Ö»ÖªµÀIE5ºÍfirefox¶¼Ö§³Öµ«IE6²»Ö§³Ö£¬Èç¹ûÓÐÈËÀí½âµÄ»°£¬Çë¸æËßÎÒÒ»Éù£¬Ð»ÁË£¡£º£©
¡¡¡¡11.ul±êÇ©ÔÚMozillaÖÐĬÈÏÊÇÓÐpaddingÖµµÄ,¶øÔÚIEÖÐÖ»ÓÐmarginÓÐÖµËùÒÔÏȶ¨Òå
ul{margin:0;padding:0;}
¡¡¡¡¾ÍÄܽâ¾ö´ó²¿·ÖÎÊÌâ
¡¡¡¡×¢ÒâÊÂÏ
¡¡¡¡1¡¢floatµÄdivÒ»¶¨Òª±ÕºÏ¡£
¡¡¡¡ÀýÈ磺(ÆäÖÐfloatA¡¢floatBµÄÊôÐÔÒѾ­ÉèÖÃΪfloat:left;)
<#


Ïà¹ØÎĵµ£º

Íæ×ªCSS£¬´Ó²ËÄñ¿ªÊ¼Ö® CSS×ÖÌåÑÕÉ«µÄÉèÖÃ

½ñÌìдÁËÒ»¸ö¼òµ¥µÄÍøÒ³£¬Çë¿´´úÂ룺
´íÎóµÄ£º
HTML´úÂ룺
½ñÌìµÄÈÕ×Ó
//CSS´úÂëʹÓÃÍⲿÒýÈëʽ

ÎҵļÒÏçÔÚ¿­Àï
CSS´úÂ룺
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:red; /*ÒªµÄ¾ÍÊÇÕâÑùµÄЧ¹û£ºÉèÖÃ×ÖÌåÑÕɫΪºìÉ«*/
}
½á¹ûÏÔʾµÄ×ÖÌ ......

Magento ¼¯³ÉcssÎļþµ½Ò³ÃæÎļþÖÐ

×ªÔØÓÚ ÂÞÂí¼¯ÊÐ
MagentoµÄCSSÎļþÒ»°ã´æ·Åµ½ $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/cssĿ¼Ï¡£Ò²ÓÐЩºÍÈ«¾Öjs½Å±¾ÅäºÏʹÓõÄcssÎļþ´æ·ÅÔÚ$MAGENTO_INSTALLED_FOLDER/jsÏ£¬µ«ÊÇÒ»
°ãÎÒÃDz»Ö±½Óµ÷ÓÃËüÃÇ¡£
ÄÇôMagentoÓ¦ÓÃÓÖÊÇÈçºÎÒýÓÃCSSÎļþµÄÄØ ......

CssÊý¾Ýͼ±í


Data visualization is mostly achieved with flash applications or
with help of some programming languages. Are those solutions the only
way to present, let's say simple data chart? How about giving it a try
with nothing but good ol' css?
Take a look at the Demo
| Download Css Chart
Approach ......

¼¸¸ö¾­µäµÄcss¼¼ÇÉ

ʹÓà line-height ´¹Ö±¾ÓÖÐ
line-height:24px;
ʹÓù̶¨¿í¶ÈµÄÈÝÆ÷²¢ÇÒÐèÒªÒ»Ðд¹Ö±¾ÓÖÐʱ£¬Ê¹Óà line-height ¼´¿É£¨¸ß¶ÈÓ븸²ãÈÝÆ÷Ò»Ö£©£¬¸ü¶àµÄ´¹Ö±¾ÓÖÐ×ܽá¿ÉÒÔ¿´ÕâÀï¡£
Çå³ýÈÝÆ÷¸¡¶¯
#main {
overflow:hidden;
}
²»ÈÃÁ´½ÓÕÛÐÐ
a {
white-space:nowrap;
}
ÉÏÃæµÄÉ趨¾ÍÄܱÜÃâÁ´½ÓÕÛÐУ¬²»¹ý¸ö ......

CSS´¦ÀídivÖжÔÏó´¹Ö±¶ÔÆë

CSSÉèÖÃ
<style type="text/css">
.box {
border:#eee solid 1px;
width:300px;
height:120px;
line-height:120px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
1.Îı¾
<div class="box">Sample text</div>
Sample text
2.ͼƬ(IEÏÂÔÚͼƬºóÃæ¼ÓÒ» ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ