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

CSS ´¹Ö±¾ÓÖÐ

1.ͼƬµÄ´¹Ö±¾ÓÖÐ
  .box
{
/*·ÇIEµÄÖ÷Á÷ä¯ÀÀÆ÷ʶ±ðµÄ´¹Ö±¾ÓÖеķ½·¨*/
display: table-cell;
vertical-align: middle; /*ÉèÖÃˮƽ¾ÓÖÐ*/
text-align: center;

/* Õë¶ÔIEµÄHack */
*display:block;
*font-size:175px;/*ԼΪ¸ß¶ÈµÄ0.873£¬200*0.873 ԼΪ175*/
*font-family:Arial;/*·ÀÖ¹·Çutf-8ÒýÆðµÄhackʧЧÎÊÌ⣬Èçgbk±àÂë*/

width:200px;
height:200px;
border:1px solid #eee;
}
.box img
{
/*ÉèÖÃͼƬ´¹Ö±¾ÓÖÐ*/
vertical-align: middle;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" mce_src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
²Î¿¼ÎÄÕ£º
http://www.planabc.net/2008/05/26/img_vertical_center_solution/
http://www.student.oulu.fi/~laurirai/www/css/middle/  


Ïà¹ØÎĵµ£º

div+css(¶þ)

ǰÑÔ£ºCSS²¼¾ÖÓ봫ͳ±í¸ñ(table)²¼¾Ö×î´óµÄÇø±ðÔÚÓÚ£ºÔ­À´µÄ¶¨Î»¶¼ÊDzÉÓñí¸ñ£¬Í¨¹ý±í¸ñµÄ¼ä¾à»òÕßÓÃÎÞɫ͸Ã÷µÄGIFͼƬÀ´¿ØÖÆÎIJ¼¾Ö°æ¿éµÄ¼ä¾à£»¶øÏÖÔÚÔò²ÉÓòã(div)À´¶¨Î»£¬Í¨¹ý²ãµÄmargin,padding,borderµÈÊôÐÔÀ´¿ØÖưæ¿éµÄ¼ä¾à¡£
 
(Ò»)  CSS2ºÐÄ£ÐÍ
ºÐÄ£ÐÍÖ÷Òª¶¨ÒåËĸöÇøÓò£ºÄÚÈÝ(content)¡¢±ß¿ò¾à(paddin ......

CSSÇпªÍ¼Æ¬

 clip:rect(ÉÏ£¬ÓÒ£¬Ï£¬×ó) Ëĸöµã×ø±ê
<img src="1.jpg" style=" clip:rect(0£¬30£¬10£¬10);"/>
´Ë·½·¨²»ÊʺϼôÇб³¾°
±³¾°Ê¹ÓÃ
style="background-image:url(bg.jpg); background-position:20px 0px;"
kground-position:
1.¶¨Î»·½·¨ left center  ºáÏò ×ÝÏò
2.ÇÐÈ¡ ºáÏòpx ×ÝÏòpx
²»ÊÊºÏÆ ......

CSS¼æÈÝIE6,IE7,FireFoxÖ®Ò»

¹ØÓÚCSS¶Ô¸÷¸öä¯ÀÀÆ÷¼æÈÝÊǸö·Ç³£ÈÃÈËÍ·ÌÛµÄÊÂÇéÁË, ÍøÂçÉÏµÄ½Ì³Ì±éµØ¶¼ÊÇ.½ñÌìÔÚdiscuz.netÉÏ·¢ÏÖÁËһƪ²»´íµÄ¶«Î÷£¬¾Í×ªÔØ¹ýÀ´ºÍ´ó¼Ò¹²Ïí.¿ÉÒÔµ±×÷CSS¼æÈÝIE6,IE7,FireFoxµä·¶ÁË£¬ÖµµÃÈ¥¼Ç¼Ï¡£·¢ÏÖ×Ô¼ººÜ¾ÃûÓÐ×ªÔØ¶«Î÷¡£
×¢£ºIE¶¼ÄÜʶ±ð*;±ê×¼ä¯ÀÀÆ÷(ÈçFirefox,Opera,Netscape)²»ÄÜʶ±ð*£»IE6ÄÜʶ±ð*£¬µ«²»ÄÜʶ±ð !im ......

µ¼ÈëÍⲿJSÎļþºÍÍⲿCSSÎļþ

1 µ¼ÈëÍⲿjsÎļþ£º
      1.<script type="text/javascript" src="myjs/xx.js"></script>
      2.<script language="javascript" src="myjs/xx.js"></script>
 
2 µ¼ÈëÍⲿcssÎļþ£º
 <link  rel="stylesheet" ty ......

DIV+CSSÄѵãÖ®¾­Ñé×ܽá

1¡¢ÍøÒ³¾ÓÖÐÏÔʾ£º
    ÐèÒªÉèÖÃÁ½¸öµØ·½£¬Ò»¸öÊÇbody£¬Ò»¸öÊÇÍâ±ß¿òdiv¡£
    CSS£º
body{
 margin:0;
 padding:0;
 text-align:center;
}
#main{ /*×îÍâ²ãDIV*/
 width:760px;
 margin:0 auto;
 padding:0
}
    2¡¢ÎÄ×Ö´¹Ö±¾ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ