ûÏëµ½µÄ¡¢²»³£ÓõÄÈý¸ö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;
}
Ïà¹ØÎĵµ£º
ID.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="ID.css"?>
<bookdetail>
<book class="A" id="B1">
<author>²ÜÑ©ÇÛ</author>
<title>ºìÂ¥ÃÎ</title>
<price>60.00</price>
</book>
<book class="A ......
¶¯»»ÐÐÎÊÌâ,Õý³£×Ö·ûµÄ»»ÐÐÊDZȽϺÏÀíµÄ,¶øÁ¬ÐøµÄÊý×ÖºÍÓ¢ÎÄ×Ö·û³£³£½«ÈÝÆ÷³Å´ó,ͦÈÃÈËÍ·ÌÛ,ÏÂÃæ½éÉܵÄÊÇCSSÈçºÎʵÏÖ»»Ðеķ½·¨
¶ÔÓÚdiv,pµÈ¿é¼¶ÔªËØ
Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö)ÔªËØÓµÓÐĬÈϵÄwhite-space:normal,µ±¶¨ÒåµÄ¿í¶ÈÖ®ºó×Ô¶¯»»ÐÐ
html
<
id="wrap">Õý³£ÎÄ×ֵĻ»ÐÐ(ÑÇÖÞÎÄ×ֺͷÇÑÇÖÞÎÄ×Ö) ......
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ÎÞ±êÌâÒ³</title>
<LINK href="../css/skin1.css" mce_href="css/skin1.css" rel="stylesheet" type="text/css">
<mce:script language="JavaScript" type="text/javascript"><!--
function changeSkin(n ......
Css¶¨ÖÆDrupalÖ÷Ìâ·ç¸ñ
¡¡¡¡“Ö÷Ìâ”ÊÇDrupalÕ¾µãµÄ»ù±¾ÍâòºÍ¸Ð¾õ¡£ÓÐʱһ¸öÌض¨µÄÕ¾µã»á°²×°²»Ö¹Ò»¸öµÄÖ÷Ìâ¡£Èç¹ûÕ¾µã¹ÜÀíÔ±ÌṩÁ˶à¸öÖ÷Ì⣬Äã¿ÉÒÔΪÄãµÄÕʺÅÑ¡ÔñÄãϲ»¶µÄĬÈÏÖ÷Ìâ¡£
¡¡¡¡DrupalµÄ¹Ù·½Õ¾µãÌṩÁËÐí¶àÖ÷Ìâ·ç¸ñ£¬¾ßÌå¼û£º
¡¡¡¡http://drupal.org/project/Themes
¡¡¡¡ÆäÖУ¬SpreadfirefoxÊÇÎ ......
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£©
JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......