½¨Õ¾Ñ§ - ÇáËɽ¨Õ¾´Ó´Ë¿ªÊ¼£¡

½¨Õ¾Ñ§-¸öÈ˽¨Õ¾Ö¸ÄÏ,ÍøÒ³ÖÆ×÷,ÍøÕ¾Éè¼Æ,ÍøÕ¾ÖÆ×÷½Ì³Ì

µ±Ç°Î»ÖÃ: ½¨Õ¾Ñ§ > ÍøÒ³Éè¼Æ > css½Ì³Ì >

Îå¸ö·½Ãæ´Ù½øÄãд³ö¸ü¼ÓרҵµÄCSS´úÂë

ʱ¼ä:2011-11-11 21:02À´Ô´: ×÷Õß: µã»÷: ´Î
¡¡¡¡Ã¿¸öÈ˶¼¿ÉÒÔ±àдCSS´úÂ룬ÉõÖÁÄãÏÖÔÚÒѾ­ÈÃËüΪÄãµÄÏîÄ¿¹¤×÷ÁË¡£µ«ÊÇCSS»¹¿ÉÒÔ¸üºÃÂð£¿ÓÃÕâÎå¸ö·½Ãæ¸Ä½øÄãµÄCSS£¬»áÈÃÄãÏԵøü¼Óרҵ£¬Ò²ÄÜʹ´úÂëÓкã¡ ¡¡¡¡Ò»¡¢ÖØÖà ¡¡¡¡Ê×ÏÈ£¬ºÜÈÏÕæµÄ¸æËßÄ㣬×ÜÊÇÒªÖØÖÃijЩ·ÖÀà¡£ÎÞÂÛÄãÊÇʹÓà Eric Meyer Reset¡¢YUI Reset£¬»òÕß

¡¡¡¡Ã¿¸öÈ˶¼¿ÉÒÔ±àдCSS´úÂ룬ÉõÖÁÄãÏÖÔÚÒѾ­ÈÃËüΪÄãµÄÏîÄ¿¹¤×÷ÁË¡£µ«ÊÇCSS»¹¿ÉÒÔ¸üºÃÂð£¿ÓÃÕâÎå¸ö·½Ãæ¸Ä½øÄãµÄCSS£¬»áÈÃÄãÏԵøü¼Óרҵ£¬Ò²ÄÜʹ´úÂëÓкã¡

¡¡¡¡Ò»¡¢ÖØÖÃ

¡¡¡¡Ê×ÏÈ£¬ºÜÈÏÕæµÄ¸æËßÄ㣬×ÜÊÇÒªÖØÖÃijЩ·ÖÀà¡£ÎÞÂÛÄãÊÇʹÓà Eric Meyer Reset¡¢YUI Reset£¬»òÕßÄã×Ô¼º±àдµÄÖØÖôúÂ룬ֻҪʹÓþͶÔÁË¡£

¡¡¡¡ËüÄܼܺòµ¥µÄÒÆ³ýËùÓÐÔªËØµÄÌî³ä£¨padding£©ºÍ±ß¾à£¨margin£©£º

¡¡¡¡html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

¡¡¡¡pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

¡¡¡¡Eric Meyer ResetºÍYUI Reset¶¼ÊǷdz£Ç¿´óµÄ£¬µ«ÊǶÔÓÚÎÒ¶øÑÔ£¬ËüÃÇ×ßµÄ̫ԶÁË¡£ÎÒ¾õµÃÄã×îÖÕÐèÒªÖØÖÃÒ»ÇУ¬È»ºóÖØÐ¶¨ÒåËùÓÐÔªËØµÄÊôÐÔ¡£Õâ¾ÍÊÇΪʲôEric MeyerÍÆ¼ö¸üÓÐЧµÄʹÓã¨ÖØÖÃÑùʽ±í£©£¬¶øÄã²»ÒªÖ»ÊÇʹÓÃËûµÄÖØÖÃÑùʽ±í£¬½«ËüÍϷŵ½ÄãµÄÏîÄ¿ÖС£µ÷ÕûËü£¨µÄÖØÖÃÑùʽ±í£©£¬½¨Á¢ÊôÓÚ×Ô¼ºµÄÖØÖÃÑùʽ±í¡£

¡¡¡¡àÞ£¬ÇëֹͣʹÓãº

¡¡¡¡* { margin: 0; padding: 0; }

¡¡¡¡»¨¸ü¶àµÄʱ¼äÈ¥ÖÆ×÷Ëü£¬µ±ÄãÒÆ³ýÁËÌî³ä£¨padding£©ÄãÈÏΪµ¥Ñ¡°´Å¥»á·¢Éúʲô±ä»¯£¿±íµ¥ÔªËØÓÐʱÄܹ»×öЩʱ÷ÖµÄÊÂÇ飬ËùÒÔ×îÓÐЧµÄ·½Ê½¾ÍÊǽ«ËûÃǶÀÁ¢¡£

¡¡¡¡¶þ¡¢ÅÅÐò

¡¡¡¡Ò»¸öСµÄ²âÊÔ£ºÕâ¸öÀý×Ó¾ÍÊÇÒªÈÃÄã˼¿¼ÈçºÎ¸ü¿ìµÄÕÒµ½Óұ߾àÊôÐÔ£¿

¡¡¡¡Example#1

¡¡¡¡div#header h1 {

¡¡¡¡z-index: 101;

¡¡¡¡color: #000;

¡¡¡¡position: relative;

¡¡¡¡line-height: 24px;

¡¡¡¡margin-right: 48px;

¡¡¡¡border-bottom: 1px solid #dedede;

¡¡¡¡font-size: 18px;

¡¡¡¡}

¡¡¡¡Example#2

¡¡¡¡div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}

¡¡¡¡Äã²»ÄܸæËßÎÒExample#2²»Äܸü¿ìµÄÕÒµ½Óұ߾àÊôÐÔ¡£¸ù¾Ý×ÖĸÅÅÐòÄãµÄÔªËØÊôÐÔ¡£Ò»ÖµĴ´½¨ÄãµÄCSS£¬½«°ïÖúÄã½ÚÊ¡»¨·ÑÔÚѰÕÒÒ»¸öÌØÊâÊôÐÔµÄʱ¼ä¡£

¡¡¡¡ÎÒÖªµÀһЩÈËÓÃÕâÑùµÄ·½·¨È¥×éÖ¯´úÂ룬ÆäËûÈËÓÖÓÃÁíÒ»ÖÖ·½·¨È¥×éÖ¯£¬µ«ÊÇÔÚÎҵĹ«Ë¾£¬ÎÒÃÇЭÉÌÒ»ÖÂ×ö³ö¾ö¶¨£¬ËùÓеĴúÂë¶¼½«°´ÕÕ×ÖĸÅÅÐòÀ´×éÖ¯¡£Í¨¹ýÕâÑù×éÖ¯´úÂëÓëÆäËûÈËЭͬ¹¤×÷Ò»¶¨ÊÇÓаïÖúµÄ¡£µ±ÎÒÅöµ½ÊôÐÔûÓа´ÕÕ×ÖĸÅÅÐòµÄ²ãµþÑùʽ±íÎÒÿһ´Î¶¼»áÍËËõ¡£

¡¡¡¡Èý¡¢×éÖ¯

¡¡¡¡ÄãÓ¦¸Ã×éÖ¯ÄãµÄÑùʽ±íÒÔÖÂÏà¹ØµÄÄÚÈÝ¿¿ÔÚÒ»Æð£¬¸ü¼òµ¥µÄÕÒµ½ÏëÒªµÄ¡£Ê¹ÓøüÓÐЧµÄ×¢½â¡£¾Ù¸öÀý×Ó£¬ÕâÊÇÎÒÈçºÎ¹¹ÔìÎҵIJãµþÑùʽ±í£º

¡¡¡¡/*****Reset*****/ÒÆ³ýÔªËØµÄÌî³ä£¨padding£©ºÍ±ß¾à£¨margin£©¡£

¡¡¡¡/*****Basic Elements*****/¶¨Òå»ù±¾ÔªËصÄÑùʽ: body, h1-h6, ul, ol, a, p, µÈ.

¡¡¡¡/*****Generic Classes*****/¶¨Òå¼òµ¥µÄ·ç¸ñ£¬ºÃÏñ¸¡¶¯µÄijһ²à, ÒÆ³ýÔªËØµÄϱ߾à, µÈµ±È»£¬ËüÃǴ󲿷ֶ¼ÓëÎÒÃÇÏ£ÍûµÄÓïÒå²»Ïà¹Ø,µ«ÊÇËüÃÇÊǸßЧ´¦Àí´úÂëËù±ØÐëµÄ¡£

¡¡¡¡/*****Basic Layout*****/¶¨Òå»ù±¾µÄÄ£°å: header, footerµÈ. °ïÖú¶¨ÒåÍøÒ³²¼¾ÖµÄ»ù±¾ÔªËØ

¡¡¡¡/*****Header*****/¶¨ÒåËùÓÐHearderÔªËØ

¡¡¡¡/*****Content*****/¶¨ÒåËùÓÐÄÚÈÝ¿òÄÚµÄÔªËØ

¡¡¡¡/*****Footer*****/¶¨ÒåËùÓÐFooterµÄÔªËØ

¡¡¡¡/*****Etc*****/¶¨ÒåÆäËûµÄÑ¡ÔñÆ÷¡£Í¨¹ý×¢½âºÍ¹éÀàÏàËÆÔªËØµÄ·Ö×飬½«¸ü¿ìµÄÕÒµ½ÄãÏëÒªµÄ¡£

¡¡¡¡ËÄ¡¢Ò»ÖÂÐÔ

¡¡¡¡ÎÞÂÛÄã¾ö¶¨Ê¹ÓÃʲô·½Ê½È¥±àд´úÂ룬±£³ÖÒ»Ö¡£ÎÒÒѾ­¶ÔÈ«²¿·ÅÔÚ1ÐÐVS¶àÐеÄCSS±àд±àд·½Ê½µÄÕùÂ۸е½·¦Î¶ºÍÆ£¾ë¡£ÕâÊDz»ÐèÒªÕù±çµÄ¡£Ã¿¸öÈ˶¼ÓÐ×Ô¼ºµÄ¹Ûµã£¬ËùÒÔÑ¡ÔñÒ»ÖÖÄãϲ»¶µÄ¹¤×÷·½Ê½£¬²¢ÔÚËùÓеÄÑùʽ±íÖб£³ÖÒ»Ö¡£

¡¡¡¡¾ÍÎÒ¸öÈ˶øÑÔ£¬ÎÒ½«Ê¹ÓÃÁ½Õß½áºÏµÄ·½Ê½¡£Èç¹ûÒ»¸öÑ¡ÔñÆ÷³¬¹ýÁË3¸öÊôÐÔ£¬ÎÒ½«½Ø¶ÏËü²ÉÓöàÐеķ½Ê½±àд¡£

¡¡¡¡div#header { float: left; width: 100%; }

¡¡¡¡div#header div.column {

¡¡¡¡border-right: 1px solid #ccc;

¡¡¡¡float: rightright;

¡¡¡¡margin-right: 50px;

¡¡¡¡padding: 10px;

¡¡¡¡width: 300px;

¡¡¡¡}

¡¡¡¡div#header h1 { float: left; position: relative; width: 250px; }

¡¡¡¡ËùÒÔÕÒµ½Äãϲ»¶µÄ¹¤×÷·½Ê½È»ºó±£³ÖÒ»Ö¡£

¡¡¡¡Îå¡¢´ÓÕýÈ·µÄµØ·½¿ªÊ¼

¡¡¡¡ÔÚÍê³É±ê¼ÇÓïÑÔ֮ǰ²»ÒªÈ¥³¢ÊÔ¿¿½üÄãµÄÑùʽ±í¡£

¡¡¡¡µ±ÎÒ×¼±¸·Ö¸îÒ»ÕÅÍøÒ³µÄʱºò£¬´´½¨CSSÎļþ֮ǰ£¬ÎÒÐèÒªÔ¤ÀÀ²¢ÇÒ±ê¼Çbody¿ª±êÇ©µ½bodyµÄ±ÕºÏ±êǩ֮¼äµÄËùÓÐÎĵµ¡£ÎÒ²»»áÔö¼Ó¶îÍâµÄDIV ,ID,»òÕßÀàÑ¡ÔñÆ÷¡£ÎÒ½«»áÌí¼ÓһЩһ°ãµÄDIV£¬¾ÍºÃÏñhearder¡¢content¡¢footer.ÒòΪÎÒÖªµÀÕâЩ¶«Î÷ÊÇÏÖʵ´æÔڵġ£

¡¡¡¡Í¨¹ýÏȱê¼ÇÎĵµ£¬Ä㽫²»»áÅöµ½±¾ÒÑ×¢¶¨µÄdivities1ºÍclassitis2Âé·³!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(Ô­ÎÄδÒ룩¡£

¡¡¡¡ÀûÓÃCSS×ÓÑ¡ÔñÆ÷Ö¸¶¨×ÓÔªËØ£»²»ÒªÖ»ÊÇ»úеµÄ¸øÔªËØÌí¼ÓÀà»òÕßIDÑ¡ÔñÆ÷¡£¼Çס£ºÃ»ÓÐÒ»¸öÁ¼ºÃµÄ¸ñʽ»¯Îĵµ£¨»òÕß±ê¼Ç½á¹¹£©CSSÊÇÎÞ¼ÛÖµµÄ¡£

(ÔðÈα༭£ºadmin)
Ö¯ÃζþάÂëÉú³ÉÆ÷
¶¥Ò»ÏÂ
(0)
0%
²ÈÒ»ÏÂ
(0)
0%
------·Ö¸ôÏß----------------------------
·¢±íÆÀÂÛ
Çë×Ô¾õ×ñÊØ»¥ÁªÍøÏà¹ØµÄÕþ²ß·¨¹æ£¬ÑϽû·¢²¼É«Çé¡¢±©Á¦¡¢·´¶¯µÄÑÔÂÛ¡£
ÆÀ¼Û:
񡀂:
Óû§Ãû: ÑéÖ¤Âë:µã»÷ÎÒ¸ü»»Í¼Æ¬