ûÏëµ½µÄ¡¢²»³£ÓõÄÈý¸ö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;
}
Ïà¹ØÎĵµ£º
Ϊµ¥¸ö±êÇ©¶¨Ò壺
br{
text-align: center;
color: #000000;
font-family:ËÎÌå;
}
Ϊbr±êǩָ¶¨ÁË3¸öÑùʽÊôÐÔ£¬°üº¬¶ÔÆä·½Ê½¡¢ÎÄ×ÖÑÕÉ«¼°×ÖÌå¡£
ÔÚÍøÒ³ÖÐÒ»¸öÿ¸öIDÖ»ÄÜʹÓÃÒ»´Î£¬È磺
<div id="main"></div>
ÔÚCSSÑùʽ±íÖУ¬IDÑ ......
Õâ¸ö“ä¯ÀÀÆ÷ĬÈÏHTMLµÄCSSÑùʽÊôÐÔ”£¬ÔÚÄãÐèÒª»¹ÔĬÈÏÖµµÄʱºò£¬±È½ÏÓÐÓ᣿ªÊ¼µÄʱºòÓ¦ÓÃͨÅäÑ¡ÔñÆ÷ *
{margin:0;padding:0;}£¬µ±ÐèҪʹÓñ߾àµÄʱºò£¬¾ÍÐèÒª»¹ÔHTMLĬÈÏCSSÖµÁË¡£
µ«Í¨ÅäÑ¡ÔñÆ÷ÔÚ´óÐÍÍøÕ¾µÄ¹¹½¨ÖУ¬Ó°
ÏìÐÔÄÜ£¬¿ÉÒԲο¼52CSS.comµÄÏà¹ØÎÄÕ£¬´ó¼Ò»¹ÊÇÐèÒª½÷É÷һЩ¡£
¡¡¡¡Ò ......
Block element ¿é¼¶ÔªËØ
¹ËÃû˼Òå¾ÍÊÇÒÔ¿éÏÔʾµÄÔªËØ£¬¸ß¶È¿í¶È¶¼ÊÇ¿ÉÒÔÉèÖõġ£±ÈÈçÎÒÃdz£ÓõÄ<div>¡¢<p>¡¢<ul>ĬÈÏ״̬϶¼ÊÇÊôÓÚ¿é¼¶ÔªËØ¡£¿é¼¶ÔªËرȽϰԵÀ£¬Ä¬ÈÏ״̬ÏÂÿ´Î¶¼Õ¼¾ÝÒ»Õû¸öÐУ¬ºóÃæµÄÄÚÈÝÒ²±ØÐëÔÙÐÂÆðÒ»ÐÐÏÔʾ¡£µ±È»·Ç¿é¼¶ÔªËØÒ²¿ÉÒÔͨ¹ýcssµÄdisplay:block;½«Æä¸ü¸Ä³É¿é¼¶ÔªËØ¡£´ËÍâ» ......
The Lovely CSS Framework is a simple and straight forward way to easily
deploy an XHTML/CSS site.
Based on a simple 960px wide grid system, featuring multiple column layouts,
and various pluggable add-ons.
Õâ¸öÓÉ Constantinos Demetriadis ´´½¨µÄÏîÄ¿ÊÇÒ»¸ö CSS ¿ò¼Ü£¬»ùÓÚ 960.gs£¬»¹ÓµÓÐÒ»¸ö²å¼þ ......
×÷ÕߣºIIduce À´Ô´£ºcss9 ʱ¼ä£º2009-12-21 ÔĶÁ£º601 ´Î ÔÎÄÁ´½Ó [ÊÕ²Ø]
×î½ü²úÆ·ÖÐÐèÒª¼ÓÈë“Ò»¸öÁбíÏÔʾÑùʽ¿ìËÙÇл»”µÄ¹¦ÄÜ£¬ÕýºÃÔÚÕâÆªÎÄÕÂÖп´µ½ÁËËüµÄʵÏÖ·½Ê½£¬¸Ð¾õºÜ²»´í¡£
ÕâÆªÎÄÕ½²ÊöµÄÊÇÈçºÎͨ¹ýCSSºÍJQueryÀ´ÊµÏÖÔ ......