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ƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾ÍÒªÖսᣬÂí
ÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄã¶¼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄã¶¼²»ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬Äã
Òª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõà ......
Çø±ð²»Í¬ä¯ÀÀÆ÷µÄCSS hackд·¨£º
Çø±ðIE6ÓëFF£º
background:orange;*background:blue;
Çø±ðIE6ÓëIE7£º
background:green !important;background:blue;
Çø±ðIE7ÓëFF£º
&nb ......
ÍøÒ³²ÉÓÃÁË UTF-8 ±àÂë¸ñʽ£¬Õâ±¾À´Ã»ÓÐÎÊÌ⣬ÎÊÌâÊÇÍⲿ CSS ÎļþĬÈÏÊÇ ANSI ±àÂ룬²¢Ã»Óб£´æÎª UTF-8 ¸ñʽ¡£¿ÉÄÜÄã»á·¢ÏÖÔÚÒ»°ãÇé¿öÏÂÕâÑùÒ²ÊÇûÓÐÎÊÌâµÄ£¬È»¶øµ± CSS ÎļþÖаüº¬ÓÐÖÐÎÄ×¢ÊÍʱ¾Í¿ÉÄܲ»¾¡ÈçÈËÒâÁË£¡
¡¡¡¡¹À¼ÆÊÇ IE6 °æ±¾ÒÔϵÄä¯ÀÀÆ÷ÔÚ½âÎöÕâ¸ö CSS ÎļþʱÒòΪ±àÂëÎÊÌâ¶øÎÞ·¨ÕýÈ·½âÎö£¬ËùÒԲŻᷢÉú CSS ......
dt ºÍddÖпÉÒÔÔÙ¼ÓÈë ol ul liºÍp£¬Àí½âÕâЩÒÔºó£¬ÔÚʹÓÃdiv²¼¾ÖµÄʱºò£¬»á·½±ãºÜ¶à£¬Æäʵw3cÌṩÁ˺ܶàÔªËØ¸¨Öú²¼¾Ö¶¼ÊÇÓÐËüµÄÓô¦µÄ£¬¶ø²»¾¡ÊÇdiv¡£
¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓã¬ÆäʵºÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ£¬ËüÒ²ÊÇ»áÓ°ÏìËٶȵģ¡
ol ÓÐÐòÁÐ±í¡£
<ol>
<li>......</li>
<li>......</li& ......
Ò» CSSÎÄ×ÖÊôÐÔ£º
color : #999999; /*ÎÄ×ÖÑÕÉ«*/
font-family : ËÎÌå,sans-serif; /*ÎÄ×Ö×ÖÌå*/
font-size : 9pt; /*ÎÄ×Ö´óС*/
font-style:itelic; /*ÎÄ×ÖбÌå*/
font-variant:small-caps; /*С×ÖÌå*/
letter-spacing : 1pt; /*×Ö¼ä¾àÀë*/
line-height : 200%; /*ÉèÖÃÐиß*/
......