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 ÊôÐÔÎªÔªËØÉèÖñ³¾°Í¼Ïñ¡£Ä¬Èϵأ¬±³¾°Í¼ÏñλÓÚÔªËØµÄ×óÉϽǣ¬²¢ÔÚˮƽºÍ´¹Ö±·½ÏòÉÏÖØ¸´¡£
Ïà¹ØÎĵµ£º
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-family:'ËÎÌå';}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,a,span {overflow:hidden;}
table{border-collapse:collapse;border-spacing:0; font-size:12px;}
td { line-height:18px ......
×¢ÒâÊÂÏ
ÁËʵÏÖµ¼º½ÖеÄ×Óµ¼º½ÓëÖ÷µ¼º½ÔÚʵÏÖÊó±ê½»»¥µÄͬʱ£¬±£³ÖÆäÏà¶ÔλÖÃÒ»Ö£¬ÎÒÃÇʹÓÃÁ˶Ôul li{}ʹÓÃÁËposition:relative;ʹÆä¶¨Î»·½Ê½×ªÎªÏà¶Ô¶¨Î»¡£¶ø¶Ôli ul{}¼´×Óµ¼º½²ÉÓÃÁËposition:absolute;Ïà¶ÔÓÚµ¼º½µÄ¾ø¶Ô¶¨Î»·½Ê½£¬ÁËÆäÊó± ......
cssĬÈϵIJ¼¾ÖÊǽ«ÔªËØÒ»¸öÒ»¸öµØÍùÏÂÅÅÁÐÏÂÀ´£¬Èç¹û²»²ÉÈ¡¸¡¶¯£¬½«µ¼ÖÂÒ³Ãæ·Ç³£³¤¡£
ÏÂÃæÎÒÃÇͨ¹ý×öÒ»¸ö³£¼ûµÄÍøÕ¾²¼¾Ö£¬À´ËµÃ÷¸¡¶¯ÊÇÔõôһ»ØÊ¡£
Ï£ÍûµÄЧ¹ûÊÇ:
²½ÖèÒ»¡¢ÏȰѴúÂëдһÏ£¬
Àý£º
htmlÄÚÈÝ£º
<body >
<div id="head">
head
</div>
<div id="content">
c ......