Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

5¸öCSSÊéд¼¼ÇÉ

1. CSS Reset/ÖØÖÃ
ÄãÒ²ÐíÐèÒªÏÈÁ˽âʲôÊÇcssÖØÖá£È»ºóÔõôÑùдcssÖØÖÃÄØ¡£
Äã¿ÉÒÔcopy Eric Meyer Reset, YUI Reset»òÆäËücss reset, µ«Äã½ÓÏÂÀ´Ó¦¸Ã¸ù¾ÝÄãµÄÏîÄ¿¸Ä³ÉÄã×Ô¼ºµÄreset.
²»ÒªÊ¹ÓÃ* { margin: 0; padding: 0; } ¡£ÎÒ¸öÈ˺ܰ®Óã¬Ô­×÷ÕßÌᵽʹÓÃÕâ¾ä²¢²»ÊÊÓÃÒ»Ð©ÔªËØ±ÈÈ絥ѡ°´Å¥¡£²»¹ý°³²©¿ÍÀïÃæÒ²Ã»Óе¥Ñ¡°´Å¥£¬Èç¹ûÓУ¬ÓÖÖØÐ¸øµ¥Ñ¡°´Å¥ÖØÉè¾ÍºÃÁËÂï¡£
2. °´×Öĸ˳ÐòÀ´ÅÅÁÐcss
²»°´×Öĸ˳ÐòÅŵÄ
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
°´×Öĸ˳ÐòÅŵÄ
div#header h1 {
 border-bottom: 1px solid #dedede;
 color: #000;
 font-size: 18px;
 line-height: 24px;
 margin-right: 48px;
 position: relative;
 z-index: 101;
}
ÀíÓÉÊÇÕâÑù¿ÉÒÔ¸üºÃµÄÕÒµ½Ä³¸öÊôÐÔ¡£¸öÈ˾õµÃ»¹ºÃ£¬²î±ðÒ²²»ÊÇÌ«´ó¡£²»¹ýÒ²Ðí»áÊʺÏÄã¡£
3. ¸üºÃµÄ×éÖ¯css½á¹¹
ʹÓÃcss×¢ÊÍÀ´·Ö¸øcss·Ö×飬ÕâÑù½á¹¹Ã÷ÁË£¬Ò²ÓÐÀûÓÚЭͬÉè¼Æ¡£
/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
4. ±£³ÖÒ»ÖÂÐÔ
²»ÒªÎÞÒâÒåµÄÈ¥ÌÖÂÛµ½µ×Ò»¸öÑ¡ÔñÆ÷µÄËùÓÐÊôÐÔдÔÚÒ»ÐУ¬»¹ÊÇÿ¸öÊôÐÔдһÐбȽϺá£Äã×Ô¼º¾õµÃok¾ÍºÃ¡£
iv#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; }
±ÈÈçÎÒ¸öÈ˾Íϲ»¶Ð´ÔÚÒ»ÐУ¬ÒòΪÿÅÅдһÐлáÈÃÕû¸öÎĵµ¸Ð¾õÌ«³¤ÁË£¬ÕÒÆðÀ´²»·½±ã¡£Èç¹ûÄãϲ»¶Ð´Ò»ÐУ¬µ«ÊÇ·¢¸øteamµÄÁíÒ»¸ö£¬Ëûȴϲ»¶Ã¿ÅÅÒ»ÐУ¬ÄÇÔõô°ì£¿ÆäʵºÜ¼òµ¥£¬°ÑcssÄÃÈ¥w3cÑéÖ¤£¬Ëü»áÓÐÒ»·Ý½á¹û£¬»á×Ô¶¯×ª»»³ÉÿÅÅÒ»ÐС£
5. Ïȱê¼Çºócss
Õâ¸öÎÒûÓÐÌ«¿´¶®¡£´ó¸ÅÀí½âÊǶÔhtmlµÄ±ê¼ÇŪºÃºóÔÙдcss»á±È½Ï²»ÈÝÒ׳ö´í¡£±ÈÈçÎÒдһ¸öÒ³Ãæ£¬ÏÈдһ¸ö×î»ù±¾µÄ±ê¼Ç½á¹¹
<body>
     <div id="wrapper">
          <div id="header"><!--end #header-->
          <div id="container">
 &n


Ïà¹ØÎĵµ£º

³ÎÇåDIV+CSSÉè¼ÆµÄÎóÇø


µ±DIV+CSSƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾ÍÒªÖսᣬÂí
ÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄã¶¼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄã¶¼²»ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬Äã
Òª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõà ......

CSS hack£ºIE6£¬IE7£¬firefoxÏÔʾ²»Í¬Ð§¹û

Çø±ð²»Í¬ä¯ÀÀÆ÷µÄCSS hackд·¨£º
Çø±ðIE6ÓëFF£º
       background:orange;*background:blue;
Çø±ðIE6ÓëIE7£º
       background:green !important;background:blue;
Çø±ðIE7ÓëFF£º
      &nb ......

IE6²»½âÎöijЩCSS´úÂëµÄ½â¾ö·½·¨

ÍøÒ³²ÉÓÃÁË UTF-8 ±àÂë¸ñʽ£¬Õâ±¾À´Ã»ÓÐÎÊÌ⣬ÎÊÌâÊÇÍⲿ CSS ÎļþĬÈÏÊÇ ANSI ±àÂ룬²¢Ã»Óб£´æÎª UTF-8 ¸ñʽ¡£¿ÉÄÜÄã»á·¢ÏÖÔÚÒ»°ãÇé¿öÏÂÕâÑùÒ²ÊÇûÓÐÎÊÌâµÄ£¬È»¶øµ± CSS ÎļþÖаüº¬ÓÐÖÐÎÄ×¢ÊÍʱ¾Í¿ÉÄܲ»¾¡ÈçÈËÒâÁË£¡
¡¡¡¡¹À¼ÆÊÇ IE6 °æ±¾ÒÔϵÄä¯ÀÀÆ÷ÔÚ½âÎöÕâ¸ö CSS ÎļþʱÒòΪ±àÂëÎÊÌâ¶øÎÞ·¨ÕýÈ·½âÎö£¬ËùÒԲŻᷢÉú CSS ......

div+css²¼¾Ö±ØÁ˽âµÄÁбíÔªËØul ol li dl dt ddÏê½â

dt ºÍddÖпÉÒÔÔÙ¼ÓÈë ol ul liºÍp£¬Àí½âÕâЩÒÔºó£¬ÔÚʹÓÃdiv²¼¾ÖµÄʱºò£¬»á·½±ãºÜ¶à£¬Æäʵw3cÌṩÁ˺ܶàÔªËØ¸¨Öú²¼¾Ö¶¼ÊÇÓÐËüµÄÓô¦µÄ£¬¶ø²»¾¡ÊÇdiv¡£
¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓã¬ÆäʵºÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ£¬ËüÒ²ÊÇ»áÓ°ÏìËٶȵģ¡
ol ÓÐÐòÁÐ±í¡£
<ol>
<li>......</li>
<li>......</li& ......

css¾­µäÑùʽ

Ò» CSSÎÄ×ÖÊôÐÔ£º
color : #999999; /*ÎÄ×ÖÑÕÉ«*/
font-family : ËÎÌå,sans-serif; /*ÎÄ×Ö×ÖÌå*/ 
font-size : 9pt; /*ÎÄ×Ö´óС*/ 
font-style:itelic; /*ÎÄ×ÖбÌå*/ 
font-variant:small-caps; /*С×ÖÌå*/ 
letter-spacing : 1pt; /*×Ö¼ä¾àÀë*/ 
line-height : 200%; /*ÉèÖÃÐиß*/  ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ