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
Ïà¹ØÎĵµ£º
Ò».ʹÓÃcssËõд
ʹÓÃËõд¿ÉÒÔ°ïÖú¼õÉÙÄãCSSÎļþµÄ´óС£¬¸ü¼ÓÈÝÒ×ÔĶÁ¡£cssËõдµÄÖ÷Òª¹æÔòÇë²Î¿´¡¶³£ÓÃcssËõдÓï·¨×ܽᡷ£¬ÕâÀï
¾Í²»Õ¹¿ªÃèÊö¡£
¶þ.Ã÷È·¶¨Ò嵥룬³ý·ÇֵΪ0
Íü¼Ç¶¨Òå³ß´çµÄµ¥Î»ÊÇCSSÐÂÊÖÆÕ±éµÄ´íÎó¡£ÔÚHTMLÖÐÄã¿ÉÒÔֻдwidth="100"£¬µ«ÊÇÔÚCSSÖУ¬Äã±ØÐë¸øÒ»¸ö׼ȷµÄµ¥
룬±ÈÈç:width: 100px width: ......
ÔÚµ±½ñweb2.0ʱ´ú,ÔÚÉè¼ÆÍøÒ³µÄʱºò´ó¼Ò¶¼»áʹÓÃdiv+css½øÐв¼¾Ö,Óеã¾Í²»Óöà˵ÁË,×ÔÈ»ÓкܶàºÃ´¦ÁË,ÖÁÉÙ»á±ÈÓÃtable²¼¾ÖÉÙЩ´úÂë,¶øÓÃdiv²¼¾ÖÒ²ÓÐËûÃǵIJ»·½±ãÖ®´¦,¾ÍÊDZȽϸ´ÔÓ,ÓÈÆäÊǶà¸ödivÔÚÒ»ÐÐÏÔʾ,¶à¸öä¯ÀÀÆ÷¼æÈݵȵÈ,ËùÒÔ³õѧÕß»¹ÊǾ¡Á¿ÓÃtable²¼¾Ö,´ýÊìÁ·ÁËÔÚÓÃdiv.
ÏÖÔÚ˵µÄÊÇDIV+CSSÖÐclear:bothµÄ×÷ÓÃ,ÏÈ¿´ ......
ËäÈ»CSSÑùʽµÄѧϰÐèÒªÎÒÃǶ¯ÊÖ¶àʵ¼ù£¬ÐèÒª¶à×ö°¸Àý£¬Ë¼ÖÂ˼¿¼£¬µ«ÓÐʱºò×¢Òâ×ÊÁϵÄÊÕ¼¯ÓëÕûÀíÒ²ÊǷdz£ÖØÒªµÄ£¬ÔÚʵ¼Ê¿ª·¢ÖÐÍùÍù»áÆðµ½Ê°빦±¶µÄЧ¹û¡£ÔÚwww.phpq.netµÄÎĵµÖУ¬Ò²ÌṩÁ˷ḻµÄÄÚÈÝ¡£ÏÂÃæһЩ¹ØÓÚ°´Å¥¡¢Îı¾¿ò¡¢±íµ¥µÄ³£ÓÃCSSÑùʽ¡£´ó¼Ò¿ÉÒԲο¼¡£
Ò»¡¢°´Å¥Ñùʽ
.buttoncss {
font-family: "tahoma", ......
1.´ó´óËõ¼õÒ³Ãæ´úÂ룬Ìá¸ßÒ³Ãæä¯ÀÀËÙ¶È,Ëõ¼õ´ø¿í³É±¾;
2.½á¹¹ÇåÎú£¬ÈÝÒ×±»ËÑË÷ÒýÇæËÑË÷µ½£¬ÌìÉúÓÅ»¯ÁËseo
3.Ëõ¶Ì¸Ä°æʱ¼ä¡£Ö»Òª¼òµ¥µÄÐ޸ļ¸¸öCSSÎļþ¾Í¿ÉÒÔÖØÐÂÉè¼ÆÒ»¸öÓгɰÙÉÏǧҳÃæµÄÕ¾µã¡£
4.Ç¿´óµ ......