CSSÒѾ³ÉÎªÍøÒ³Ç°¶ÎÉè¼ÆÒ»¸ö·Ç³£ÖØÒªµÄ²¿·Ö£¬ÓÉÓÚдCSSʱÐèÒª¿¼ÂǵÄÎÊÌâ·Ç³£¶à£¬ÀÏÊÖÃÇ´´½¨ÐÂÒ³ÃæÊÇͨ³£»áÑØÓÃÒÔǰµÄCSS¿ò¼Ü¡£µ«ÊÇÐÂÊÖûÓÐ×Ô¼ºµÄ¿ò¼Ü£¬ÕâÆªÎÄÕ¿ÉÒÔ¸øÐÂÊÖÃÇһЩÆôʾ¡£
1.¼òµ¥µÄ´¿CSS Tooltip
ͨ¹ýÕâЩ´úÂ룬Äã¿ÉÒÔ×ö³ö¼òµ¥µÄTooltip¡£ÕâÊÇCSS
´úÂ룺
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
a:hover { background:#ffffff; /*Òª¼æÈÝIE6µÄ»°±ØÐëÌí¼Ó±³¾°É«*/ text-decoration:none;}a.tooltip span { display:none; padding:2px 3px; margin-left:8px; width:130px;}a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
HTML´úÂëÈçÏ£º
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.
Ч¹ûÈçͼ¡£
2.ÖØÉè»ù±¾Ñùʽ
ΪÁËͳһ²»Í¬ä¯ÀÀÆ÷¶Ô¸÷ÖÖHTML±êÇ©µÄĬÈÏÑùʽµÄäÖȾ£¬ÎÒÃDZØÐë´Óж¨Òå¸÷ÖÖ±êÇ©µÄÑùʽ£¬ÕâÑùÄܶÔÒÔºóµÄ¿ª·¢´øÀ´·½±ã¡£ÖØÐ¶¨Òå¸÷ÖÖHTML±êǩֻÐèÒªÔÚCSSµÄ¿ªÍ·¼ÓÈëÒÔÏ´úÂë¡£
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: none;} /* ÔªËØ»ñµÃ½¹µãʱµÄÑùʽ! */:focus { outline: 0;} /* ÌØÊâÎı¾µÄÑùʽ! */ins { text-decoration: none;}del { text-decoration: line-through;} /* ϸÏß±í¸ñÑùʽ */table { border-collapse: collapse; border-spacing: 0;}
3.·½±ãµÄCSSµ÷ÊÔÆ÷
Õâ¶Î´úÂë¿ÉÒÔ°ÑÒ³ÃæÉϵĸ÷ÖÖ±êǩǶÌ×Óò»Í¬µÄÏßÌõ»®·Ö³öÀ´£¬·½±ãÄãÕÒ³öBUG¡£
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
* { outline: 2px
ÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇé—ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÈÃÎÒÃÇÏÈÀ´¿´Ò»ÏÂCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØË®Æ½¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØË®Æ½¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪ
aut ......