Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö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 ͸Ã÷±³¾°

<body style="background-color:#000" mce_style="background-color:#000">
<div style="background-color:#fff; width:500px; height:200px; filter:alpha(opacity='50'); opacity:0.5">Õâ¸ö±³¾°ÊÇ͸Ã÷µÄ</div>
</body>
/*IE*/  
filter:alpha(opacity='50');
/*FF*/   ......

½¨Õ¾DIV+CSS Ö®ÍøÒ³ÇÐͼ¹ý³ÌÖÐdiv+cssÃüÃû¹æÔò

¡¡¡¡ÄÚÈÝ£ºcontentcontainer µ¼º½£ºnav ²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn ±êÖ¾£ºlogo Ò³ÃæÖ÷Ì壺main
¡¡¡¡¹ã¸æ£ºbanner Èȵ㣺hot ÐÂÎÅ£ºnews
¡¡¡¡ÏÂÔØ£ºdownload ×Óµ¼º½£ºsubnav ²Ëµ¥£ºmenu
¡¡¡¡ËÑË÷£ºsearch Ò³½Å£ºfooter ¹ö¶¯£ºscroll
¡¡¡¡°æÈ¨£ºcopyright ÓÑÇéÁ´½Ó£ºfriendlink ×Ӳ˵¥£ºsubmenu
¡¡¡¡ÄÚÈÝ£ºcontent ......

CSS±Ê¼Ç

Ò»¡¢ÐǺÅ*
Ó¦¸ÃÊǸöͨÅä·û¡£±ÈÈç
<style type="text/css">
.roundBorder *
{
 background: white;
 display: block;
 height: 1px;
 overflow: hidden;
}
</style>
……
 <b class="roundBorder">
 <b class="round ......

17+ cssÖÆ×÷Êý¾ÝչʾЧ¹û

ÒÔÏÂÊÕ¼¯·ÖÏíµÄÊý¾Ýͼ±íµÄչʾЧ¹û£¬ÊÇÍêÈ«ÓÃhtmlºÍcssÀ´ÊµÏֵġ£Í¨¹ý×ÐϸÑо¿Ñ§Ï°ÕâЩ°¸Àý¶ÔÓÚÎÒÃÇѧϰcss»áÓкܴó°ïÖúµÄ¡£
1¡¢ÍêȫʹÓÃdiv¡¢spanºÍcssÖÆ×÷µÄÊý¾Ýͼ±í¡£
2¡¢ÓкܶàÓô¿cssÖÆ×÷µÄÊý¾Ýͼ±í£¬ÎҸоõÕâ¸öÊÇ×öµÄ×îÆ¯ÁÁµÄÒ»¸ö¡£
3¡¢Õâ¸öÏßÐÎÊý¾Ýͼ±íÍêÈ«»ùÓÚhtmlºÍcssÖÆ×÷µÄ£¬Ã»ÓÐÓ¦ÓÃjs¡£ÕâÑùµÄͼͼ±í¼ÓÔØ¿ì£ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ