¡¾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Ñ¡ÔñÆ÷¸ü¾ß
ÓÐÕë¶ÔÐÔ£¬È磺
ÏȸøÄ³¸ö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 Tooltip
ͨ¹ýÕâЩ´úÂ룬Äã¿ÉÒÔ×ö³ö¼òµ¥µÄTooltip¡£ÕâÊÇCSS
´úÂ룺
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
a:hover { background: ......
²»¿É»»ÐÐ <NOBR></NOBR> £¨²»»»ÐУ©
overflow
°æ±¾£ºCSS2¡¡ ¼æÈÝÐÔ£ºIE4+ NS6+¡¡¼Ì³ÐÐÔ£ºÎÞ
Óï·¨£º
overflow : visible | auto | hidden | scroll
²ÎÊý£º
visible : ¡¡²»¼ôÇÐÄÚÈÝÒ²²»Ìí¼Ó¹ö¶¯Ìõ¡£¼ÙÈçÏÔʽÉùÃ÷´ËĬÈÏÖµ£¬¶ÔÏ󽫱»¼ôÇÐΪ°üº¬¶Ô
ÏóµÄwindow»òf ......
IE vs FF
CSS ¼æÈÝÒªµã£ºDOCTYPE Ó°Ïì CSS ´¦Àí
FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ¾ÓÖÐ, IE ²»ÐÐ
FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ
FF: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ width, µ« IE ²»»á, ¹ÊÐèÒªÓà !important ¶àÉèÒ» ......
Çø±ðspan div p Èý¸ö±êÇ©µÄÓ÷¨
spanºÍdivµÄ²»Í¬Ö®´¦ÔÚÓÚspanÊÇÄÚÁªµÄ£¬ÓÃÔÚһС¿éµÄÄÚÁªHTMLÖУ¬Ç°ºó²»¶ÏÐÐ.
divÔªËØÊǿ鼶µÄ£¨¼òµ¥µØËµ£¬ËüµÈͬÓÚÆäǰºóÓжÏÐУ©£¬ÓÃÓÚ×éºÏÒ»´ó¿éµÄ´úÂë¡£
p(¶ÎÂä)ÔªËØÊǿ鼶µÄ,ǰºó¶ÏÐÐ,¶øÇÒ»¹ÒªÔÙ¸ôÒ»ÐÐ.Ï൱ÓÚ¶ÏÁ½ÐÐ.
<div> ¿É¶¨ÒåÎĵµÖеķÖÇø»ò½Ú£¨division ......
±¾½ÚÖ÷Òª½²½â£¬Á½¸öÄÚÈÝ£¬
µÚÒ»£ºCSS
ÈçºÎ¿ØÖÆÒ³ÃæÑùʽ£¬ÓÐ
¼¸ÖÖ·½Ê½£»
µÚ¶þ£ºÕâЩ·½Ê½³öÏÖÔÚͬһ¸öÒ³ÃæÊ±µÄÓÅÏȼ¶¡£
ʹÓÃxHTML
+CSS
²¼¾ÖÒ³Ãæ£¬ÆäÖÐÓиöºÜÖØÒªµÄÌØµã¾ÍÊÇÄÚÈÝÓë±íÏóÏà·ÖÀ룬ÄÚÈÝÖ¸HTMLÒ³Ãæ´úÂ룬±íÏó¾ÍÊÇCSS´úÂëÁË£¬Èç¹û°ÑÒ³Ãæ¿´³É´©×ÅÒ·þµÄÈ˵ϰ£¬È˾ÍÊÇ
HTML£¬ÊÇÄ ......