¸ù±¾²»´æÔÚ DIV + CSS ²¼¾ÖÕâ»ØÊÂ
ת:дµÄ²»´í,¶ÔÓÚÍøÒ³¿ª·¢ÓÐÖ¸µ¼ÒâÒå
ÔÚ¡¶ÓûÁ· CSS £¬±ØÏȹ¬ IE¡·ºÍ¡¶ÄãÓÐ <table /> Ç¿ÆÈÖ¢Â𣿡·ÕâÁ½ÆªÎÄÕÂÖУ¬¿´µ½Óв»ÉÙÆÀÂÛÓõ½div+CSS²¼¾ÖÕâ¸ö˵·¨£¬ÓÃÀ´ºÍtable²¼¾Ö±È½Ï¡£Êµ¼ÊÉÏdiv²»ÊÇÓÃÀ´²¼¾ÖµÄ£¬divÖ»ÊÇÓÃÀ´±íʾһ¸öÆäËüÔªËض¼ÎÞ·¨×¼È·±í´ïÓïÒâµÄÒ»¸ö¿éÇø£¬Ö»ÓÐCSSÊÇÓÃÓÚ²¼¾ÖµÄ£¬ËùÒÔ¸ù±¾¾Í²»´æÔÚdiv+CSS²¼¾ÖÕâ»ØÊ¡£·´¹ýÀ´£¬table²¼¾ÖµÄʱºò¾³£ÒÀÀµÓÚCSS¶¨ÒåÒ»¸öµ¥Ôª¸ñµÄ²¼¾ÖÊôÐÔ£¬ËùÒÔ¿ÉÒÔ˵ÊÇtable+CSS²¼¾Ö¡£Ò²¾ÍÊÇ˵£¬ÎÒÃÇÌÖÂÛµÄÁ½ÖÖÖ÷Á÷²¼¾Ö·½·¨Ó¦¸ÃÊÇ´¿CSS²¼¾ÖºÍtable+CSS²¼¾Ö£¬Èç¹ûÄã¾õµÃÄãÔÚÓõÄÊÇdiv+CSS²¼¾Ö£¬ÄÇôÓпÉÄÜÄãÒ²ÓÐÇ¿ÆÈÖ¢ÁË¡£
½ÓÏÂÀ´ÎÒÃÇ˵˵ÈçºÎ½øÐд¿CSS²¼¾Ö£¬ÒòΪCSS²¼¾ÖÒÀÀµÓÚXHTML£¬ËùÒÔÎÒÃÇÏÈҪ˵˵ÈçºÎÊéдһ¸öCSSÎ޹صÄXHTML¡£ÆäʵÊéдCSSÎ޹صÄXHTML²¢²»ÄÑ£¬ËäÈ»Äã²»ÄÜÔÙºÃÏñÊéдtable²¼¾Ö´úÂëÄÇÑù¼¯Öо«Á¦ÓÚ×îÖصÄÊÓ¾õЧ¹ûÉÏ£¬µ«ÆäÄѶÈÒ²²»¹ýÊÇÖÐѧÉúд×÷ÎÄÄÇÑù¡£
ÖÐѧÉúд×÷ÎÄÈçºÎдÄØ£¿Ê×ÏÈ¿´¿´ÌâÄ¿£¬È»ºóÏëÏëÕûƪÎÄÕ·ÖΪÄļ¸¸ö´óµÄ¶ÎÂ䣬ÿ¸ö´óµÄ¶ÎÂä˵Щʲô£¬Äܹ»°ÑÄãҪ˵µÄ¶«Î÷˵Çå³þ¡£¶ÔÓÚXHTMLÀ´Ëµ£¬ÕâÏ൱ÓÚÓÃdiv°ÑÎĵµÇиîΪ¼¸´ó¿é¡£ÕâʱºòÄã²»ÒªÏë×ÅÕâЩdiv½«¹¹½¨Ò»¸öÔõÑùµÄDOM°¡¡¢CSSÈçºÎÑ¡ÔñDOMÖÐÔªËØÉèÖùæÔòʵÏÖ²¼¾ÖÖ®ÀàµÄÊÂÇ飬¾Í´ó¸Å»®·ÖÒ»ÏÂÎĵµµÄ´óÇøÓò¾ÍºÃÁË¡£
È»ºóµ±È»ÊÇÓÃһЩ³£ÓõÄÊÖ·¨À´±íÏÖ¸ÐÇé»òÕßÂÛÖ¤ÎÊÌ⣬ÕâÔÚXHTMLÖоÍÊÇÓÃÌض¨µÄÔªËØÀ´Íê³ÉһЩ³£¼ûµÄÐÅÏ¢×éÖ¯¡£ÏÂÃæ¾ÍÊÇÐÅÏ¢×éÖ¯ÐÎʽÓëÔªËصĶÔÓ¦ÁÐ±í¡£
img
×÷ΪÄÚÈݵÄͼƬÊÇÒ»¶¨Òª·Åµ½imgÀïÃæµÄ£¬ÕâûÓиüºÃµÄÑ¡ÔñÁË¡£È»¶øÈç¹ûͼƬ²»ÊÇ×÷ΪÄÚÈÝ£¬¶øÊÇ×÷ΪÐÞÊÎÐԵģ¬ÔòǧÍò²»ÒªÓÃimg¡£¶ÔÓÚ·ÇÄÚÈݵÄͼƬ£¬Ó¦¸ÃÔÚCSSÖÐÒýÓ㬶ø²»ÔÚXHTMLÖгöÏÖ¡£ÀýÈçÿһ¸öµ¼º½Á´½ÓÓÐÒ»¸öÇ°µ¼µÄ¼ýͷָʾ£¬ÄÇôÕâЩ¼ýÍ·¾ÍÓ¦¸Ãͨ¹ýCSSµÄbackground-imageÊôÐÔ¼ÓÉÏÈ¥£¬¶ø²»ÊÇÖ±½Ó×÷Ϊimg³öÏÖ¡£
a
ÕâÒ²ÊÇÒ»¸ö·Ç³£×¼È·¶¨ÒåµÄÔªËØ£¬Á´½Ó¶¼ÐèҪʹÓÃËü¡£»òÐíÒѾÓкܶàÈËÍü¼ÇÁËaµÄ±¾ÒâÊÇêµã£¬ÆäʵÕâÊÇÒ»¸öÊ®·ÖÓÐÓõÄÓïÒ壬Äã¿ÉÒÔÓÃËüÀ´±ê¼ÇÎĵµÖÐһЩÖØÒªµÄÒýÓÃλÖá£
ul, ol
ulºÍol·Ö±ðÊÇʲôÒâ˼ÄØ£¿Èç¹ûÄã»Ø´ð²»ÉÏÀ´£¬È´ÖªµÀËüÃÇ¿ÉÒÔÓÃÀ´¸Éʲô£¬ÄÇÖ¤Ã÷ÄãÊDZ»¿ÉÊÓ»¯¹¤¾ß³è»µÁË£¬Òª×ª»»¹ýÀ´±àд·ûºÏÓïÒåµÄXHTMLÐèÒªÏȲ¹³ä»ù´¡ÖªÊ¶£¬ÕâʱºòÄã×îºÃÏÈÕÒһЩ¿´ÆðÀ´·Ç³£»ù´¡·Ç³£È«ÃæµÄXHTMLÊé¼®¿´¿´£¬ÒòΪûÓÐÔúʵµÄ»ù´¡ÄãÔÚÉÏÃæ¹¹½¨¸ü¶àµÄ֪ʶ¶¼ÊDz»Àι̵ġ£ulºÍolÆäʵ·Ö±ð´ú±íunordered listºÍordered list£¬Ò²¾ÍÊÇÎÞÐòÁбíºÍÓÐÐ
Ïà¹ØÎĵµ£º
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½øÐ ......
ul ol li dl dt dd¶¼ÊÇDIV+CSS×öÍøÒ³³¤ÓõĶ«Î÷,Ï൱ÓÚÒ»¿ÃÊ÷µÄÊ÷¼¼,ÏÂÃæ¾ÍÁ˽âÒ»ÏÂÕâЩ¶«Î÷µÄÈ«ÌåÓ÷¨,±¾ÈËÓÃdd,dt,dlÓõúÜÉÙ,¶®µÃ½áºÏʹÓöÔ×ö¼Ü¹¹ÊǺÜÓкô¦µÄŶ!
DIV
CSSÍøÒ³²¼¾ÖÖг£ÓõÄÁбíÔªËØul ol li dl dt ddÊÍÒ壬¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol
ÓÐÐòÁÐ±í¡£
<ol>
<li> ......
JavaScript CSS StyleÊôÐÔ¶ÔÕÕ±í
ÎÄÕÂÀ´Ô´£ºhttp://www.phplamp.org/2008/10/jsavscript-js-css-style/
ΪÁ˴ﵽijÖÖÌØÊâµÄЧ¹ûÎÒÃÇÐèÒªÓÃJavascript¶¯Ì¬µÄÈ¥¸ü¸Äijһ¸ö±êÇ©µÄCssÊôÐÔ¡£±ÈÈ磺Êó±ê¾¹ýÒ»¸öͼƬʱÎÒÃÇÈÃͼƬ¼ÓÒ»¸ö±ß¿ò£¬´úÂë¿ÉÄÜÊÇÕâÑù£º
JavaScript´úÂë
<script type="text/javascript"> & ......
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......