ÏÂÃæÊÇCSS×î³£ÓúÍʵÓõļ¼ÇÉ¡£
1.ÖØÖÃä¯ÀÀÆ÷µÄ×ÖÌå´óС
ÖØÖÃä¯ÀÀÆ÷µÄĬÈÏÖµ £¬È»ºóÖØÉèä¯ÀÀÆ÷
µÄ×ÖÌå´óСÄã¿ÉÒÔʹÓÃÑÅ»¢µÄÓû§½çÃæÖØÖÃ
µÄCSS·½°¸ £¬Èç¹ûÄã²»ÏëÏÂÔØ9MBµÄÎļþ£¬´úÂëÈçÏ£º
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
Æä´Î£¬ÎÒÃÇÖØÉèä¯ÀÀÆ÷×ÖÌåµÄ´óСΪ10ÏñËØ£¬Ê¹ÓÃÈçÏ£º
html {font-size: 62.5%;}
Õâ¸ö´óС»ù±¾ºÏÊÊ£¬È»ºóÄú¿ÉÒÔ¸ù¾Ý×Ô¼ºµÄÐèÒªµ÷Õû´óС£¬Èç ±êÌâ1Ϊ120ÏñËØ:
h1 {font-size: 2em;}
2.ÉèÖÃˮƽ¾ÓÖÐ
´ó¶àÊýµÄÍøÕ¾Ä¿Ç°¶¼Êǹ̶¨¿í¶ÈµÄ¡£CSS´úÂëÈçÏ£º
div#container {margin: 0 auto;}
3.¿ØÖÆÎ»Ö㺾ø¶ÔλÖã¬Ïà¶ÔλÖÃ
¼ÙÈçÓÐÁ½¸ödiv
<div id='parent'>
<div id='son'></div>
</div>
divÓÐleftºÍtopÊôÐÔ,ÊÇÓÃÀ´¶¨Î»µÄ.
Èç¹ûÄÚ²ãµÄdivµÄpositionÊôÐÔÊÇabsolute.ÄÇËû¾ÍÊÇÏà¶ÔÓÚÎĵµµÄ×óÉϽǵÄλÖÃ..
Èç¹ûÄÚ²ãµÄdiv(idΪsonµÄÄǸö)positionÊôÐÔΪrelative,ÄÇËüµÄleftºÍtopÖµ¾ÍÊÇÏà¶ÔÓÚÍâ²ãµÄdivµÄ×óÉϽǵľàÀë.
4.½«ÖØÒªÔªËØ·ÅÖÃÔÚÆÁÄ»ÖÐÑë
Èç¹ûÄãÏ£Íû½«ÄúÏëÒªµÄ¶«Î÷·ÅÔÚ×îÖÐÑ룬¿ÉÒÔʹÓÃÒÔÏÂCSS£º
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
Äú±ØÐëÃ÷È·µÄÖ¸¶¨¿í¶ÈºÍ¸ß¶È£¬ÔÙ°ÑtopºÍleftÊôÐÔÉèΪËûÃǵÄÒ»°ë£¬ÕâÑù¾Í¿ÉÒÔÊÇÕâ¸ö²¿·Ö»Øµ½ÆÁÄ»µÄÖÐÐÄ¡£
5.¿ÉÒÔÖØ¸´ÀûÓõĹæÔò
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
ÉèÖÃ×Ô¼ºµÄCSSÑùʽ±í£¬¾Í¿ÉÒÔÔÚÄúÐèÒªµÄʱºòÖ±½ÓµÄÌí¼Ó±ê¼Ç¼´¿É¡£
6. ½â¾öIE6 µÄ¸¡¶¯ÔªËصÄË«±¶±ß