ûÏëµ½µÄ¡¢²»³£ÓõÄÈý¸öcssÊôÐÔ£¡
×÷Õߣºtinyhill¡¡À´×Ô£ºÀ¶É«ÀíÏë ¶Ô ¡¶5 ¸ö¼òµ¥ÊµÓÃµÄ CSS ÊôÐÔ¡·½øÐбà¼
1¡¢CSS Clip
¼ô¼ (clip) ÊôÐÔ¾ÍÏñÒ»¸öÃæ¾ß¡£ËüÔÊÐíÄãʹÓþØÐÎÑÚ¸ÇÒ³ÃæÔªËØµÄÄÚÈÝ¡£Òª¼ô¼Ò»¸öÔªËØ£ºÄã±ØÐëÖ¸¶¨Æä position ÊôÐÔΪ absolute£¬È»ºóÖ¸¶¨Ïà¶ÔÓÚÔªËØµÄ top£¬right£¬bottom£¬left Öµ¡£
ͼƬ¼ô¼ÊµÀý£¨ÑÝʾ£©
ÒÔÏÂʾÀýÑÝʾÁËÈçºÎʹÓà clip ÊôÐÔÑÚ¸ÇÒ»ÕÅͼƬ¡£Ê×ÏÈ£¬Ö¸¶¨ <div> ÔªËØÎª position:relative£¬È»ºóÖ¸¶¨ <img> ÔªËØÎª position:absolute£¬²¢ÇÒ¸ù¾Ýʵ¼ÊÐèÒªÉ趨 rect Öµ¡£
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
ͼÏñµ÷Õû³ß´çºÍ¼ô¼£¨ÑÝʾ£©
ÔÚÕâ¸öʾÀýÖУ¬ÎÒ½«Õ¹Ê¾ÈçºÎµ÷ÕûͼÏñ³ß´çºÍ¼ô¼Í¼Æ¬¡£ËزÄͼƬÊǾØÐεģ¬ÎÒÏ뽫ÆäÏ÷¼õÖÁ 50£¥ µÄ³ß´ç£¬ÓÃÀ´´´½¨Ò»¸öÕý·½ÐθñʽµÄËõÂÔͼ¡£Òò´Ë£¬ÎÒÓÿí¶ÈºÍ¸ß¶ÈÊôÐÔÀ´µ÷ÕûͼÏñ£¬²¢Ê¹Óà clip ¼ô¼ÊôÐÔÓèÒÔÑڸǡ£È»ºóÓà 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;
}
2¡¢White-space£¨ÑÝʾ£©
white-space ÊôÐÔÖ¸¶¨ÁËÔªËØÖпհ׵Ĵ¦Àí·½Ê½¡£±ÈÈ磬ָ¶¨ white-space:nowrap »á×èÖ¹Îı¾×Ô¶¯»»ÐС£
em {
white-space: nowrap;
}
3¡¢Cursor£¨ÑÝʾ£©
Èç¹ûÄã¸Ä±äÁ˰´Å¥µÄÐÐΪ£¬ÆäÖ¸ÕëÒ²Ó¦¸ÃËæÖ®¸Ä±ä¡£±ÈÈ磬µ±Ò»¸ö°´Å¥²»¿ÉÓÃʱ£¬Ö¸ÕëÓ¦¸Ã¸Ä±äΪĬÈϵļýÍ·£¬À´±íÃ÷Ëü²»¿Éµã»÷¡£Òò´Ë£¬cursor ÊôÐÔÔÚ¿ª·¢ Web Ó¦ÓóÌÐòʱÏ൱ÓÐÓá£
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}
Ïà¹ØÎĵµ£º
CSS ºÐÄ£ÐÍ
¡¡¡¡ÍøÒ³Éè¼ÆÖеÄÿ¸öÔªËØ¶¼Êdz¤·½ÐεĺÐ×Ó¡£ºÐ×ӵijߴçÊÇÔõÑù¾«È·¼ÆËãµÄ£¬Çë¿´ÏÂͼ£º
¡¡¡¡
¡¡¡¡Èç¹ûÊÇ Firebug Óû§µÄ»°(»ù±¾ºÍǰ¶ËÓйصͼ»áÓõ½ Firebug °É – ÌǰéÎ÷ºìÊÁ)£¬¾Í»áºÜÊìϤÏÂÃæµÄͼ±íÁË¡£
¡¡¡¡Õâ¸öͼ±íºÜºÃµØÕ¹Ê¾ÁË×÷ÓÃÓÚÒ³ÃæÉÏÈÎÒâºÐ×ÓµÄÊýÖµ¡£
¡¡¡¡
¡¡¡¡×¢ÒâÒÔÉÏÁ½¸öÀý×ÓÖУ¬margi ......
Õâ¸ö“ä¯ÀÀÆ÷ĬÈÏHTMLµÄCSSÑùʽÊôÐÔ”£¬ÔÚÄãÐèÒª»¹ÔĬÈÏÖµµÄʱºò£¬±È½ÏÓÐÓ᣿ªÊ¼µÄʱºòÓ¦ÓÃͨÅäÑ¡ÔñÆ÷ *
{margin:0;padding:0;}£¬µ±ÐèҪʹÓñ߾àµÄʱºò£¬¾ÍÐèÒª»¹ÔHTMLĬÈÏCSSÖµÁË¡£
µ«Í¨ÅäÑ¡ÔñÆ÷ÔÚ´óÐÍÍøÕ¾µÄ¹¹½¨ÖУ¬Ó°
ÏìÐÔÄÜ£¬¿ÉÒԲο¼52CSS.comµÄÏà¹ØÎÄÕ£¬´ó¼Ò»¹ÊÇÐèÒª½÷É÷һЩ¡£
¡¡¡¡Ò ......
¡¡¡¡Ïë³ÉΪһÃûCSSר¼Ò£¬½ö½öÊìÁ·Ê¹ÓÃCSSÑ¡Ôñ·û(selectors)ÊÇÔ¶Ô¶²»¹»µÄ¡£»¹ÔÚÓÚ¶Ô¹¤×÷µÄÕûÌ广»®£¬¹¤×÷Á÷³ÌµÄÕÆÎÕÒÔ¼°Ìá¸ßÑùʽ±íµÄ¿Éά»¤ÐÔºÍЧÂÊ¡£ÓÃCSS¿ÉÒÔ´´½¨³öÎÒÃÇÏëÒªµÄÃÀÃî¾øÂ×µÄÍøÕ¾£¬¶øÐ´CSS±¾Éí¾ÍÊÇÒ»ÖÖÏíÊÜ¡£ ÄÇôÎÒÃÇÓ¦¸ÃÈçºÎ´´½¨¸ü¾ßÎüÒýÁ¦µÄÑùʽ±í?ÄãµÄÑùʽ±íÓ¦¸Ã¾ßÓÐÄÄÐ©ÌØÐÔÄØ?ͨ¹ýѧϰ²¢½áºÏÎÒ×Ô¼ºµÄ¹¤ ......
¶¯»»ÐÐÎÊÌâ,Õý³£×Ö·ûµÄ»»ÐÐÊDZȽϺÏÀíµÄ,¶øÁ¬ÐøµÄÊý×ÖºÍÓ¢ÎÄ×Ö·û³£³£½«ÈÝÆ÷³Å´ó,ͦÈÃÈËÍ·ÌÛ,ÏÂÃæ½éÉܵÄÊÇCSSÈçºÎʵÏÖ»»Ðеķ½·¨
¶ÔÓÚdiv,pµÈ¿é¼¶ÔªËØ
Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö)ÔªËØÓµÓÐĬÈϵÄwhite-space:normal,µ±¶¨ÒåµÄ¿í¶ÈÖ®ºó×Ô¶¯»»ÐÐ
html
<
id="wrap">Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö) ......
×¢£º"elm"´ú±íij¸öDOMÔªËØ£¬"xxx"´ú±íij¸öCSSÊôÐÔ
Ò»¡¢elm.style.xxx Ö»ÄÜ»ñÈ¡ÄÚÁªÑùʽÀïµÄÖµ
ÒªÏë»ñµÃÕýÈ·µÄcssÖµ£º
IE£ºelm.currentStyle[xxx]
W3C±ê×¼£ºdocument.defaultView.getComputedStyle(elm,"")[xxx]
×¢Ò⣺ÓÃIE·½·¨·µ»ØÖµ¿ÉÄܲ»ÊÇÊý×Ö£¬¶øÊÇauto£»ÓÃw3cµÄ·½·¨×ÜÊǻ᷵»ØÊý×Ö+µ¥Î»
Èý¡¢offsetLeft
......