CSSÑùʽÎļþÓÅ»¯ ¸üÕû½à¶øÇåÎú
CSS¼òд¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆÎªCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙ
CSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö×¶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»
¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶӯäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òд¼¼ÇÉ£¬ËüÃÇÆäʵÊÇCSS×î³£ÓõÄд·¨£¬µ«ÊÇÌ«¶àµÄÈËʹÓÃDreamweaverÕâÖÖËù
¼û¼´ËùµÃÈí¼þÀ´±àдCSS£¬Ê¹µÃ´úÂë¹ýÓÚÓ·Öס£²»¹ýû¹ØÏµ£¬¿´¹ý±¾ÎÄÖ®ºó£¬ÄãÒ»ÄÜÄÜÕÆÎÕCSS´úÂëÓÅ»¯µÄ¼¼
ÇÉ£¬½ñºóÈÃÄãµÄÿһ¸öCSSÑùʽ±í¶¼¿´ÆðÀ´Õû½à¶ø¼ò¶Ì°É¡£
¡¡¡¡ÊôÐÔֵΪ0£¬²»±ØÌí¼Óµ¥Î»
¡¡¡¡ÊéдÔÔòÊÇÈç¹ûCSSÊôÐÔֵΪ0£¬ÄÇôÄã²»±ØÎªÆäÌí¼Óµ¥Î»(Èç:px/em)£¬Äã¿ÉÄÜ»áÕâÑùд:
¡¡¡¡padding: 10px 5px 0px 0px;
¡¡¡¡ÊÔÊÔÕâÑù°É:
¡¡¡¡padding: 10px 5px 0 0;
¡¡¡¡ÒƳýÑ¡ÔñÆ÷
¡¡¡¡Ñ¡ÔñÆ÷ÊÇÄãÔÚÎªÒ»Ð©ÔªËØÓ¦ÓÃCSSÑùʽʱµÄ»ù±¾·½·¨£¬±ÈÈçh1, h2, h2, div, strong, pre, ul, olµÈ
µÈ…Èç¹ûÄãʹÓÃÁËclass(.ÀàÃû)»òID(#idÃû),ÄÇô¾Í²»ÓÃÔÙÔÚÉùÃ÷CSSʱ°üº¬Ñ¡ÔñÆ÷ÁË¡£
¡¡¡¡div#logowrap
¡¡¡¡³¢ÊÔÈÓµô¶àÓàµÄÑ¡ÔñÆ÷°É:
¡¡¡¡#logowrap
¡¡¡¡ÔÚÕâ¸öÀý×ÓÖÐËùνµÄÄǸöÑ¡ÔñÆ÷¾ÍÊÇdiv
¡¡¡¡*×ܰ®ºÍÄã¿ªÍæÐ¦
¡¡¡¡ÒªÃ÷ÖǵÄʹÓÃ*¶ø±ÜÃâËüÔÚÕû¸öCSSÑùʽ±íÖÐÂÒ¿ªÍæÐ¦£¬*ÊǸöͨÅä·û£¬Äã¿ÉÒÔʹÓÃËüÀ´ÎªÄãµÄÉè¼Æ²¿·Ö
»òÈ«²¿½øÐÐһϵÁÐCSSÉùÃ÷¡£ÀýÈç:
¡¡¡¡* {
¡¡¡¡ margin: 0;
¡¡¡¡}
¡¡¡¡Õâ¸öÉùÃ÷»á½«ËùÓÐÔªËØµÄmarginÖµÉèÖÃΪ0£¬Í¬ÑùµÄ£¬ÎªÁËÑϽ÷Æð¼û£¬Äã¿ÉÒÔ³¢ÊÔÕâÑùÉèÖÃ:
¡¡¡¡#menu * {
¡¡¡¡ margin: 0;
¡¡¡¡}
¡¡¡¡ÕâÑùµÄÉùÃ÷ÊÇÖ¸½«#menuϵÄËùÓÐÔªËØµÄmarginÉèΪ0¡£
¡¡¡¡±³¾°
¡¡¡¡±³¾°(background)ÊôÐÔ¿ÉÄÜ»á°üº¬ÉèÖñ³¾°É«¡¢±³¾°Í¼¡¢±³¾°Í¼µÄλÖúͱ³¾°Í¼Öظ´·½Ê½µÄ²ÎÊý£¬Äã¿É
ÄÜ»áд³É:
¡¡¡¡background-image: url(”logo.png”);
¡¡¡¡background-position: top center;
¡¡¡¡background-repeat: no-repeat;
¡¡¡¡Æäʵ¿ÉÒÔд³É:
¡¡¡¡background: url(logo.png) no-repeat top center;
¡¡¡¡ÑÕÉ«
¡¡¡¡ÑÕÉ«(color)ÊôÐÔÔÚCSSͨ³£Ö¸¶¨ÎªÒ»¸öÊ®Áù½øÖƵÄÖµ,Ò»¸ö#¼Ó6λÊý£¬ËûµÄ¼òд·½Ê½ÊÇÈç¹ûÑÕɫֵÓɳÉ
¶Ô¶ù³öÏÖµÄÈý¶Ô¶øÊý×Ö×é³É£¬Äã¿ÉÒÔÊ¡ÂÔµôû¶ÔÖеÄÒ»¸öÊý×Ö¡£
¡¡¡¡#000000 ¿ÉÒÔд³É #000, #336699 ¿ÉÒÔд³É #369
¡¡¡¡ÕâÖÖ¼òд¼¼ÇÉÖ»ÊÊÓÃÓڳɶԳöÏÖµÄÑÕɫֵ£¬ÆäËüÑÕɫֵ²»ÊÊÓÃÕâÖÖ¼¼ÇÉ£¬±ÈÈç:
Ïà¹ØÎĵµ£º
CSS ºÐÄ£ÐÍ
¡¡¡¡ÍøÒ³Éè¼ÆÖеÄÿ¸öÔªËØ¶¼Êdz¤·½ÐεĺÐ×Ó¡£ºÐ×ӵijߴçÊÇÔõÑù¾«È·¼ÆËãµÄ£¬Çë¿´ÏÂͼ£º
¡¡¡¡
¡¡¡¡Èç¹ûÊÇ Firebug Óû§µÄ»°(»ù±¾ºÍǰ¶ËÓйصͼ»áÓõ½ Firebug °É – ÌǰéÎ÷ºìÊÁ)£¬¾Í»áºÜÊìϤÏÂÃæµÄͼ±íÁË¡£
¡¡¡¡Õâ¸öͼ±íºÜºÃµØÕ¹Ê¾ÁË×÷ÓÃÓÚÒ³ÃæÉÏÈÎÒâºÐ×ÓµÄÊýÖµ¡£
¡¡¡¡
¡¡¡¡×¢ÒâÒÔÉÏÁ½¸öÀý×ÓÖУ¬margi ......
±¾ÎĽ«½²ÊöHTMLºÍCSSµÄ¹Ø¼ü—ºÐ×ÓÄ£ÐÍ(Box model). Àí½âBox modelµÄ¹Ø¼ü±ãÊÇmarginºÍpaddingÊôÐÔ, ¶øÕýÈ·Àí½âÕâÁ½¸öÊôÐÔÒ²ÊÇѧϰÓÃcss²¼¾ÖµÄ¹Ø¼ü.
×¢: Ϊʲô²»·ÒëmarginºÍpadding? ÔÒòÒ», ÔÚººÓïÖв¢Ã»ÓÐÓëÖ®Ïà¶ÔÓ¦µÄ´ÊÓï; ÔÒò¶þ: ¼´Ê¹ÓÐÕâÑùµÄ´ÊÓï, ÓÉÓÚÔÚ±àдcss´úÂëʱ, ±ØÐëʹÓÃmarginºÍpadding, Èç¹ûÎÒÃÇ×ÜÓà ......
1.»ù±¾Óï·¨£º
Ñ¡Ôñ·ûÃû×Ö { ÉùÃ÷; }
Ñ¡Ôñ·ûÃû×ÖÃüÃû¹æÔò£º
CSSÑ¡Ôñ·û¿ÉÒÔʹÓÃÓ¢ÎÄ×ÖĸµÄ´óдÓëСд,Êý×Ö,Á¬×ÖºÅ,Ï»®Ïß,ðºÅ,¾äºÅ.
2.·ÖÀࣺ
ÔÚAndy BuddµÄ¡¶CSS MASTERY¡·£¨ÖÐÒë¡¶¾«Í¨CSS¡·£©ÖУ¬½«CSSÑ¡Ôñ·û·ÖΪ£º³£ÓÃÑ¡Ôñ·û¡¢Í¨ÓÃÑ¡Ôñ·ûºÍ¸ß¼¶Ñ¡Ôñ·û¡£³£ÓÃÑ¡Ôñ·û°üÀ¨£ºÀàÐÍÑ¡Ôñ·û¡¢ÀàÑ¡Ôñ·û¡¢IDÑ¡Ôñ·û¡¢ºó´ ......
¡¡¡¡ÍøÒ³Éè¼ÆÖÐCSS²¼¾ÖÊǺÜÖØÒªµÄ²¿·Ö£¬ÏÂÃæ½éÉܼ¸ÖÖ¼ì²éµ÷ÊÔCSS²¼¾ÖµÄÓÐЧ·½·¨¡£
¡¡¡¡1.¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡2.¼ì²éCSSÊÇ·ñÊéдÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ}µÈ¡£¿ÉÒÔÀûÓà ......
ÔÎĵØÖ·£ºhttp://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Ad ......