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

CSS¼¼ÇÉ

1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; È»
ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
2. margin¼Ó±¶µÄÎÊÌâ
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£½â¾ö·½
°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;
ÀýÈ磺
<#div id=”imfloat”>
ÏàÓ¦µÄcssΪ
#IamFloat{
float:left;
margin:5px;
display:inline;}
3.¸¡¶¯ie²úÉúµÄË«±¶¾àÀë
#box{ float:left; width:100px; margin:0 0 0 100px; //ÕâÖÖÇé¿öÖ®ÏÂIE»á²úÉú
200pxµÄ¾àÀë display:inline; //ʹ¸¡¶¯ºöÂÔ}
ÕâÀïϸ˵һÏÂblockÓëinlineÁ½¸öÔªËØ£ºblockÔªËØµÄÌØµãÊÇ,×ÜÊÇÔÚÐÂÐÐÉÏ¿ªÊ¼,¸ß
¶È,¿í¶È,Ðиß,±ß¾à¶¼¿ÉÒÔ¿ØÖÆ(¿éÔªËØ);InlineÔªËØµÄÌØµãÊÇ,ºÍÆäËûÔªËØÔÚͬһÐÐ
ÉÏ,²»¿É¿ØÖÆ(ÄÚÇ¶ÔªËØ);
#box{ display:block; //¿ÉÒÔΪÄÚÇ¶ÔªËØÄ£ÄâΪ¿éÔªËØ display:inline; //ʵÏÖ
ͬһÐÐÅÅÁеÄЧ¹û diplay:table;
4 IEÓë¿í¶ÈºÍ¸ß¶ÈµÄÎÊÌâ
IE²»ÈϵÃmin-Õâ¸ö¶¨Ò壬µ«Êµ¼ÊÉÏËü°ÑÕý³£µÄwidthºÍheightµ±×÷ÓÐminµÄÇé¿öÀ´Ê¹
¡£ÕâÑùÎÊÌâ¾Í´óÁË£¬Èç¹ûÖ»Óÿí¶ÈºÍ¸ß¶È£¬Õý³£µÄä¯ÀÀÆ÷ÀïÕâÁ½¸öÖµ¾Í²»»á±ä£¬Èç
¹ûÖ»ÓÃmin-widthºÍmin-heightµÄ»°£¬IEÏÂÃæ¸ù±¾µÈÓÚûÓÐÉèÖÿí¶ÈºÍ¸ß¶È¡£
±ÈÈçÒªÉèÖñ³¾°Í¼Æ¬£¬Õâ¸ö¿í¶ÈÊDZȽÏÖØÒªµÄ¡£Òª½â¾öÕâ¸öÎÊÌ⣬¿ÉÒÔÕâÑù£º
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height:
auto; min-width: 80px; min-height: 35px;}
5.Ò³ÃæµÄ×îС¿í¶È
min-widthÊǸö·Ç³£·½±ãµÄCSSÃüÁËü¿ÉÒÔÖ¸¶¨ÔªËØ×îСҲ²»ÄÜСÓÚij¸ö¿í¶È£¬Õâ
Ñù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£µ«IE²»ÈϵÃÕâ¸ö£¬¶øËüʵ¼ÊÉϰÑwidthµ±×ö×îС¿í¶ÈÀ´Ê¹
¡£ÎªÁËÈÃÕâÒ»ÃüÁîÔÚIEÉÏÒ²ÄÜÓ㬿ÉÒÔ°ÑÒ»¸ö<div> ·Åµ½ <body> ±êǩϣ¬È»ºóΪ
divÖ¸¶¨Ò»¸öÀà,È»ºóCSSÕâÑùÉè¼Æ£º
#container{ min-width: 600px; width:expression(document.body.clientWidth
< 600? "600px": "auto" );}
µÚÒ»¸ömin-widthÊÇÕý³£µÄ£»µ«µÚ2ÐеÄwidthʹÓÃÁËJavascript£¬ÕâÖ»ÓÐIE²ÅÈϵã¬
ÕâÒ²»áÈÃÄãµÄHTMLÎĵµ²»Ì«Õý¹æ¡£Ëüʵ¼ÊÉÏͨ¹ýJavascriptµÄÅжÏÀ´ÊµÏÖ×îС¿í¶È
¡£
6.DIV¸¡¶¯IEÎı¾²úÉú3ÏóËØµÄbug
×ó±ß¶ÔÏ󸡶¯£¬Óұ߲ÉÓÃÍâ²¹¶¡µÄ×ó±ß¾àÀ´¶¨Î»£¬Óұ߶ÔÏóÄÚµÄÎı¾»áÀë×ó±ßÓÐ3px
µÄ¼ä¾à.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ wi


Ïà¹ØÎĵµ£º

CSSµÄÖ÷ÒªÊôÐÔ


CSS ±³¾°ÊôÐÔ£¨Background£©
ÊôÐÔ
ÃèÊö
CSS
background
ÔÚÒ»¸öÉùÃ÷ÖÐÉèÖÃËùÓеı³¾°ÊôÐÔ¡£
1
background-attachment
ÉèÖñ³¾°Í¼ÏñÊÇ·ñ¹Ì¶¨»òÕßËæ×ÅÒ³ÃæµÄÆäÓಿ·Ö¹ö¶¯¡£
1
background-color
ÉèÖÃÔªËØµÄ±³¾°ÑÕÉ«¡£
1
background-image
ÉèÖÃÔªËØµÄ±³¾°Í¼Ïñ¡£
1
background-position
ÉèÖñ³¾°Í¼ÏñµÄ¿ª ......

CSSä¯ÀÀÆ÷¼æÈÝÐÔ

 /*²»¹ÜÊÇʲô·½·¨£¬ÊéдµÄ˳Ðò¶¼ÊÇfirefoxµÄдÔÚÇ°Ãæ£¬IE7µÄдÔÚÖм䣬IE6µÄдÔÚºóÃæ¡£*/
.JS_CenterAD_marquee_Right
 {
    
      margin-left:17px !important;  /firefox*/
      *margin-left:17px !important;  / ......

DIV+CSSµÄÓŵãÓëȱµã


×ªÔØ×Ô£ºdiv+cssÓŵã
http://blog.sina.com.cn/s/blog_4fe1e5e90100bdtk.html
×î½üÃæÊÔÁ˶à¼Ò¹«Ë¾...Óиö¹ØÓÚdiv+css²¼¾ÖºÃ´¦µÄÎÊÌâ,ÎÊÁ˺öà´Î..ÎһشðÁËһЩ,µ«ÊDz»Ì«È«Ãæ..
½ñÌì´ÓÍøÉÏϵͳµÄËÑË÷µ½ÁËһЩ,²Î¿¼
DIV±¾Éí¾ÍÊÇÈÝÆ÷ÐÔÖʵÄ,Äã²»µ«¿ÉÒÔÄÚǶtable»¹¿ÉÒÔÄÚǶÎı¾ºÍÆäËüµÄHTML´úÂ룻CSSÊÇCascADIng style Sh ......

CSSʹÓÃoverflowʵÏÖÊó±ê¾­¹ý·Å´óËõÂÔͼ´úÂë

<!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=gbk" />
   ......

css display µÄ²ÎÊýÁбí

css display µÄ²ÎÊýÁбí
Óï·¨£º
display : block | none | inline | compact | marker |
inline-table | list-item | run-in | table |table-caption |
table-cell | table-column | table-column-group |
table-footer-group | table-header-group | table-row | table-row-group
²ÎÊý£º
block : ¡¡CSS1¡¡¿é¶ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ