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\"£¾
Ïà¹ØÎĵµ£º
1.idÑ¡ÔñÆ÷
idÑ¡ÔñÆ÷µÄÃüÃûÓ¦¼á³ÖÌåÏÖÎĵµµÄ½á¹¹ºÍλÖá£
Èç:#header¡¢#footer¡¢#left µÈ
2.classÑ¡ÔñÆ÷
classÑ¡ÔñÆ÷µÄÃüÃûÓ¦¸ÃÌåÏÖÃû³ÆµÄÑùʽÃèÊöÐÔ¡£
È磺.red¡¢.underline µÈ
3.¶ÔÓÚÄ£¿éµÄÍâΧ½á¹¹ÔªËØ×îºÃÓÃidÊôÐÔ£¬ÄÚ²¿ÔªËØ¿ÉÒÔ¶¨ÒåclassÊôÐÔ£¬
ÒòΪÍâΧµÄ½á¹¹Ò»°ãʽΨһµÄ¡£¶øÄÚ²¿µÄÔªËØ¿ÉÄÜ»á³öÏÖÖØ¸´¡£
ÁíÍ ......
ul ol li dl dt dd¶¼ÊÇDIV+CSS×öÍøÒ³³¤ÓõĶ«Î÷,Ï൱ÓÚÒ»¿ÃÊ÷µÄÊ÷¼¼,ÏÂÃæ¾ÍÁ˽âÒ»ÏÂÕâЩ¶«Î÷µÄÈ«ÌåÓ÷¨,±¾ÈËÓÃdd,dt,dlÓõúÜÉÙ,¶®µÃ½áºÏʹÓöÔ×ö¼Ü¹¹ÊǺÜÓкô¦µÄŶ!
DIV
CSSÍøÒ³²¼¾ÖÖг£ÓõÄÁбíÔªËØul ol li dl dt ddÊÍÒ壬¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol
ÓÐÐòÁÐ±í¡£
<ol>
<li> ......
1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
2. ¼ì²éCSSÊÇ·ñÕýÈ·
¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ
¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
3. È·¶¨´íÎó ......
1.positionµÄabsoluteÊôÐÔ±íʾ¸Ã¿éÒѾÍêÈ«ÍÑÀëÎı¾Á÷ÁË¡£Ò²¾ÍÊDz»ÔÙÕ¼ÓÿռäλÖÃ
¡£ÍêÈ«¿¿top,button,right,leftÀ´½øÐж¨Î»¡£
¡¡Õâ¸ö±ØÐëÄܹ»ÍêÈ«Àí½â¡£Í¬Ê±Îª¼õÉÙ´íÎóÔÚÉèÖÃabsoluteºó£¬Ò»¶¨ÖÁÉÙÖ¸¶¨top,buttom,right,leftÖеÄÒ»¸ö¡£
2.Èç¹û¿éÉèÖÃÁËabsoluteÊôÐÔ£¬Æä¶¨Î»µÄÔµãºÍ¸¸¿éµÄpositionÓйء£
¡¡Èç¹û¸¸¿éÉèÖà ......
½éÓÚ´¿´âCSSµÄÎÞͼƬԲ½ÇʵÔÚÊÇ´úÂëÌ«ÂÒ£¬»¹ÊÇÇãÏòÓÚÀûÓÃͼƬ½áºÏCSSÀ´×Ô×öÔ²½Ç£»
£¨1£©¸ß¿í½Ô×ÔÊÊÓ¦£º
.roundedcornr_box_510746 {
background: #dddddd url(roundedcornr_510746_grad.gif) repeat top left;width:300px;
}
.roundedcornr_top_510746 div {
background:transparent url(r ......