css:divÊôÐÔÏê½â
margin£º²ãµÄ±ß¿òÒÔÍâÁôµÄ¿Õ°×
background-color£º±³¾°ÑÕÉ«
background-image£º±³¾°Í¼Æ¬
padding£º²ãµÄ±ß¿òµ½²ãµÄÄÚÈÝÖ®¼äµÄ¿Õ°×
border£º±ß¿ò
content£ºÄÚÈÝ
²½ÖèÒ»¡¢
·ÖÎöÒ»¸öµäÐ͵͍ÒådivÀý×Ó£º
#sample{
margin:10px;
border: #111 10px solid;
padding:10px;
background: url(background.jpg) #ccc no-repeat right bottom;
color: #009;text-align:right;
line-height: 150%;
width:800px;
height:600px;
}
˵Ã÷ÈçÏ£º
¡ñ marginÊÇÖ¸²ãµÄ±ß¿òÒÔÍâÁôµÄ¿Õ°×£¬ÓÃÓÚÒ³±ß¾à»òÕßÓëÆäËü²ãÖÆÔìÒ»¸ö¼ä¾à¡£
Èç¹ûÉÏÓÒÏÂ×ómarginÖµ¾ùΪ10px, Ôò´úÂëΪ:
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
"10px 10px 10px 10px"·Ö±ð´ú±í"ÉÏÓÒÏÂ×óËĸö±ß¾à, ÉÏÃæÒ²¿É¼òдΪ
margin: 10px 10px 10px 10px;
µ±ÉÏÏÂ, ×óÓÒmarginÖµ·Ö±ðÒ»ÖÂ, ¿É¼òдΪ:
margin: 10px 10px;
ǰһ¸ö10px´ú±íÉÏÏÂmarginÖµ, ºóÒ»¸ö10px´ú±í×óÓÒmarginÖµ.
µ±ÉÏÏÂ×óÓÒmarginÖµ¾ùÒ»ÖÂ, ¿É¼òдΪ:
margin: 10px;
Èç¹û±ß¾àΪÁ㣬Ҫд³É"margin: 0px;"¡£×¢Ò⣺µ±ÖµÊÇÁãʱ£¬³ýÁËRGBÑÕɫֵ0%±ØÐë¸ú°Ù·ÖºÅ£¬ÆäËûÇé¿öºóÃæ¿ÉÒÔ²»¸úµ¥Î»"px"¡£
marginÊÇ͸Ã÷ÔªËØ£¬²»Äܶ¨ÒåÑÕÉ«¡£
¡ñ bordetÊÇÖ¸²ãµÄ±ß¿ò£¬ÕâÀﶨÒå²ãµÄ±ß¿òÑÕɫΪ"#111"£¬¿í¶ÈΪ"10px"£¬ÑùʽΪ"solid"Ö±Ïß¡£Èç¹ûÒªÐéÏßÑùʽ¿ÉÒÔÓÃ"dotted"¡£
¡ñ paddingÊÇÖ¸²ãµÄ±ß¿òµ½²ãµÄÄÚÈÝÖ®¼äµÄ¿Õ°×¡£ºÍmarginÒ»Ñù£¬·Ö±ðÖ¸¶¨ÉÏÓÒÏÂ×ó±ß¿òµ½ÄÚÈݵľàÀë¡£Èç¹û¶¼Ò»Ñù£¬¿ÉÒÔËõд³É"padding:0px"¡£µ¥¶ÀÖ¸¶¨×ó±ß¿ÉÒÔд³É"padding-left: 0px;"¡£paddingÊÇ͸Ã÷ÔªËØ£¬²»Äܶ¨ÒåÑÕÉ«¡£ ¸ü
¡ñ backgroundÊǶ¨Òå²ãµÄ±³¾°¡£·Ö2¼¶¶¨Ò壬Ïȶ¨ÒåͼƬ±³¾°£¬²ÉÓÃ"url(../images/bg_logo.gif)"À´Ö¸¶¨±³¾°Í¼Æ¬Â·¾¶£»Æä´Î¶¨Òå±³¾°É«"#FEFEFE"¡£"no-repeat"Ö¸±³¾°Í¼Æ¬²»ÐèÒªÖØ¸´£¬Èç¹ûÐèÒªºáÏòÖØ¸´ÓÃ"repeat-x",×ÝÏòÖØ¸´ÓÃ"repeat-y",ÖØ¸´ÆÌÂúÕû¸ö±³¾°ÓÃ"repeat"¡£ºóÃæµÄ"right bottom;"ÊÇÖ¸±³¾°Í¼Æ¬´ÓÓÒϽǿªÊ¼¡£Èç¹ûûÓб³¾°Í¼Æ¬¿ÉÒÔÖ»¶¨Òå±³¾°É«background: #ccc
¡ñ background-image ÊôÐÔÎªÔªËØÉèÖñ³¾°Í¼Ïñ¡£Ä¬Èϵأ¬±³¾°Í¼ÏñλÓÚÔªËØµÄ×óÉϽǣ¬²¢ÔÚˮƽºÍ´¹Ö±·½ÏòÉÏÖØ¸´¡£
Ïà¹ØÎĵµ£º
/* ½ûÖ¹»»ÐÐ */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* Ç¿ÖÆ»»ÐÐ */
.break{word-break:break-all;}
cssÇ¿ÖÆ²»»»ÐÐ
div{white-space:nowrap;}
css×Ô¶¯»»ÐÐ
div{ word-wrap: break-word; word-break: normal; }
cssÇ¿ÖÆÓ¢Îĵ¥´Ê¶ÏÐÐ
div{word-break:break-all;}
´ó¼Ò¶¼ÖªµÀÁ¬ÐøµÄÓ¢ÎÄ»òÊý×Ö»á°ÑDIV ......
ʲôÇé¿öÏ»á³öÏÖ»»ÐУº
µ±ÔªËØÉèÖÃÁ˹̶¨¸ß¶È£¬²¢ÇÒÎı¾³¤¶È´óÓÚ±êÇ©ÔªËØµÄ¿í¶Èʱ£¬Îı¾»á×Ô¶¯»»ÐС£
cssÇ¿ÖÆ»»ÐÐʹÓÃÑùʽ£ºwhite-space:nowrap;¸ÃÑùʽ´ÓЧ¹ûÉÏÊÇûÓÐä¯ÀÀÆ÷²îÒ죬ʹÓøÃÑùʽºóËùÓÐÎÄ×ÖÔÚieºÍfirefox϶¼ÔÚÒ»ÐÐÄÚÏÔʾ¡£µ«ÊÇÔÚIEÏÂʹÓøÃÊôÐÔÖµºó±êÇ©ÔªËØ¿í¶È»á±»³Å´ó£¬´Ó¶ø¿ÉÄܵ¼ÖÂÔÀ´Ò³Ãæ²¼¾Ö±»ÆÆ»µ¡£
......
×¢ÒâÊÂÏ
ÁËʵÏÖµ¼º½ÖеÄ×Óµ¼º½ÓëÖ÷µ¼º½ÔÚʵÏÖÊó±ê½»»¥µÄͬʱ£¬±£³ÖÆäÏà¶ÔλÖÃÒ»Ö£¬ÎÒÃÇʹÓÃÁ˶Ôul li{}ʹÓÃÁËposition:relative;ʹÆä¶¨Î»·½Ê½×ªÎªÏà¶Ô¶¨Î»¡£¶ø¶Ôli ul{}¼´×Óµ¼º½²ÉÓÃÁËposition:absolute;Ïà¶ÔÓÚµ¼º½µÄ¾ø¶Ô¶¨Î»·½Ê½£¬ÁËÆäÊó± ......
À´×Ô£ºhttp://www.51xflash.com/website/html/200905/01-8904.html
CSS´úÂë: (²åÈëµ½CSSÎļþµÄ×î¶¥¶Ë)
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
»òÕß:
*{filter: Gray;}
HTML´úÂë: (²åÈëµ½Ò³ÃæHTMLÔ´ÂëµÄ<HEAD>ºÍ</HEAD>Ö®¼ä)
<style>html{filter:progid:DXIm ......
cssĬÈϵIJ¼¾ÖÊǽ«ÔªËØÒ»¸öÒ»¸öµØÍùÏÂÅÅÁÐÏÂÀ´£¬Èç¹û²»²ÉÈ¡¸¡¶¯£¬½«µ¼ÖÂÒ³Ãæ·Ç³£³¤¡£
ÏÂÃæÎÒÃÇͨ¹ý×öÒ»¸ö³£¼ûµÄÍøÕ¾²¼¾Ö£¬À´ËµÃ÷¸¡¶¯ÊÇÔõôһ»ØÊ¡£
Ï£ÍûµÄЧ¹ûÊÇ:
²½ÖèÒ»¡¢ÏȰѴúÂëдһÏ£¬
Àý£º
htmlÄÚÈÝ£º
<body >
<div id="head">
head
</div>
<div id="content">
c ......