CSSÇå³ý¸¡¶¯³£Ó÷½·¨Ð¡½á
˵Ã÷£ºÊ¹ÓÃxhtml+css²¼¾Ö¾³£ÐԵػáʹÓõ½float£¬ºÜ¶àаÃŵÄʶù¶¼ÓпÉÄÜÊǸ¡¶¯ÔÚ×÷¹Ö£¬ÄÇôÇå³ý¸¡¶¯¾ÍÊDZØÐëÒª×öµÄ£¬¶øÇÒËæÊ±ÐԵضԸ¸¼¶ÔªËØÇå³ý¸¡¶¯µÄ×ö·¨Ò²±»ÈÏΪÊÇÊéдCSSµÄÁ¼ºÃϰ¹ßÖ®Ò»¡£
³£ÓõÄÇå³ý¸¡¶¯µÄ·½·¨ÓÐÒÔÏÂÈýÖÖ:
´ËΪδÇå³ý¸¡¶¯Ô´´úÂ룬ÔËÐдúÂëÎÞ·¨²é¿´µ½¸¸¼¶ÔªËØÇ³»ÆÉ«±³¾°¡£
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
δÇå³ý¸¡¶¯Ç°ÈçͼËùʾ£º
ÈýÖÖÇå³ý¸¡¶¯·½·¨ÈçÏ£º
1¡¢Ê¹ÓÿձêÇ©Çå³ý¸¡¶¯¡£ÎÒÓÃÁ˺ܾõÄÒ»ÖÖ·½·¨£¬¿Õ±êÇ©¿ÉÒÔÊÇdiv±êÇ©£¬Ò²¿ÉÒÔÊÇP±êÇ©¡£ÎÒϰ¹ßÓÃ<P>£¬¹»¼ò¶Ì£¬Ò²ÓкܶàÈËÓÃ<hr>£¬Ö»ÊÇÐèÒªÁíÍâΪÆäÇå³ý±ß¿ò£¬µ«ÀíÂÛÉÏ¿ÉÒÔÊÇÈκαêÇ©¡£ÕâÖÖ·½Ê½ÊÇÔÚÐèÒªÇå³ý¸¡¶¯µÄ¸¸¼¶ÔªËØÄÚ²¿µÄËùÓи¡¶¯ÔªËغóÌí¼ÓÕâÑùÒ»¸ö±êÇ©Çå³ý¸¡¶¯£¬²¢ÎªÆä¶¨ÒåCSS´úÂ룺clear:both¡£´Ë·½·¨µÄ±×¶ËÔÚÓÚÔö¼ÓÁËÎÞÒâÒåµÄ½á¹¹ÔªËØ¡£
ps:<br clear=”all”/>Ò²¿ÉÒÔʵÏÖЧ¹û£¬µ«²»Çå³þʹÓÃÄĸö±È½ÏºÃ¡£ºÇºÇ
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<p class=”clr”> </p>
</div>
2¡¢Ê¹ÓÃoverflowÊôÐÔ¡£´Ë·½·¨ÓÐЧµØ½â¾öÁËͨ¹ý¿Õ±êÇ©ÔªËØÇå³ý¸¡¶¯¶ø²»µÃ²»Ôö¼ÓÎÞÒâ´úÂëµÄ±×¶Ë¡£Ê¹Óø÷½·¨ÊÇÖ»ÐèÔÚÐèÒªÇå³ý¸¡¶¯µÄÔªËØÖж¨ÒåCSSÊôÐÔ£ºoverflow:auto£¬¼´¿É£¡overflow:auto;ÊÇÈø߶È×ÔÊÊÓ¦£¬
Ïà¹ØÎĵµ£º
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; È»
ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
2. margin¼Ó±¶µÄÎÊÌâ
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£½â¾ö·½
°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline;
ÀýÈ磺
<#div ......
ת×Ô:http://www.boy110.com/csslimitedwidth/ CSSÏÞÖÆÍ¼Æ¬×î´ó¿í¶È£¬¼æÈÝIE6/IE7/IE8/FF£¬ÓÃ×ö¹ÜÀíºǫ́Ӧ¸ÃûÎÊÌ⣡ ÎÒÃÇÔÚÖÆ×÷Ò»¸öÍøÒ³µÄʱºò£¬¾³£Òª¶ÔÒ»¸öÇøÓòÀï¿ÉÄܳöÏÖµÄͼƬµÄ¿í¶È½øÐÐÏÞÖÆ£¬²»È»Ëü¿ÉÄÜ»á°ÑÒ³Ãæ³ÅµÃºÜÀúÜÀá£
Èç¹ûÄã²ÉÓù̶¨¿í¶È£¬³¤¶ÈÀ´ÉèÖõϰ£¬±ÈÈçÔÚ 200 ? "200px" : this.wid ......
¡¡ÍøÒ³ÖÐÎÒÃǾÓöµ½Ë¢ÐÂÒª±£Áô±íµ¥ÀïÄÚÈݵÄʱºò£¬Ï°¹ßµÄ×ö·¨Ê¹ÓÃcookie£¬µ«ÊÇÄÇÑù×öʵÔÚÊǺÜÂé·³£¬cssÖеÄbehavior¾ÍΪÎÒÃǺܺõĽâ¾öÁËÕâ¸öÎÊÌâ¡£
¡¡¡¡±ÈÈ磺
¡¡¡¡<input style="behavior:url(#default#savehistory)" name="youname" type="text" id="yourname" size="10" autocomplete="off">
¡¡¡¡ ......
Ò»¡¢ÓÃJQueryµÄAjax¼ÓÔØXML²¢½âÎöµÄ×¢ÒâÊÂÏî
1¡¢Content-Type
ºÜ¶àʱºòÎÞ·¨½âÎö¾ÍÊÇContent-TypeµÄÎÊÌâ¡£Èç¹û±¾Éí¾ÍÊÇXMLÎļþ£¬ÇëÌø¹ýÕâÒ»²½¡£
¶¯Ì¬Éú³ÉµÄXMLÒ»¶¨Òª½«ÆäÉèÖÃΪtext/xml£¬·ñÔòĬÈϾÍÊÇtext/htmlÒ²¾ÍÊÇÆÕͨµÄÎı¾¡£ ³£¼ûÓïÑÔµÄContent-TypeÉèÖãº
  ......
·½·¨Ò»£º
¿çä¯ÀÀÆ÷µÄÍøÒ³Éè¼ÆÒ»Ö±ÊÇÈÃÈ˺ÜÍ·ÌÛµÄÎÊÌ⣬Õâ²»Ö»ÊÇÒòΪä¯ÀÀÆ÷µÄ°æ±¾Öڶ࣬»¹ÓÐÒ»¸öÖØÒªµÄÔÒòÊÇÏàͬä¯ÀÀÆ÷µÄ²»Í¬Ê±ÆÚµÄ°æ±¾Ò²»áÓвîÒ죬
ÉõÖÁÊÇÔÚ²»Í¬²Ù×÷̨ͬÉÏ»¹»áÓв»Í¬¡£Òò´ËʹCSS hack¼¼Êõ½øÐÐä¯ÀÀÆ÷Çø·ÖÊÇʵÏÖ¿çä¯ÀÀÆ÷·ÃÎÊÒ»¸öºÃ·½·¨¡£CSS
Hack¼¼ÊõÓкܶ࣬¾ßÌå¿ÉÒԲ鿴£º
± ......