¡¾Ê®Ì쾫ͨdiv+css²¼¾ÖϵÁн̡̳¿Ö®°Ë£ºCSS²¼¾ÖÈëÃÅ
1.¶¨ÒåDIV
¡¡¡¡·ÖÎöÒ»¸öµäÐ͵͍ÒådivÀý×Ó£º
¡¡¡¡#sample{ MARGIN: 10px 10px 10px 10px;
¡¡¡¡PADDING:20px 10px 10px 20px;
¡¡¡¡BORDER-TOP: #CCC 2px solid;
¡¡¡¡BORDER-RIGHT: #CCC 2px solid;
¡¡¡¡BORDER-BOTTOM: #CCC 2px solid;
¡¡¡¡BORDER-LEFT: #CCC 2px solid;
¡¡¡¡BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
¡¡¡¡COLOR: #666;
¡¡¡¡TEXT-ALIGN: center;
¡¡¡¡LINE-HEIGHT: 150%; WIDTH:60%; }
¡¡¡¡ËµÃ÷ÈçÏ£º
¡¡¡¡²ãµÄÃû³ÆÎªsample£¬ÔÚÒ³ÃæÖÐÓÃ<div id="sample">¾Í¿ÉÒÔµ÷ÓÃÕâ¸öÑùʽ¡£
¡¡¡¡MARGINÊÇÖ¸²ãµÄ±ß¿òÒÔÍâÁôµÄ¿Õ°×£¬ÓÃÓÚÒ³±ß¾à»òÕßÓëÆäËü²ãÖÆÔìÒ»¸ö¼ä¾à¡£"10px 10px 10px 10px"·Ö±ð´ú±í"ÉÏÓÒÏÂ×ó"(˳ʱÕë·½Ïò)Ëĸö±ß¾à£¬Èç¹û¶¼Ò»Ñù£¬¿ÉÒÔËõд³É"MARGIN: 10px;"¡£Èç¹û±ß¾àΪÁ㣬Ҫд³É"MARGIN: 0px;"¡£×¢Ò⣺µ±ÖµÊÇÁãʱ£¬³ýÁËRGBÑÕɫֵ0%±ØÐë¸ú°Ù·ÖºÅ£¬ÆäËûÇé¿öºóÃæ¿ÉÒÔ²»¸úµ¥Î»"px"¡£MARGINÊÇ͸Ã÷ÔªËØ£¬²»Äܶ¨ÒåÑÕÉ«¡£
¡¡¡¡PADDINGÊÇÖ¸²ãµÄ±ß¿òµ½²ãµÄÄÚÈÝÖ®¼äµÄ¿Õ°×¡£ºÍmarginÒ»Ñù£¬·Ö±ðÖ¸¶¨ÉÏÓÒÏÂ×ó±ß¿òµ½ÄÚÈݵľàÀë¡£Èç¹û¶¼Ò»Ñù£¬¿ÉÒÔËõ³É"PADDING:0px"¡£µ¥¶ÀÖ¸¶¨×ó±ß¿ÉÒÔд³É"PADDING-LEFT: 0px;"¡£PADDINGÊÇ͸Ã÷ÔªËØ£¬²»Äܶ¨ÒåÑÕÉ«¡£
¡¡¡¡BORDERÊÇÖ¸²ãµÄ±ß¿ò£¬"BORDER-RIGHT: #CCC 2px solid;"ÊǶ¨Òå²ãµÄÓұ߿òÑÕɫΪ"#CCC"£¬¿í¶ÈΪ"2px"£¬ÑùʽΪ"solid"Ö±Ïß¡£
¡¡¡¡Èç¹ûÒªÐéÏßÑùʽ¿ÉÒÔÓÃ"dotted"¡£
¡¡¡¡BACKGROUNDÊǶ¨Òå²ãµÄ±³¾°¡£·Ö2¼¶¶¨Ò壬Ïȶ¨ÒåͼƬ±³¾°£¬²ÉÓÃ"url(../images/bg_logo.gif)"À´Ö¸¶¨±³¾°Í¼Æ¬Â·¾¶£»Æä´Î¶¨Òå±³¾°É«"#FEFEFE"¡£"no-repeat"Ö¸±³¾°Í¼Æ¬²»ÐèÒªÖØ¸´£¬Èç¹ûÐèÒªºáÏòÖØ¸´ÓÃ"repeat-x",×ÝÏòÖØ¸´ÓÃ"repeat-y",ÖØ¸´ÆÌÂúÕû¸ö±³¾°ÓÃ"repeat"¡£ºóÃæµÄ"right bottom;"ÊÇÖ¸±³¾°Í¼Æ¬´ÓÓÒϽǿªÊ¼¡£Èç¹ûûÓб³¾°Í¼Æ¬¿ÉÒÔÖ»¶¨Òå±³¾°É«BACKGROUND: #FEFEFE
¡¡¡¡COLORÓÃÓÚ¶¨Òå×ÖÌåÑÕÉ«£¬ÉÏÒ»½ÚÒѾ½éÉܹý¡£
¡¡¡¡TEXT-ALIGNÓÃÀ´¶¨Òå²ãÖеÄÄÚÈÝÅÅÁз½Ê½£¬center¾ÓÖÐ,left¾Ó×ó,right¾ÓÓÒ¡£
¡¡¡¡LINE-HEIGHT¶¨ÒåÐиߣ¬150%ÊÇÖ¸¸ß¶ÈΪ±ê×¼¸ß¶ÈµÄ150%£¬Ò²¿ÉÒÔд×÷£ºLINE-HEIGHT:1.5»òÕßLINE-HEIGHT:1.5em£¬¶¼ÊÇÒ»ÑùµÄÒâ˼¡£
¡¡¡¡WIDTHÊǶ¨Òå²ãµÄ¿í¶È£¬¿ÉÒÔ²ÉÓù̶¨Öµ£¬ÀýÈç500px£¬Ò²¿ÉÒÔ²ÉÓðٷֱȣ¬ÏóÕâÀïµÄ"60%"¡£Òª×¢ÒâµÄÊÇ:Õâ¸ö¿í¶È½ö½öÖ¸ÄãÄÚÈݵĿí¶È£¬²»°üº¬margin,borderºÍpadding¡£µ«ÔÚÓÐЩä¯ÀÀÆ÷Öв»ÊÇÕâô¶¨ÒåµÄ£¬ÐèÒªÄã¶àÊÔÊÔ¡£
¡¡¡¡2.CSS2ºÐÄ£ÐÍ
¡¡¡¡×Ô
Ïà¹ØÎĵµ£º
ÉùÃ÷£º±¾ÎÄת×Ôwww.52css.com
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö±ÔÚÓà ......
CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔÀí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ......
.box128{
width:128px;
height:128px;
text-align: center;
vertical-align:middle;
display:table-cell !important;
display:block;
border:1px solid #DDD;
  ......
µÚÈý²½ÊǶ¨ÒåÄãµÄÓïÑÔ±àÂ룬ÀàËÆÕâÑù£º
¡¡¡¡<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
ΪÁ˱»ä¯ÀÀÆ÷ÕýÈ·½âÊͺÍͨ¹ýW3C´úÂëУÑ飬ËùÓеÄXHTMLÎĵµ¶¼±ØÐëÉùÃ÷ËüÃÇËùʹÓõıàÂëÓïÑÔ£¬ÎÒÃÇÒ»°ãʹÓÃgb2312(¼òÌåÖÐÎÄ)£¬ÖÆ×÷¶à¹úÓïÑÔÒ³ÃæÒ²ÓпÉÄÜÓÃUnicode¡¢ISO-8859-1µÈ£¬¸ù¾ÝÄãµÄÐ ......