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

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

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

CSSÔÚMyEclipseÏÂÎÞ·¨ÔØÈëÎÊÌâ¡£

ÔÚJSPÒ³ÃæÉϼÓÈë
<%String path = request.getContextPath();%>
<link  href="<%=path%>/css/style.css" rel="stylesheet" type="text/css">
ÏÂÁз½Ê½Ã²ËƲ»ÐУº
<link  href="../css/style.css" rel="stylesheet" type="text/css">
<link  href="../../css/style.css" rel ......

CSS³£Óü¼ÇɽéÉÜ

1. CSS×ÖÌ嶨Òå¼òд¹æÔò
Ò»°ãµÄд·¨»áÊÇÕâÑù£º
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
¶øÊµ¼ÊÉÏÄã¿ÉÒÔÓøü¼ò½àµÄд·¨£º
font: bold italic small-caps 1em/1.5em verdana,sans-serif
ÊDz»ÊǸüʡʣ¿²»¹ýʹÓÃÕâ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ