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¹â±ê¡£ÀýÈ磬µ±Ò»¸ö°´Å¥±»½ûÓÃʱ£¬¹â
Ïà¹ØÎĵµ£º
<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*/   ......
½ñÌìÅöµ½Ò»¸öÎÊÌ⣺ÔõÑù¸ù¾Ý±ê¼ÇµÃÊôÐÔ²»Í¬¶øÉèÖò»Í¬µÄÑùʽ£¿
Ê×ÏÈÏëµ½µÄ£º»ñÈ¡ËùÓбê¼Ç¡¢Æ¥ÅäÊôÐÔ¡¢¸Ä±äÑùʽ¡£¡£¡£
ºöÈ»ÓÖÏëÆðÁËJQueryÖеÄÑ¡ÔñÆ÷£¬ÓÚÊÇjs´úÂë±à³ÌÁËcss´úÂë
tag[attribute=value]{//.......}
css±¾ÉíµÄÑ¡ÔñÆ÷ȷʵ¿ÉÒÔ×öºÜ¶àÊÂÇéµÄ£¬¾ÍÓÖ´ÓÍøÉÏËÑÂÞÁËһЩ£¬±¸Íü¡£
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 ......
ת×Ô£º
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ͼƬÅÜÂíµÆ</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>
<!-- ÕâÀïÊǵÚÒ»¸ö¹Ø¼üµã£¬o ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS±ß¿òÒõÓ°< ......