¡¾DIV+CSSÈëÃŽ̡̳¿Îå¡¢CSSÑ¡ÔñÆ÷
ÉϽڿÎÎÒÃǽ²ÁËÒ»ÏÂCssͨ¹ýʲô·½Ê½È¥¿ØÖÆÒ³Ãæ
£¬Èç¹û²»¼ÇµÃ£¬ÎÒÀ´°ï´ó¼Ò»ØÒäһϣ¬×ܹ²ÓÐËÄÖÖ·½Ê½ÐÐÄÚ·½Ê½¡¢ÄÚ
Ƕ·½Ê½¡¢Á´½Ó·½Ê½¡¢µ¼È뷽ʽ£¬´ó¼Òͨ¹ýÕâËÄÖÖ·½Ê½¾Í¿ÉÒÔʵÏÖCSS
¶ÔHTML
Ò³ÃæÑùʽµÄ¿ØÖÆ£¬Èç¹ûÒªÈÃÕâЩÑùʽ¶ÔHTMLÒ³ÃæÖеÄÔªËØʵÏÖÒ»¶ÔÒ»£¬Ò»¶Ô¶à»òÕ߶à¶ÔÒ»µÄ¿ØÖÆ£¬Õâ¾ÍÐè
ÒªÓõ½CSSÑ¡ÔñÆ÷£¬HTMLÒ³ÃæÖеÄÔªËؾÍÊÇͨ¹ýCSSÑ¡ÔñÆ÷½øÐпØÖƵġ£
CSSÑ¡ÔñÆ÷¹²ÓÐÈýÖÖ£º±êÇ©Ñ¡ÔñÆ÷
¡¢ID
Ñ¡ÔñÆ÷
¡¢ÀàÑ¡ÔñÆ÷
¡£
ΪÁ˺óÃæµÄ¶ÔÑ¡ÔñÆ÷µÄ½âÊ͸üÈÝÒ×Àí½â£¬ÔÚÕâÀïÏÈ´ò¸ö±ÈÓ÷£¬Èç¹û°ÑÄãËù´¦µÄ»·¾³ÊÓΪHTMLÒ³ÃæµÄ»°£¬»·¾³ÀïµÄÿһ¸öÈËÔòÏ൱ÓÚHTMLÒ³ÃæÄÚ±êÇ©ÔªËØ£¬Ã¿
¸öÈ˶¼ÓÐÒ»¸öID(Éí·ÝÖ¤)£¬ÄÇôhtmlÖеÄÿһ¸ö±êÇ©Ò²¶¼ÓÐ×Ô¼ºµÄID£¬´ó¼Ò¶¼ÖªµÀIDÊÇΨһµÄ£¬²»¿ÉÄÜÖظ´¡£
¡¾±êÇ©Ñ¡ÔñÆ÷¡¿
Ò»¸öÍêÕûµÄHTMLÒ³ÃæÊÇÓÐ
ºÜ¶à²»Í¬µÄ±êÇ©×é³É£¬¶ø±êÇ©Ñ¡ÔñÆ÷£¬ÔòÊǾö¶¨ÄÄЩ±êÇ©²ÉÓÃÏàÓ¦µÄCSSÑùʽ£¬(ÔÚ´ó»·¾³ÖÐÄã¿ÉÄܳöÓÚ²»Í¬µÄλÖ㬵«ÊDz»¹ÜÔõôÑù£¬Äã×ÜÊÇ´©×ÅͬһÌ×Ò·þ£¬
Õâ¼þÒ·þ¾ÍÊÇÓɱêÇ©Ñ¡ÔñÆ÷ÊÂÏȸøÄãÏÞ¶¨ºÃµÄ£¬²»¹Ü×ßµ½ÄÄÀﶼÊÇÕâÉíÒ·þ)±ÈÈ磬ÔÚstyle.cssÎļþÖжÔp±êÇ©ÑùʽµÄÉùÃ÷ÈçÏ£º
p{
font-size:12px;
background:#900;
color:090;
}
ÔòÒ³ÃæÖÐËùÓÐp±êÇ©µÄ±³¾°¶¼ÊÇ#900(ºìÉ«)£¬ÎÄ×Ö´óС¾ùÊÇ12px£¬ÑÕɫΪ#090(ÂÌÉ«)£¬ÕâÔÚºóÆÚά»¤ÖУ¬Èç¹ûÏë¸Ä±äÕû¸öÍøÕ¾ÖÐp±êÇ©±³¾°µÄÑÕ
É«£¬Ö»ÐèÒªÐÞ¸ÄbackgroundÊôÐԾͿÉÒÔÁË£¬¾ÍÕâôÈÝÒ×£¡
¡¾IDÑ¡ÔñÆ÷¡¿
IDÑ¡ÔñÆ÷ÔÚijһ¸öHTML
Ò³ÃæÖÐÖ»ÄÜʹÓÃÒ»´Î(µ±È»Ò²¿ÉÒÔÓúü¸´Î£¬²»¹ý¾Í²»·ûºÏW3C±ê×¼ÁË£¬ÄÇÒ³ÃæÒ²¾Í²»ÊDZê×¼Ò³Ãæà¶~£¬ÔÛÃǵÄÄ¿µÄ²»¾ÍÊÇΪÁË×ö±ê×¼µÄÒ³Ãæô£¬ËùÒÔ½¨Òé´ó¼Ò²»
ÒªÔÚͬһ¸öhtmlÒ³ÃæÖжà¸ö±êÇ©ÓµÓй²Í¬µÄID)£¬¾ÍÏñÔÚÄãËù´¦µÄ»·¾³ÖУ¬ÄãÖ»ÓÐÒ»¸öID(Éí·ÝÖ¤)£¬²»¿ÉÄÜÖظ´£¡ÏàÐÅ´ó¼ÒÒ²ÄÜ¿´³öÀ´£¬IDÑ¡ÔñÆ÷¸ü¾ß
ÓÐÕë¶ÔÐÔ£¬È磺
Ïȸøij¸öHTMLÒ³ÃæÖеÄij¸öp±êÇ©Æð¸öID£¬´úÂëÈçÏ£º
<p id="one">´Ë´¦Îªp±êÇ©ÄÚµÄÎÄ×Ö</p>
ÔÚCSSÖж¨ÒåIDΪoneµÄp±êÇ©µÄÊôÐÔ£¬¾ÍÐèÒªÓõ½#£¬´úÂëÈçÏ£º
#one{
font-size:12px;
background:#900;
color:090;
}
ÕâÑùÒ³ÃæÖеÄij¸öp¾Í»áÊÇCSSÖж¨ÒåµÄÑùʽ¡£
¡¾ÀàÑ¡ÔñÆ÷¡¿
ÕâÖÖÑ¡ÔñÆ÷¸üÈÝÒ×Àí½âÁË£¬¾ÍÊÇ
ʹҳÃæÖеÄijЩ±êÇ©(¿ÉÒÔÊDz»Í¬µÄ±êÇ©)¾ßÓÐÏàͬµÄÑùʽ£¬¾ÍÏñ¹úÇìÖÐij¸ö·½ÕóÖУ¬¿Ï¶¨¶¼ÊDz»Í¬µÄÈË£¬È´¾ù´©ºìÉ«Ò·þ£¬ÊÖÖи߾ٻ¨»·£¬Ñùʽ¶¼ÊÇÒ»ÑùµÄ£¬Èç¹û
ÏëÈÃÕâÒ»ÀàÈ˶¼Óй²Í¬µÄÑùʽ£¬¸ÃÔõô×öÄØ~ºÇºÇ£¬ºÍIDÑ¡ÔñÆ÷µÄÓ
Ïà¹ØÎĵµ£º
ÓÃCSSÈÃÔªËؾÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇé—ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÈÃÎÒÃÇÏÈÀ´¿´Ò»ÏÂCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØˮƽ¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØˮƽ¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪ
aut ......
¹ö¶¯ÌõÑùʽÖ÷ÒªÉæ¼°µ½ÈçÏÂCSSÊôÐÔ:
overflowÊôÐÔ: ¼ìË÷»òÉèÖõ±¶ÔÏóµÄÄÚÈݳ¬¹ýÆäÖ¸¶¨¸ß¶È¼°¿í¶ÈʱÈçºÎÏÔʾÄÚÈÝ
overflow: auto; ÔÚÐèҪʱÄÚÈÝ»á×Ô¶¯Ìí¼Ó¹ö¶¯Ìõ
overflow: scroll; ×ÜÊÇÏÔʾ¹ö¶¯Ìõ
overflow-x: hidden; ½ûÖ¹ºáÏòµÄ¹ö¶¯Ìõ
overflow-y: scroll; ×ÜÊÇÏÔʾ×ÝÏò¹ö¶¯Ìõ
width: 568px; width: 98%; ÉèÖÃÇøÓòµÄ ......
ÕâÊÇÒ»¸ö±ê×¼µÄCSSÏÂÀ²Ëµ¥ÖÆ×÷½Ì³Ì£¬ÓÐÕë¶ÔÄ¿Ç°Á÷ÐеÄIE6/IE7/IE8²»Í¬°æ±¾µÄCSS´úÂ룬Òò´Ë¿ÉÒÔÔÚIEÖ®¼äÍêÈ«¼æÈÝ£¬²»¹ýÆäËüµÄä¯ÀÀÆ÷Ïñ»ðºü/GGä¯ÀÀÆ÷Ö®ÀàµÄûÓвâÊÔ£¬Èç¹û¼æÈÝIE8µÄ»°£¬ÄÇô¼æÈÝ»ðºüÓ¦¸ÃÎÊÌâ²»´ó°É¡£²Ëµ¥Ê¹ÓÃÀ¶É«»ùµ÷£¬»¬Ïò¶þ¼¶²Ëµ¥¸ü»»±³¾°£¬²Ù×÷µÄ¸Ð¾õºÜÊæ·þ¡£
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XH ......
ʹÓÃTable²¼¾ÖÒ³ÃæΪʲôÊDz»Ã÷Öǵģ¿
´ó¼Ò¿´µ½±êÌ⣬²»ÒªÎó½âÈÏΪÔÚÒ³ÃæÖв»ÄÜʹÓÃTable£¬¶øÊÇ¿ÉÒÔ
ʹÓÃTable£¬µ«ÊǾ¡Á¿²»ÒªÓÃTableÈ¥²¼¾ÖÒ³Ã棬ΪʲôÕâô˵ÄØ£¬ÒòΪʹÓÃTable²¼¾ÖÒ³Ãæ»áʹҳÃæʧȥÁé»îÐÔ£¬Ôõô¸öÁé»î·¨ÄØ£¬±ÈÈç½ñÌìÄãºÃ²»
ÈÝÒ××ö³öÀ´µÄÒ³Ã棬µÚ¶þÌìÀÏ°å˵ÎÒ²»Ï²»¶µÇ¼ģ¿é·Åµ½Óұߣ¬»¹ÊǷŵ½×ó±ß£¬Í¨Ö ......