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

10¸ö DIV+CSS ÐèҪעÒâµÄÎÊÌâ

1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¼´Ê¹ÊÇÀÏÊÖÒ²¾­³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
2. ¼ì²éCSSÊÇ·ñÕýÈ·
¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ
¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
3. È·¶¨´íÎó·¢ÉúµÄλÖÃ
¼ÙÈç´íÎóÓ°ÏìÁËÕûÌå²¼¾Ö£¬Ôò¿ÉÒÔÖð¸öɾ³ýdiv¿é£¬Ö±µ½É¾³ýij¸ödiv¿éºóÏÔʾ»Ö¸´Õý³££¬¼´¿ÉÈ·¶¨´íÎó·¢ÉúµÄλÖá£
4. ÀûÓÃborderÊôÐÔÈ·¶¨³ö´íÔªËØµÄ²¼¾ÖÌØÐÔ
ʹÓÃfloatÊôÐÔ²¼¾ÖÒ»²»Ð¡Ðľͻá³ö´í¡£ÕâÊ±ÎªÔªËØÌí¼ÓborderÊôÐÔÈ·¶¨ÔªËر߽磬´íÎóÔ­Òò¼´Ë®Âäʯ³ö¡£
5. floatÔªËØµÄ¸¸ÔªËز»ÄÜÖ¸¶¨clearÊôÐÔ
MacIEϼÙÈç¶ÔfloatµÄÔªËØµÄ¸¸ÔªËØÊ¹ÓÃclearÊôÐÔ£¬ËÄÖܵÄfloatÔªËØ²¼¾Ö¾Í»á»ìÂÒ¡£ÕâÊÇMacIEµÄÎÅÃûµÄbug£¬ÌÈÈô²»
ÖªµÀ¾Í»á×ßÍä·¡£
6. floatÔªËØÎñ±ØÖ¸¶¨widthÊôÐÔ
ºÜ¶àä¯ÀÀÆ÷ÔÚÏÔʾδָ¶¨widthµÄfloatÔªËØÊ±»áÓÐbug¡£ËùÒÔ²»¹ÜfloatÔªËØµÄÄÚÈÝÈçºÎ£¬Ò»¶¨ÒªÎªÆäÖ¸¶¨widthÊôÐÔ¡£
ÁíÍâÖ¸¶¨ÔªËØÊ±¾¡Á¿Ê¹ÓÃem¶ø²»ÊÇpx×öµ¥Î»¡£
7. floatÔªËØ²»ÄÜÖ¸¶¨marginºÍpaddingµÈÊôÐÔ
IEÔÚÏÔʾָ¶¨ÁËmarginºÍpaddingµÄfloatÔªËØÊ±ÓÐbug¡£Òò´Ë²»Òª¶ÔfloatÔªËØÖ¸¶¨marginºÍpaddingÊôÐÔ£¨¿ÉÒÔÔÚfloat
ÔªËØÄÚ²¿Ç¶Ì×Ò»¸ödivÀ´ÉèÖÃmarginºÍpadding£©¡£Ò²¿ÉÒÔʹÓÃhack·½·¨ÎªIEÖ¸¶¨·Ç·²µÄÖµ¡£
8. floatÔªËØµÄ¿í¶ÈÖ®ºÍҪСÓÚ100%
¼ÙÈçfloatÔªËØµÄ¿í¶ÈÖ®ºÍÕýºÃÊÇ100%£¬Ä³Ð©¹ÅÀϵÄä¯ÀÀÆ÷½«²»ÄÜÕý³£ÏÔʾ¡£Òò´ËÇë±£Ö¤¿í¶ÈÖ®ºÍСÓÚ99%¡£
9. ÊÇ·ñÖØÉèÁËĬÈϵÄÑùʽ£¿
ijЩÊôÐÔÈçmargin¡¢paddingµÈ£¬²»Í¬ä¯ÀÀÆ÷»áÓв»Í¬µÄ½âÊÍ¡£Òò´Ë×îºÃÔÚ¿ª·¢Ç°Ê×ÏȽ«È«ÌåµÄmargin¡¢paddingÉèÖÃΪ
0¡¢ÁбíÑùʽÉèÖÃΪnoneµÈ¡£
10. ÊÇ·ñÍü¼ÇÁËдDTD£¿
¼ÙÈçÎÞÂÛÔõÑùµ÷Õû²»Í¬ä¯ÀÀÆ÷ÏÔʾ½á¹û»¹ÊDz»Ò»Ñù£¬ÄÇô¿ÉÒÔ¼ì²éÒ»ÏÂÒ³Ãæ¿ªÍ·ÊDz»ÊÇÍüÁËдÏÂÃæÕâÐÐDTD£º
£¼!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\"£¾


Ïà¹ØÎĵµ£º

CSS¶¨Î»

1.¶¨Î»µÄ¶¨Òå
CSSÖж¨Î»ÓÃposition:static|relative|absolute|fixedÀ´ÊµÏÖ
    static:1.Õý³£Á÷ÏÔʾ£»2.²»ÄÜͨ¹ýz-index½øÐвãµþ·Ö¼¶£»3.¿ÉÉèÖÃwidth,height£»4.ÉèÖÃtop,right,bottom,leftÎÞЧ
    relative:1.²»ÍÑÀëÎĵµÁ÷£¬²Î¿¼×ÔÉíµÄ¾²Ì¬Î»Öã¬Í¨¹ýtop,right,bottom,left½øÐ ......

CSSÍâ²ãBOX×Ô¶¯¼ÆËã¸ß¶ÈÎÊÌâ

¸ù¾ÝW3C¶¨Ò壬ûÓÐfloatÊôÐÔµÄÍâ²ãbox²»»á×Ô¶¯¼ÆËã¸ß¶È£¬Òª¼ÆËã¸ß¶È£¬±ØÐëÔÚÄÚ²ã×îºóÒ»¸öbox¼ÓÈëclear:both¡£
Opera¡¢netscape¡¢mozillaµÈ²»»á¼ÆËãÍâ²ãbox¸ß¶È£¬µ«ÊÇ΢Èíie6»á×Ô¶¯¼ÆËãÍâ²ã¸ß¶È¡£±ÈÈ磺
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran ......

CSS·ÂÌÔ±¦Ê×Ò³µ¼º½Ìõ²¼¾ÖЧ¹û

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAO BAO TEST 2&l ......

CSSÑ¡ÔñÆ÷

һЩÐÂÊÖÅóÓѶÔÑ¡ÔñÆ÷Ò»Öª°ë½â£¬²»ÖªµÀÔÚʲôÇé¿öÏÂÔËÓÃʲôÑùµÄÑ¡ÔñÆ÷£¬ÕâÊÇÒ»¸ö±È½ÏÍ·ÌÛµÄÎÊÌ⣬Õë¶ÔÐÂÊÖÅóÓÑ£¬¶ÔCSSÑ¡ÔñÆ÷×÷һЩ¼òµ¥µÄ˵Ã÷£¬Ï£ÍûÄܶԴó¼ÒµÄѧϰ¹¤×÷ÓÐÒ»¶¨µÄ°ïÖú£¬¸ü¶àµÄCSS֪ʶÇë²Î¿¼Webjx.comµÄÆäËûÎÄÕ¡£
׼ȷ¶ø¼ò½àµÄÔËÓÃCSSÑ¡ÔñÆ÷»á´ïµ½·Ç³£ºÃµÄЧ¹û¡£ÎÒÃDz»±ØÍ¨Æª¸øÃ¿Ò»¸öÔªËØ¶¨ÒåÀࣨclass£©»ò ......

¹ØÓÚcssÑùʽѡÔñÆ÷

1.idÑ¡ÔñÆ÷
idÑ¡ÔñÆ÷µÄÃüÃûÓ¦¼á³ÖÌåÏÖÎĵµµÄ½á¹¹ºÍλÖá£
Èç:#header¡¢#footer¡¢#left µÈ
2.classÑ¡ÔñÆ÷
classÑ¡ÔñÆ÷µÄÃüÃûÓ¦¸ÃÌåÏÖÃû³ÆµÄÑùʽÃèÊöÐÔ¡£
È磺.red¡¢.underline µÈ
3.¶ÔÓÚÄ£¿éµÄÍâΧ½á¹¹ÔªËØ×îºÃÓÃidÊôÐÔ£¬ÄÚ²¿ÔªËØ¿ÉÒÔ¶¨ÒåclassÊôÐÔ£¬
ÒòΪÍâΧµÄ½á¹¹Ò»°ãʽΨһµÄ¡£¶øÄÚ²¿µÄÔªËØ¿ÉÄÜ»á³öÏÖÖØ¸´¡£
ÁíÍ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ