³ÎÇåDIV+CSSÉè¼ÆµÄÎóÇø
µ±DIV+CSSƽµØÆð¾ªÀ×ͻȻ³öÏÖÔÚÍøÒ³Éè¼ÆÐÐÒµµÄʱºò£¬¹Ù·½¡¢Ãñ¼äÎÞ²»ÍƳ籸ÖÁ£¬·Â·ðTableÉè¼ÆµÄʱ´ú¾Í
ÒªÖսᣬÂíÉϾÍÒª²½ÈëDIV+CSSµÄʱ´ú£¬²»¶®µÃDIV+CSSÄ㶼²»ºÃÒâ˼˵Äã»áÍøÒ³Éè¼Æ£¬²»ÖªDIV+CSSÄ㶼²»
ºÃÒâ˼˵ÄãÊÇÕ¾³¤£¬ÄãÒª»¹ÊÇÓÃTABLEÀ´Éè¼ÆÕ¾µã£¬ÎÞÊý±ÉÒÄÖ®¹â¾ÍͶÉä¶øÀ´¡£
¡¡¡¡È»¶øDIV+CSSÕæµÄÓÐÕâôÉñÂð?¸ÃÔõôÕæÕýµÄÀûÓÃDIV+CSSÓÅ»¯Õ¾µã£¬¶ø²»ÊǹÒÑòÍ·Âô¹·È⣬²å´ó´Ð×°´ó
ÏóÄØ?
¡¡¡¡DIV+CSSµÄÉè¼ÆÖÐÓм¸µãÎóÇø£¬ÓÈÆäÓ¦¸Ã³ÎÇ壺
¡¡¡¡1¡¢DIV+CSSµÄºÏÀíÖ®´¦ÔÚÓÚ¿ÉÒÔ½øÐÐÍøÒ³µÄͳһÉè¼Æ¹ÜÀí£¬Í¨¹ýÒ»¸öÑùʽ±í£¬Ç£Ò»·¢¶ø¶¯È«Éí£¬Ö»ÒªÐÞ
¸ÄÑùʽ±í£¬¾Í¿ÉÒÔͳһȫվµÄ·ç¸ñ£¬Èç¹ûΪһ¸öÒ³Ãæµ¥¶À×öÒ»¸öÑùʽ±í£¬»òÕßÒ»¸ödiv¾Í×öÒ»¸öÑùʽ±í£¬Ã»
ÓÐÈ«¾ÖÉè¼Æ¹ÛÄÄÇôÕâ¸ödiv+CSSµÄÉè¼Æ·½Ê½¾ÍÍêȫûÓбØÒª£¬ÉõÖÁ³ÉÁËÀÛ׸;
¡¡¡¡2¡¢ÏñTableÒ»ÑùÓÃDIV+CSS£¬ÎÞÇµÄǶÌ×£¬ÆäЧ¹ûÓëTableÉè¼ÆûÓÐÁ½Ñù£¬²¢²»»á´øÀ´ËÑË÷ÒýÇæµÄÓÅ»¯
Ч¹û£¬·´¶ø»áÔö¼ÓÒ³ÃæµÄ¸ºµ£;
¡¡¡¡3¡¢ÍƳçDiv+CSS£¬È´²»¿¼ÂǼæÈÝÐÔ£¬TABLEÉè¼ÆÓÉÀ´ÒѾ㬵õ½ä¯ÀÀÆ÷µÄ¹ã·ºÖ§³Ö£¬ËùÒÔÏÔʾЧ¹ûºÜºÃ
£¬²»»á³öÏÖ´íλÇé¿ö£¬µ«ÊÇDIV+CSSÈ´ÔÚ²¿·Öä¯ÀÀÆ÷ÖлᷢÉúÒ³Ãæ´íλµÄÇé¿ö£¬Òò´ËÔÚ½øÐÐÉè¼ÆµÄʱºòÒ²Òª
¿¼Âǵ½²»Í¬ä¯ÀÀÆ÷µÄÇé¿ö£¬½øÐиü¸ÄºÍµ÷ÊÔ¡£
¡¡¡¡µ±È»DIV+CSSÓÐÆä¹ÌÓеÄÓŵ㣺1¡¢±ê×¼»¯µÄÒ³Ãæ½á¹¹;2¡¢ÓÐÀûÓÚͳһÉè¼Æ¹ÜÀí;3¡¢¿ÉÒԵõ½ËÑË÷ÒýÇæÁ¼
ºÃµÄÖ§³Ö£¬µ«ËƺõÀûÓÃDIV+CSSҪעÒâÒÔÉÏÎóÇø£¬ÏàÐÅÕ¾³¤¶¼ÓкܶàµÄÌå»á£¬Ò²Óиü¶à³ÉÊìµÄÉè¼ÆÀíÄî¡£
Ïà¹ØÎĵµ£º
±¾ÎĽ«½²ÊöHTMLºÍCSSµÄ¹Ø¼ü—ºÐ×ÓÄ£ÐÍ(Box model). Àí½âBox modelµÄ¹Ø¼ü±ãÊÇmarginºÍpaddingÊôÐÔ, ¶øÕýÈ·Àí½âÕâÁ½¸öÊôÐÔÒ²ÊÇѧϰÓÃcss²¼¾ÖµÄ¹Ø¼ü.
×¢: Ϊʲô²»·ÒëmarginºÍpadding? ÔÒòÒ», ÔÚººÓïÖв¢Ã»ÓÐÓëÖ®Ïà¶ÔÓ¦µÄ´ÊÓï; ÔÒò¶þ: ¼´Ê¹ÓÐÕâÑùµÄ´ÊÓï, ÓÉÓÚÔÚ±àдcss´úÂëʱ, ±ØÐëʹÓÃmarginºÍpadding, Èç¹ûÎÒÃÇ×ÜÓà ......
¡¡¡¡ÍøÒ³Éè¼ÆÖÐCSS²¼¾ÖÊǺÜÖØÒªµÄ²¿·Ö£¬ÏÂÃæ½éÉܼ¸ÖÖ¼ì²éµ÷ÊÔCSS²¼¾ÖµÄÓÐЧ·½·¨¡£
¡¡¡¡1.¼ì²éHTMLÔªËØÊÇ·ñÓÐƴд´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¡¡¡¡¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹Øϵ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
¡¡¡¡2.¼ì²éCSSÊÇ·ñÊéдÕýÈ·
¡¡¡¡¼ì²éÒ»ÏÂÓÐÎÞƴд´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ}µÈ¡£¿ÉÒÔÀûÓà ......
text-align ˮƽ¶ÔÆë right left center
vertical-align ´¹Ö±¶ÔÆë top middle bottom
ÊôÐÔ£º
AbsBottom ͼÏñµÄϱßÔµÓëͬһÐÐÖÐ×î´óÔªËصÄϱßÔµ¶ÔÆë¡£
AbsMiddle ͼÏñµÄÖмäÓëͬһÐÐÖÐ×î´óÔªËصÄÖмä¶ÔÆë¡£
Baseline ͼÏñµÄϱßÔµÓëµÚÒ»ÐÐÎı¾µÄϱßÔµ¶ÔÆë¡£
Bottom ͼÏñµÄϱßÔµÓëµÚÒ»ÐÐÎı¾µÄϱ ......
Ó¦ÓÃÑùʽµÄ·½·¨ÓÐÈýÖÖ£ºÍⲿ(external)¡¢ÄÚ²¿(internal)ºÍÄÚÁª(inline)¡£ÆäÖÐÇ°Á½ÕߵĻù±¾¸ñʽΪ£º
selector { property £º value£» }
CSSÖпÉÒÔʹÓò»Í¬µÄselector(Ñ¡Ôñ·û)À´Ó¦ÓÃÑù ......
ÏñÉÏÃæµÄÒ»ÕÅͼƬÎÒÃǸÃÔõôÓÃjs ºÍcss + div ºÜºÃµÄÓ¦Óõ½ÎÒÃǵÄÏîÄ¿ÖÐÄØ£¿
<style>
.InpuRight{
height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -250px;
}
.InputError{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat 0px 0px;
}
.inputLogin{
wid ......