CSS»ù´¡£ºDIVcss³õѧÕßÐèÒªÒýÆðÖØÊÓµÄ10¸öÎÊÌâÓë¼¼ÇÉ
¡¡DIVcss³õѧÕßÍùÍù¸Ð¾õ×Ô¼ºÓöµ½ºÜ¶àĪÃ÷ÆäÃîµÄÎÊÌ⣬ÆäʵֻÊÇһЩСϸ½ÚûÓÐÒýÆðÖØÊÓ£¬ÔÚ52CSS.comÖУ¬ÓÐ¶àÆªÎÄÕÂÌáÐÑ´ó¼Ò¾ÒýÆðÖØÊÓ£¬ÏÂ
ÃæÂÞÁÐÁË10¸öÎÊÌâÓë¼¼ÇÉ£¬Î¹ʶøÖªÐ¡£
¡¡¡¡Ò»¡¢¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡
¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡¶þ¡¢¼ì²é
CSSÊÇ·ñÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£
CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
¡¡¡¡Èý¡¢È·¶¨´íÎó·¢ÉúµÄλÖÃ
¡¡
¡¡¼ÙÈç´íÎóÓ°ÏìÁËÕûÌå²¼¾Ö£¬Ôò¿ÉÒÔÖð¸öɾ³ýdiv¿é£¬Ö±µ½É¾³ýij¸ödiv¿éºóÏÔʾ»Ö¸´Õý³££¬¼´¿ÉÈ·¶¨´íÎó·¢ÉúµÄλÖá£
¡¡¡¡ËÄ¡¢
ÀûÓÃborderÊôÐÔÈ·¶¨³ö´íÔªËØµÄ²¼¾ÖÌØÐÔ
¡¡¡¡Ê¹ÓÃfloatÊôÐÔ²¼¾ÖÒ»²»Ð¡Ðľͻá³ö´í¡£ÕâÊ±ÎªÔªËØÌí¼ÓborderÊôÐÔ
È·¶¨ÔªËر߽磬´íÎóÔÒò¼´Ë®Âäʯ³ö¡£
¡¡¡¡Îå¡¢floatÔªËØµÄ¸¸ÔªËز»ÄÜÖ¸¶¨clearÊôÐÔ
¡¡
¡¡MacIEϼÙÈç¶ÔfloatµÄÔªËØµÄ¸¸ÔªËØÊ¹ÓÃclearÊôÐÔ£¬ËÄÖܵÄfloatÔªËØ²¼¾Ö¾Í»á»ìÂÒ¡£ÕâÊÇMacIEµÄÎÅÃûµÄbug£¬ÌÈÈô²»ÖªµÀ¾Í»á×ß
Íä·¡£
¡¡¡¡Áù¡¢floatÔªËØÎñ±ØÖ¸¶¨widthÊôÐÔ
¡¡¡¡ºÜ¶àä¯ÀÀÆ÷ÔÚÏÔʾδָ¶¨
widthµÄfloatÔªËØÊ±»áÓÐbug¡£ËùÒÔ²»¹ÜfloatÔªËØµÄÄÚÈÝÈçºÎ£¬Ò»¶¨ÒªÎªÆäÖ¸¶¨widthÊôÐÔ¡£
¡¡¡¡Æß¡¢
floatÔªËØ²»ÄÜÖ¸¶¨marginºÍpaddingµÈÊôÐÔ
¡¡¡¡IEÔÚÏÔʾָ¶¨ÁËmarginºÍpaddingµÄfloat
ÔªËØÊ±ÓÐbug¡£Òò´Ë²»Òª¶ÔfloatÔªËØÖ¸¶¨marginºÍpaddingÊôÐÔ£¨¿ÉÒÔÔÚfloatÔªËØÄÚ²¿Ç¶Ì×Ò»¸ödivÀ´ÉèÖÃmarginºÍ
padding£©¡£Ò²¿ÉÒÔʹÓÃhack·½·¨ÎªIEÖ¸¶¨·Ç·²µÄÖµ¡£
¡¡¡¡°Ë¡¢floatÔªËØµÄ¿í¶ÈÖ®ºÍҪСÓÚ100%
¡¡
¡¡¼ÙÈçfloatÔªËØµÄ¿í¶ÈÖ®ºÍÕýºÃÊÇ100%£¬Ä³Ð©¹ÅÀϵÄä¯ÀÀÆ÷½«²»ÄÜÕý³£ÏÔʾ¡£Òò´ËÇë±£Ö¤¿í¶ÈÖ®ºÍСÓÚ99%¡£
¡¡¡¡¾Å¡¢
ÊÇ·ñÖØÉèÁËĬÈϵÄÑùʽ£¿
¡¡¡¡Ä³Ð©ÊôÐÔÈçmargin¡¢paddingµÈ£¬²»Í¬ä¯ÀÀÆ÷»áÓв»Í¬µÄ½âÊÍ¡£Òò´Ë×îºÃÔÚ¿ª·¢Ç°Ê×ÏȽ«
È«ÌåµÄmargin¡¢paddingÉèÖÃΪ0¡¢ÁбíÑùʽÉèÖÃΪnoneµÈ¡£
¡¡¡¡Ê®¡¢ÊÇ·ñÍü¼ÇÁËдDTD£¿
¡¡
¡¡¼ÙÈçÎÞÂÛÔõÑùµ÷Õû²»Í¬ä¯ÀÀÆ÷ÏÔʾ½á¹û»¹ÊDz»Ò»Ñù£¬ÄÇô¿ÉÒÔ¼ì²éÒ»ÏÂÒ³Ãæ¿ªÍ·ÊDz»ÊÇÍüÁËдDTD¡£
»¹¼ÇµÃÒÔǰÓÐÈËÎʹýÕâ¸öÎÊÌ⣬ËûµÄÍøÒ³ÔÚ»ðºüϺÍIEÏÂÏÔʾ²»Ò»Ñù£¬µ«ÊÇÎļþ
Ïà¹ØÎĵµ£º
ÔÎĵØÖ·£ºhttp://www.devwebpro.com/25-rounded-corners-techniques-with-css/
* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested
CSS techniques even the father of internet Google
also launch the rounded corners style markup
with her Google Ad ......
µ±DIV+CSSƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾Í
ÒªÖսᣬÂíÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄã¶¼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄã¶¼²»
ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬ÄãÒª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõà ......
ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌâ£¬ÌØ±ðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍø£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7 FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÂÒ¿ÉÄܳöÈ¥²»Ïë³öÏÖµÄЧ¹û£¡
ËùÓÐä¯ÀÀÆ÷ ͨÓÃ
height: 100px;
IE6 רÓÃ
_height: 100px;
IE6 רÓÃ
*height: 100px;
IE7 רÓÃ
*+height: 100px;
IE7¡¢FF ¹²ÓÃ
height ......