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

CSSÑùʽ±íÉè¼ÆµÄÊ®Ìõ¼¼ÇÉ


1.css ×ÖÌå¼òд¹æÔò
¡¡¡¡µ±Ê¹ÓÃcss¶¨Òå×ÖÌåʱÄã¿ÉÄÜ»áÕâÑù×ö:
¡¡¡¡font-size: 1em;
¡¡¡¡line-height: 1.5em;
¡¡¡¡font-weight: bold;
¡¡¡¡font-style: italic;
¡¡¡¡font-variant: small-caps;
¡¡¡¡font-family: verdana,serif;
¡¡¡¡
ÊÂʵÉÏÄã¿ÉÒÔ¼òдÕâЩÊôÐÔ:
¡¡¡¡font: 1em/1.5em bold italic small-caps verdana,serif
¡¡¡¡ÏÖÔںöàÁ˰ɣ¬²»¹ýÓÐÒ»µãҪעÒâ:ʹÓÃÕâÒ»¼òд·½Ê½ÄãÖÁÉÙÒªÖ¸¶¨font-sizeºÍfont-familyÊôÐÔ£¬ÆäËûµÄÊôÐÔ(Èçfont-weight, font-style,font-varient)Èçδָ¶¨½«×Ô¶¯Ê¹ÓÃĬÈÏÖµ¡£
¡¡¡¡2.ͬʱʹÓÃÁ½¸öclass
¡¡¡¡Í¨³£ÎÒÃÇֻΪÊôÐÔÖ¸¶¨Ò»¸öclass,µ«Õâ²¢²»µÈÓÚÄãÖ»ÄÜÖ¸¶¨Ò»¸ö£¬Êµ¼ÊÉÏ£¬ÄãÏëÖ¸¶¨¶àÉپͿÉÒÔÖ¸¶¨¶àÉÙ£¬ÀýÈç:
¡¡¡¡<p class="text side">...</p>ͨ¹ýͬʱʹÓÃÁ½¸öclass(ʹÓÿոñ¶ø²»ÊǶººÅ·Ö¸î),Õâ¸ö¶ÎÂ佫ͬʱӦÓÃÁ½¸öclassÖÐÖÆ¶¨µÄ¹æÔò¡£Èç¹ûÁ½ÕßÖÐÓÐÈκιæÔòÖØµþ£¬ÄÇôºóÒ»¸ö½«»ñµÃʵ¼ÊµÄÓÅÏÈÓ¦Óá£
¡¡¡¡3.cssÖб߿ò(border)µÄĬÈÏÖµ
¡¡¡¡µ±±àдһÌõ±ß¿òµÄ¹æÔòʱ£¬Äãͨ³£»áÖ¸¶¨ÑÕÉ«¡¢¿í¶ÈÒÔ¼°Ñùʽ(ÈκÎ˳Ðò¾ù¿É)¡£ÀýÈç:border: 3px solid #000(3ÏñËØ¿íµÄºÚɫʵÏ߱߿ò)£¬ÆäʵÕâ¸öÀý×ÓÖÐΨһÐèÒªÖ¸¶¨µÄÖµÖ»ÊÇÑùʽ¡£¼ÙÈçÄãÖ¸¶¨ÑùʽΪʵÏß(solid),ÄÇôÆäÓàµÄÖµ½«Ê¹ÓÃĬÈÏÖµ:ĬÈϵĿí¶ÈΪÖеÈ(Ï൱ÓÚ3µ½4ÏñËØ);ĬÈϵÄÑÕɫΪ±ß¿òÀïµÄÎÄ×ÖÑÕÉ«¡£Èç¹ûÕâÕýÊÇÄãÏëÒªµÄЧ¹û£¬ÄãÍêÈ«¿ÉÒÔ²»ÔÚcssÀïÖ¸¶¨¡£
¡¡¡¡4.!important»á±»IEºöÂÔ
¡¡¡¡ÔÚcssÖУ¬Í¨³£×îºóÖ¸¶¨µÄ¹æÔò»á»ñµÃÓÅÏÈȨ¡£È»¶ø¶Ô³ýÁËIEÒÔÍâµÄä¯ÀÀÆ÷À´Ëµ£¬ÈκκóÃæ±êÓÐ!importantµÄÓï¾ä½«»ñµÃ¾ø¶ÔµÄÓÅÏÈȨ£¬ÀýÈç:margin-top: 3.5em !important; margin-top: 2em ³ýIEÒÔÍâËùÓÐä¯ÀÀÆ÷ÖеĶ¥²¿±ß½ç¶¼ÊÇ3.5em£¬¶øIEΪ2em£¬ÓÐʱºòÕâÒ»µãºÜÓÐÓã¬ÓÈÆäÔÚʹÓÃÏà¶Ô±ß½çֵʱ(¾ÍÏñÕâ¸öÀý×Ó)£¬¿ÉÒÔÏÔʾ³öIEÓëÆäËûä¯ÀÀÆ÷µÄϸ΢²î±ð¡£(ºÜ¶àÈË¿ÉÄÜ»¹×¢Òâµ½ÁËcssµÄ×ÓÑ¡ÔñÆ÷Ò²ÊǻᱻIEºöÂÔµÄ)
¡¡¡¡5.Í¼Æ¬Ìæ»»µÄ¼¼ÇÉ
¡¡¡¡Ê¹Óñê×¼µÄhtml¶ø²»ÊÇͼƬÀ´ÏÔʾÎÄ×Öͨ³£¸üΪÃ÷ÖÇ£¬³ýÁ˼ӿìÏÂÔØ»¹¿ÉÒÔ»ñµÃ¸üºÃµÄ¿ÉÓÃÐÔ¡£µ«ÊÇÈç¹ûÄã¾öÐÄʹÓ÷ÃÎÊÕߵĻúÆ÷ÖпÉÄÜûÓеÄ×ÖÌåʱ£¬ÄãÖ»ÄÜÑ¡ÔñͼƬ¡£
¡¡¡¡¾ÙÀýÀ´Ëµ£¬ÄãÏëÔÚÿһҳµÄ¶¥²¿Ê¹ÓÓBuy widgets”µÄ±êÌ⣬µ«ÄãͬʱÓÖÏ£ÍûÕâÊÇÄܱ»ËÑË÷ÒýÇæ·¢Ïֵģ¬ÎªÁËÃÀ¹ÛÄãʹÓÃÁËÉÙ¼ûµÄ×ÖÌåÄÇôÄã¾ÍµÃÓÃͼƬÀ´ÏÔʾÁË:
¡¡¡¡<h1><img src="/widget-image.gif" alt="Buy widgets" /></h1>
¡¡¡¡ÕâÑùµ


Ïà¹ØÎĵµ£º

»ñÈ¡¶ÔÏóCSSÊôÐÔ

//»ñȡһ¸öÌØ¶¨ÔªËصÄÑùʽÊôÐÔ
function getStyle(elem,name){
//Èç¹û¸ÃÊôÐÔ´æÔÚÓÚstyleÖÐ ÔòËû×î½ü±»ÉèÖùý
if(elem.style[name]){
return elem.style[name];
}
//·ñÔò³¢ÊÔIE·½·¨
else if(elem.currentStyle){
return elem.currentStyle[name];
//W3C·½·¨
}else if(document.defaultview && document ......

IE6ÏÂCSS±³¾°Í¼Æ¬ÓÐÉÁ¶¯BUG½â¾ö ͼƬ»º´æ

IE6ÏÂÁ´½ÓαÀࣨ:hover£©CSS±³¾°Í¼Æ¬ÓÐÉÁ¶¯BUG£¬Ö÷ÒªÔ­Òòie»áÔÙÒ»´ÎÇëÇóÕâÕÅͼƬ£¬»òÕß˵ͼƬû±»»º´æ¡£
ÀýÈ磺
CSS´úÂë
a:hover{background:url(imagepath)}  
³£ÓõĽâ¾ö·½°¸£º
ÔÚÒ³Ãæµ×²¿Ìí¼ÓÒÔÏÂIE6רÓôúÂ룬ÈÃIE6»º´æCSS±³¾°Í¼Æ¬ÖÁ±¾µØ£¬ÕâÑùa:hoverʱIE6¾Í²»»áÔÙÖØÐÂÏò·þÎñÆ÷ÇëÇó¼ÓÔØ±³¾°Í¼Æ¬ÁË¡£
......

ÓÃCSS´úÂëÈÃÍøÕ¾Í¼Æ¬±ä»Ò

ÕâÀïÌṩcssÂ˾µ´úÂ룬
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
ʹÓ÷½·¨£ºÕâ¶Î´úÂë¿ÉÒÔ±äÍøÒ³ÎªºÚ°×£¬½«´úÂë¼Óµ½ÍøÕ¾Ò³ÃæCSS×î¶¥¶Ë¾Í¿ÉÒÔʵÏÖËØ×°¡£
Èç¹ûÍøÕ¾Ã»ÓÐʹÓÃCSS£¬¿ÉÒÔÔÚÍøÒ³/Ä£°åµÄHTML´úÂë<head>ºÍ</head> Ö®¼ä²åÈ룺
<style>
html{filter:progid: ......

CSS RESET

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-family:'ËÎÌå';}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,a,span {overflow:hidden;}
table{border-collapse:collapse;border-spacing:0; font-size:12px;}
td { line-height:18px ......

Ôڽű¾ÀﶨÒåCSSÑùʽcssFloatÓëstyleFloatµÄÎÊÌâ

ÔÚʹÓÓfloat”ʱ£¬ÒòΪ“float”ÊÇjavascriptµÄÒ»¸ö±£Áô×Ö£¬ËùÒԾͲ»ÄÜʹÓÃstyle.float£¬¶ø¸Ä³ÉÁËstyle.cssFloat(IEʹÓõÄÊÇstyle.styleFloat)£»
 if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
this.listDiv01.style.styleFloat = "left";
this.listDiv02.style.styleFl ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ