Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

10¸ö½ÚÔ¼¿ª·¢Ê±¼äµÄCSS¼¼ÇÉ

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


Ïà¹ØÎĵµ£º

ת:ÓÐÀûÓÚSEOµÄDIV+CSSµÄÃüÃû¹æÔò

ÎÄÕÂת×ÔÓÚ:http://www.pqshow.com/design/Dreamweaver/200912/12674.html
ÓÉÓÚÏîÄ¿ÖбàдÎĵµ½á¹¹¡¢±àдCSSµÄÈËÔ±½Ï¶à£¬²¢Óë³ÌÐòԱЭͬ¹¤×÷£¬ËùÒÔ¾ÍÐèҪͳһ¿ª·¢¹æ·¶£¬¸ù¾ÝXHTMlºÍCSS±àÖ¯µÄ¹æ·¶ºÍ´ó¶àÈ˵Äϰ¹ß£¬ÕûÀíÁËÒÔÏÂÕë¶Ô±¾ÏîÄ¿µÄÒ»¸ö¼òµ¥µÄ¿ª·¢¹æ·¶£º
Ò»¡¢CSSÎļþ¼°ÑùʽÃüÃû
1¡¢CSSÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºgl ......

½â¾öIE6¡¢IE7¡¢Firefox¼æÈÝ×î¼òµ¥µÄCSS Hack


ºÜÔç¾ÍÔÚÕâÀï¿´µ½¹ý½â¾ö·½°¸£¬Óëà»à»ÌÖÂÛºó·¢ÏÖÕâ¸ö·½°¸»¹ÊǺܿɿ¿µÄ¡£µ±È»£¬Î¨Ò»µÄȱµã¾ÍÊÇÿһ¸öÊôÐÔ¶¼ÒªÈ¥Hack£¬µ«ÎÒÔںܶàʵ¼ùÖУ¬Ö»ÓÑÐÞÕý’1-2¸öÊôÐԾͿÉÒÔÁË¡£
¾ßÌåд·¨ºÜÈÝÒ×£º
#someNode
{
position: fixed;
#position: fixed;
_position: fixed;
}
µÚһşøFirefoxÒÔ¼°ÆäËûä¯ÀÀÆ ......

DIV+CSSÉè¼ÆÊ±ä¯ÀÀÆ÷¼æÈÝÐÔÎÊÌâ

ÔÚÕâÖÖä¯ÀÀÆ÷ÏÂÏÔʾÕý³££¬ÔÚÁíÒ»ÖÖϾÍÂÒÁË£¬ÎÒÃÇÔÚ±àдCSSµÄʱºò»áºÜÄջ𣬸ÕÐÞ¸´ÁËÕâ¸öä¯ÀÀÆ÷µÄÎÊÌ⣬½á¹ûÁíÍâÒ»¸öä¯ÀÀÆ÷È´³öÁËÐÂÎÊÌâ¡£

-
  
ʲôÊÇä¯ÀÀÆ÷¼æÈÝ£ºµ±ÎÒÃÇʹÓò»Í¬µÄä¯ÀÀÆ÷£¨Firefox IE7
IE6£©·ÃÎÊͬһ¸öÍøÕ¾£¬»òÕßÒ³ÃæµÄʱºò£¬»á³öÏÖһЩ²»¼æÈݵÄÎÊÌ⣬ÔÚÕâÖÖä¯ÀÀÆ÷ÏÂÏÔʾÕý³£ ......

±í¸ñÍ·Ðй̶¨£ºÊ¹ÓÃCSSʵÏÖ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>±í¸ñÍ·Ðй̶¨£ºÊ¹ÓÃCSSʵÏÖ</title>
<style type="text/css" >
div.DivContainer /* Div */{
    overflow: scroll;
    border: solid 1px gray; ......

CSS³£¼ûµÄÈÃÔªËØË®Æ½¾ÓÖÐÏÔʾ·½·¨

ÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇé—ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÈÃÎÒÃÇÏÈÀ´¿´Ò»ÏÂCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØË®Æ½¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØË®Æ½¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪ
aut ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ