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

5¸ö¼òµ¥£¬µ«ºÜʵÓÃµÄ cssÊôÐÔ

Õâ5¸öÓÐÓõÄcssÊôÐÔ¿ÉÄÜÄãÊDZȽÏÊìϤµÄ£¬µ«ÊǺÜÉÙʹÓõ½ËüÃÇ¡£ÎÒÕâÀïÌÖÂ۵IJ»ÊÇcss3µÄÐÂÊôÐÔ
¡£ÎÒÌáµ½µÄ¶¼ÊDZ»ËùÓÐä¯ÀÀÆ÷Ö§³ÖµÄcss2ÊôÐÔ±ÈÈ磺clip¡¢min-height¡¢white-space¡¢cursorºÍdisplay¡£Ç§Íò±ð´í
¹ýÕâÆªÎÄÕ£¬ÒòΪÄã»á¾ªÑȵķ¢ÏÖËûÃÇÊǺÜÓÐÓõġ£
Ò»¡¢css clip£¨²ÃÇУ©
clip²ÃÇÐÕâ¸öÊôÐÔÓеãÏñÊÇÕÚÕÖ¡£ËüÔÊÐíÄãÓÃÌØ¶¨µÄÐÎ×´ÕÚÕÖÏàÓ¦µÄÄÚÈÝ¡£²ÃÇÐÄ³ÔªËØÖ®Ç°£¬Äã±ØÐëÏȸø¸ÃÔªËØÖ¸¶¨¾ø¶Ô¶¨Î»ÊôÐÔ£¬È»ºó¸øËüµÄÉÏÏÂ×óÓÒ¸³Öµ¡£
ͼƬ²ÃÇоÙÀý
£¨ÑÝʾ£©
ÔÚ½ÓÏÂÀ´µÄÕâ¸öÀý×ÓÀïÃæ£¬Ö÷ҪչʾÈçºÎ¸øÒ»¸öͼƬӦÓòÃÇÐÊôÐÔ¡£Ê×ÏÈ£¬Ö¸¶¨divÔªËØÏà¶Ô¶¨Î»£¬È»ºó¸øÍ¼Æ¬¸³Óè¾ø¶Ô¶¨Î»ÊôÐÔºÍÏàÓ¦µÄÊôÐÔÖµ¡£
´úÂëÈçÏ£º
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
ͼƬµ÷ÕûºÍ²ÃÇÐ
ÔÚÕâÀý×ÓÀïÃæ£¬ÎÒÃǽ«Õ¹Ê¾ÄãÈçºÎµ÷ÕûͼƬ´óС²¢²ÃÇÐͼƬ¡£Õâ¸öͼƬµÄԭʼÐÎ×´Êdz¤·½Ðεģ¬ÎÒÏë°ÑͼƬËõСһ°ëºóÔÚÕý·½ÐÎÀïչʾ¡£ÎÒÓÃwidth¡¢
heightÊôÐԸıäͼƬ´óС£¬È»ºóͨ¹ý²ÃÇÐÊôÐÔÈÃÆäÏÔʾΪÕý·½ÐΣ¬Í¬Ê±¸øleft¸³ÖµÊ¹Í¼Æ¬Ïò×óÒÆ¶¯15px¾àÀë¡£
´úÂëÈçÏ£º
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}
clip
ÆäËûÏà¹ØÎÄÕÂ
¶þ¡¢min-height×îС¸ß¶È
£¨ÑÝʾ£©
×îС¸ß¶ÈÊôÐÔÔÊÐíÄã¸øÄ³¸öÔªËØÖ¸¶¨×îС¸ß¶È£¬¶ÔÓÚÍøÕ¾²¼¾ÖÀ´ËµËüÊÇÊ®·ÖÓÐÓõġ£ÎÒ¾ÍÔÚÎÒµÄjob
boardµÄÄÚÈÝÇøÓòÓ¦ÓÃÁË×îС¸ß¶È£¬È·±£ÄÚÈÝÇøÓòµÄ¸ß¶È±È±ßÀ¸Òª¸ßЩ¶ù¡£
´úÂëÈçÏ£º
.with_minheight {min-height: 550px;}
min-height£¨×îС¸ß¶È£©ÔÚie6ÏÂÃæµÄbugÎÊÌâ
×¢Ò⣺ie6ÊDz»Ö§³Ömin-heightµÄ£¬µ«ÊÇһϷ½·¨¿ÉÒÔ½â¾öÕâ¸öie6 bugÎÊÌâ¡£
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}
Èý¡¢White-spaceÕÛÐÐ
£¨ÑÝʾ£©
White-spaceÊôÐÔÖ¸¶¨Ä³Ò»ÔªËØÊÇÈçºÎ×Ô¶¯ÕÛÐеġ£±ÈÈ磬¸øÒ»ÔªËØÖ¸¶¨White-spaceÊôÐÔºó£¬Èç¹ûÒ»ÐÐÄڵĿռäÎÞ·¨ÈÝϸÃÔªËØµÄ»°£¬Ëü½«
×Ô¶¯»»µ½ÏÂÒ»ÐС£
´úÂëÈçÏ£º
em {white-space: nowrap;£ý
ËÄ¡¢¹â±ê
£¨ÑÝʾ£©
Èç¹ûÄú¸ü¸Ä°´Å¥µÄÐÐΪ£¬Í¬Ê±ÄãÒ²Ó¦¸Ã¸Ä±äCursor¹â±ê¡£ÀýÈ磬µ±Ò»¸ö°´Å¥±»½ûÓÃʱ£¬¹â


Ïà¹ØÎĵµ£º

CSS Reset(CSS¸´Î»)

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
     padding: 0;
     margin: 0;
}
fieldset, img {
     border: 0;
}
table {
     border-co ......

ä¯ÀÀÆ÷רÊôCSS¿ª·¢

ת·¢Ï£¬Í¬ÊÂ×ܽáµÄ¡£
ä¯ÀÀÆ÷´óÕ½µÄ½á¹ûÔø¾­Ò»¶ÈÊÇIEһͳÌìÏ£¬ÔÚÄǸöʱ´ú£¬ÎÒÃǸù±¾²»Óõ£ÐÄä¯ÀÀÆ÷¼æÈÝÐÔÎÊÌ⣬ÓÃPS×Ô¶¯Éú³É´úÂë¶¼ÐС£È»¶ø°éËæÊ±´ú·¢Õ¹£¬ÈËÃǶÔWEBÓ¦ÓÃµÄÆÚÍûÔ½À´Ô½¸ß£¬ÓÚÊǺõ£¬½­ºþ·éÑÌÔÙÆð£¬¸÷ÖÖä¯ÀÀÆ÷ÈçÓêºó´ºËñ£¬Õâ¿É¿àÁËÎÒÃÇÕâЩ¿ª·¢Õߣ¬ÎªÁËÈø÷ä¯ÀÀÆ÷±íÏÖÒ»Ö£¬²»ÖªµÀÓжàÉÙǰ±²ºÄ·ÑÁ˶àÉÙÐÄѪ£¬Ï ......

IE6ÖÐCSSÎÞЧÎÊÌâ

IE6ÖÐCSSÎÞЧÎÊÌâ
ͬÊ·´À¡ÎÒÒ»¸öÒ³ÃæÔÚIE7ºÍFirefox϶¼Õý³£,µ«ÊÇÔÚIE6ÖÐÎÞÑùʽ.µ«ÊÇÒ³ÃæÎÒ×ö¸øËûÃǵÄʱºòÒ»Çж¼ÊÇÕý³£µÄ.°ÑËû´«¸øÎҵİü´ò¿ªÑо¿Á˰ëÌì·¢ÏÖ,Ò³Ãæ±àÂë´ÓGB2312±ä³ÉÁËUTF-8,ÆäËû¶¼Ã»ÓÐʲô¸Ä±ä.ÓÚÊÇ»¹Ô­ÎªGB2312,Ò³ÃæÕý³£.ÔÙ½«ÍⲿCSS¸´ÖƵ½Ò³ÃæÄÚ²¿,ͬÑùÕý³£.Ñо¿Ðí¾ÃÕÒ²»µ½ÎÊÌâËùÔÚ,ºöÈ»·¢ÏÖCSSÀïÃæÓжÎ× ......

CSS²¼¾Ö¿Ú¾÷

 
¡¡¡¡
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈ˰ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסĨ£¿
Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£»
¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬ÈÝÆ÷×ÔÈ»ÏÔÆäÖУ»
Èý¡¢ÈýÏñËØÎı¾ÂýÒÆ²»±Ø»Å£¬¸ß¶ÈÉèÖðïÄãæ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ