jquery+css Íê³É½ø¶ÈÌõ¹¦ÄÜ
½ñÌì¿´µ½Ò»ÆªÎÄÕÂÊÇcss´òÔì½ø¶ÈÌõ¡£È»ºó×Ô¼º×ö³É¶¯Ì¬µÄ½ø¶ÈÌõ£¬Í¬Ñù£¬Ê¹Óõ½cssºÍjauery£¬Çë¿´£º
1 Ê×ÏÈ£¬ÐèÒªÒýÈëjquery.jsÎļþ¡£
<script src="Content/jquery.js" type="text/javascript"></script>
2 ËùÓõ½µÄÑùʽ²¿·Ö£º
<style>
.graph {
position: relative;
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
margin-bottom: .5em;
}
.graph .bar {
display: block;
position: relative;
background: #37709B;
text-align: left;
&
Ïà¹ØÎĵµ£º
CSS HackËÙ¼Ç: *html , IE +html , IE _html , IE6 *+html , IE7 height/*\**/,IE8 ±ØÐë±£Ö¤HTML¶¥²¿ÓÐÈçÏÂÉùÃ÷:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ʾÀý height:100px;¡¾FF¡¿ ......
¡¡
¡¡Æäʵ£¬ÒÔǰ´ÓÀ´Ã»ÓнӴ¥¹ýCSSÏà¹ØµÄÄÚÈÝ£¬¶¼ÊÇÔÚ×öÒµÎñµÄ±à³Ì£¬´ÓÀ´Ã»Ïë¹ýÇ°Ì¨Ò³ÃæµÄÉè¼ÆÒ²ÄÜÈç´Ë¸´ÔÓ¡£Õâ´ÎÏîÄ¿µÄ¿ª¹ý¹ý³ÌÖУ¬×÷ΪCSS²ËÄñµÄÎÒÒ²
½Ó´¥µ½CSSµÄÏà¹ØÉè¼Æ¡£Ëù³öÏֵĵͼ¶ÎÊÌâºÍÀ˷Ѻܶàʱ¼äµÄ×´¿öÒ²²ã³ö²»ÇËùÒÔͨ¹ý¸÷·½ËÑË÷ºÍ×Ô¼ºµÄʵ¼ÊѧϰÖÐ×ܽá³ö¼¸µãIEºÍFirefox¶ÔCSS
µÄÇø±ð£¬¸ø´ó¼Ò½è¼ø¡£
¡¡¡ ......
1¡¢IEÓëFirefox϶ÔCSS½âÎöµÄÇø±ð
¶Ô¸ß¶ÈµÄ½âÎö
IE£º½«¸ù¾ÝÄÚÈݵĸ߶ȱ仯£¬°üÀ¨Î´¶¨Òå¸ß¶ÈµÄͼƬÄÚÈÝ£¬¼´Ê¹¶¨ÒåÁ˸߶ȣ¬µ±ÄÚÈݳ¬¹ý¸ß¶Èʱ£¬½«Ê¹ÓÃʵ¼Ê¸ß¶È
Firefox£ºÃ»Óж¨Òå¸ß¶Èʱ£¬Èç¹ûÄÚÈÝÖаüÀ¨ÁËͼƬÄÚÈÝ£¬MFµÄ¸ß¶È½âÎöÊǸù¾ÝÓ¡Ë¢±ê×¼£¬ÕâÑù¾Í»áÔì³ÉºÍʵ¼ÊÄÚÈݸ߶Ȳ»·ûºÏµÄÇé¿ö£»µ±¶¨ÒåÁ˸߶ȣ¬µ«ÊÇÄÚÈݳ¬¹ý¸ß¶Èʱ ......
CSS:
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
......
css½¥±ä´úÂë4ÖÖ
Ò»¡¢´ÓÉÏÍùϽ¥±ä
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
¶þ¡¢´Ó×óÉÏÖÁÓÒϽ¥±ä
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-col ......