DIV+CSSʹÓùý³ÌÖÐËùÊÕ¼¯µÄ×ÊÁÏ
×î½üÕýÔÚ°ïÅóÓÑ×öÒ»¸ö»ùÓÚWEB2.0µÄÍøÒ³¡£ÒÔǰ×öÍøÒ³Ê±ÍøÒ³ÖеĶ¨Î»Ò»°ã²ÉÓÃTable±í¸ñµÄ·½Ê½À´Íê³É£¬ÊìÃÅÊì·ȥÍê³ÉÒ»¸öÕ¾µãûɶÎÊÌ⣻ÏÖÔÚÁ÷ÐеÄ2.0±ê×¼£¬²»µ«ÔÚÓïÑÔÉÏÓÐÌáÉý£¨ÒªÃ´ÊÇ.Net£¬ÒªÃ´ÊÇPHP5.x£©£¬¶øÇÒÔÚÍøÒ³µÄ×éÖ¯Ñùʽ(DIV±êÇ©)£¬²ãµþÑùʽ±í£¨CSS£©£¬Ajax¼¼ÊõµÈ£¬¶¼ÊÇȫеĸÅÄºÃÔÚ×Ô¼ºÔÚÄêǰÒѾ¹Ø×¢Õâ·½ÃæµÄ¼¼Êõ£¬Í¨¹ý½ü°ëÄêµÄѧϰ£¬Ìå»áÆÄÉȫеÄÍøÒ³¼Ü¹¹·½Ê½È·Êµ¾ßÓÐÎÞÇîµÄ÷ÈÁ¦£¬Óë¸ñµ÷µ¥Ò»µÄtableÀ´±È½Ï£¬ËüµÄÓÅÊÆÕæµÄºÜ´ó£º±íÏֲ㡢½á¹¹²ã¡¢Êý¾Ý²ã·ÖÀ룬·½±ã·Ö¹¤ºÏ×÷£»Áé»îµÄ·ç¸ñµ÷Óã¬Ê¹µÃͬһ¸ö½á¹¹£¬¿ÉÒÔÓÐÈô¸É¸öÍøÒ³·ç¸ñÑùʽ£¨ÏÖÔڵIJ©¿ÍÒ»°ã²ÉÓÃÕâÖÖ·½Ê½£©£»ÊµÊ±µÄÊý¾Ý¸üУ¨Ajax¼¼Êõ£©ÈÃÍøÒ³¸ü¼ÓµÄÇ×Ãñ£¬¸ü¾ß÷ÈÁ¦……
ÏÖÔÚ·¢Ò»Ð©ÎÒÔÚѧϰ£¬Ê¹Óùý³ÌÖÐËùÊÕ¼¯µÄÕâ·½ÃæÏà¹Ø×ÊÁÏ£º
Ò»¡¢XHTML³£ÓñêÇ©½éÉÜ
Ò»¶Îʱ¼äÒÔÀ´£¬·¢ÏÖÓкܶàÈËXHTML
¶¼²»»áÓ㬲»¹âÊÇÆÕͨµÄ³õѧÕߣ¬ÓеijÌÐòÔ±¶¼²»ÊǺÜÇå³þ¸ÃÔõôдÕâ¸öXHTML
£¬ÎÒÕâÀïÄØËãÊǰÑһЩ³£¼ûµÄÓ¦ ÓÃÎÊÌâ×öÒ»¸ö×ܽᣬҲËãÄÜʹµÃ´ó¼ÒÄÜÔÚ¹µÍ¨£¬ºÏ×÷ÉÏÄÜÐγÉĬÆõ¡£
XHTML
ÀïÓкܶàµÄ±êÇ©£¬µ«ÊǾ³£Óõ½µÄÒ²¾ÍÊÇÄÇô¼¸¸ö£¬Ò²Ö»ÒªÕÆÎÕÕ⼸¸öÒ²¾Í¿ÉÒÔÁË¡£ÏÂÃæÎÒÃÇÒ»Ò»ÁÐ ¾Ù£ºdiv,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
div
ÔÚÎÒµÄÄÔ×ÓÀïÎÒÒ»Ö±°ÑËûÏë×÷ÊÇÒ»¸öÆ¿×Ó»òÊÇÏä×Ó£¬ÎҵĸоõËüͦӲµÄ¡£Õâ¸ödiv
ûÓÐÊ²Ã´ÌØÐÔµÄÒâÒ壬¿ÉÒÔʹÓÃÔÚºÜ¶àµØ·½£¬Ò²¾ÍÊÇ˵Ëû¿ÉÒÔ×°²»Í¬µÄ¶«Î÷¡£ËûµÄÕýÈ·µÄд·¨ÊÇ<div></div>
±ØÐèÒªÓзâ¿Ú¡£´ó¼Ò¶¼ÓÃÀ´×ö²¼¾ÖÖ®Óã¬Ò²ÓÐÓÃÀ´×÷Ϊ´æ·ÅÎÄÕÂÐγɶÎÂ䣬ʵ¼ÊÉÏ£¬Õâ¸ö×ö·¨²¢²»ÊǺܺã¬ÒòΪ×÷ΪÎÄÕµķֶÎ×ÔÈ»ÓÐÒ»¸öÌØ¶¨µÄ±êÇ©À´Óá£ÄǾÍÊÇÏÂÃæÒª½²µÄ<p></p>
±êÇ©£¬²»¹ýÓÃDIV
À´ÔÙÕûÌåµÄ°üסËùÓÐ
µÄ¶ÎÂä¡£ÕâÊǷdz£ÊµÓõġ£
p
ÕâÊÇÒ»¸öÓÐÌØ¶¨ÓïÒåµÄ±êÇ©£¬±íʾ¶ÎÂ䣬ÊÇÓÃÀ´Çø·Ö¶ÎÂäµÄ¡£Ôڴ󲿷ֵÄä¯ÀÀÆ÷ÖжÔP
»ù±¾É϶¼ÓÐÒ»¸öÉÏϵı߾ࡣµ«ÊÇûÓÐÐÐÊ×Ëõ½ø£¬ÒòΪÐÐÊ×Ëõ½øÖ»ÊDZíʾ¶ÎÂäµÄ·½Ê½µ«ÊDz»ÊÇÒ»¶¨»òÊDZØÐèµÄ¡£ËùÒÔÔÚÓÃP
±êÇ©µÄʱºòÈç¹ûÐèÒª¿ÉÒÔÕë¶ÔP
É趨һÏÂÐÐÊ×Ëõ½ø£¬ÎÒÊÇÍÆ¼öÔÚÎÄÕÂÒÔÍâµÄµØ·½²»ÒªÊ¹ÓÃP
£¬ÒòΪP
ÊÇÓÐÒ»¶¨ÓïÒåµÄ£¬ Èç¹ûÓÃÔÚ±ðµÄµØ·½¿Ö²»ºÏÊÊ¡£ÕýÈ·µÄд·¨ÊÇ<p></p>
span
ÕâÒ²ÊÇÒ»¸ö·
Ïà¹ØÎĵµ£º
ÕâÊÇÒ»¸ö±ê×¼µÄCSSÏÂÀ²Ëµ¥ÖÆ×÷½Ì³Ì£¬ÓÐÕë¶ÔĿǰÁ÷ÐеÄIE6/IE7/IE8²»Í¬°æ±¾µÄCSS´úÂ룬Òò´Ë¿ÉÒÔÔÚIEÖ®¼äÍêÈ«¼æÈÝ£¬²»¹ýÆäËüµÄä¯ÀÀÆ÷Ïñ»ðºü/GGä¯ÀÀÆ÷Ö®ÀàµÄûÓвâÊÔ£¬Èç¹û¼æÈÝIE8µÄ»°£¬ÄÇô¼æÈÝ»ðºüÓ¦¸ÃÎÊÌâ²»´ó°É¡£²Ëµ¥Ê¹ÓÃÀ¶É«»ùµ÷£¬»¬Ïò¶þ¼¶²Ëµ¥¸ü»»±³¾°£¬²Ù×÷µÄ¸Ð¾õºÜÊæ·þ¡£
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XH ......
µÚÒ»Õ£ºÓ¦ÖªµÀ
1.1 DIV+CSS
µÄ½Ð·¨ÊDz»×¼È·µÄ
ÎÒÏë·²ÊÇÀ´µ½“Õâ¸öרÌ┵Äͬѧ£¬ºÜ´ó²¿·ÖÊdzå×ÅDIV+CSSÀ´µÄ£¬Ä¿µÄ¾ÍÊÇѧϰ
DIV+CSSµÄ£¬ËµµÄÔÙÖ±½ÓһЩ¾ÍÊÇѧϰÈçºÎÓÃDIV+CSS²¼¾ÖÒ³Ãæ£¬ÈçºÎ´ÓÒ»ÕÅÍ¼Æ¬ÖÆ×÷³É±ê×¼µÄDIV+CSSÒ³Ãæ¡£
Èç¹ûÄã¿´ÍêµÚÒ»¶Î»¹Ã»Óз¢ÏÖ´íÎóµÄ»°£¬ÄÇÄã¾ÍºÜÓб ......
±¾½ÚÖ÷Òª½²½â£¬Á½¸öÄÚÈÝ£¬
µÚÒ»£ºCSS
ÈçºÎ¿ØÖÆÒ³ÃæÑùʽ£¬ÓÐ
¼¸ÖÖ·½Ê½£»
µÚ¶þ£ºÕâЩ·½Ê½³öÏÖÔÚͬһ¸öÒ³ÃæÊ±µÄÓÅÏȼ¶¡£
ʹÓÃxHTML
+CSS
²¼¾ÖÒ³Ãæ£¬ÆäÖÐÓиöºÜÖØÒªµÄÌØµã¾ÍÊÇÄÚÈÝÓë±íÏóÏà·ÖÀ룬ÄÚÈÝÖ¸HTMLÒ³Ãæ´úÂ룬±íÏó¾ÍÊÇCSS´úÂëÁË£¬Èç¹û°ÑÒ³Ãæ¿´³É´©×ÅÒ·þµÄÈ˵ϰ£¬È˾ÍÊÇ
HTML£¬ÊÇÄ ......
<html>
<head>
<mce:style type="text/css"><!--
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div. ......