7ÖÖCSSÔ²½Ç¿ò½â¾ö·½°¸
£±£¬ÎÞͼƬ´¿cssÔ²½Ç¿ò
ÊÕ¼ÀíÓÉ£º¼æÈÝÐÔÇ¿£¬²»ÓÃͼÐÎ
ͼһ
ÌØµã£º
1.²»ÓÃÈκÎͼÐΣ¬Ê¹Óúܶà¸ödivÈÝÆ÷Ä£Äâ³öÔ²½ÇЧ¹û¡£
2.¼æÈÝÐÔ£ºÍ¨É±ËùÓÐä¯ÀÀÆ÷
ȱµã£º
1.¹¹ÔìÕâ¸öÔ²½ÇÐèÒª¼ÓÈëÌ«¶àµÄÎÞÓïÒåµÄ±êÇ©£¬½á¹¹±È½ÏÈßÓà¡£
2.ÖØÓÃÐÔ²»Ç¿£ºÈç¹ûÒ»¸öÒ³ÃæÓжà¸öÔ²½Ç£¬²¢ÇÒҪʵÏÖ²»Í¬µÄ°ë¾¶´óС£¬ÔòÆäÁé»îÐÔ²»¹»¡£
3.±ß¿òÑÕÉ«ËäÈ»¿ÉÒÔµ÷½Ú£¬µ«»á¶ÔÒ³ÃæÖеĽṹ²úÉúÖÂÃüµÄÓ°Ï죬ÊÊÓÃÓÚÉ«²Êµ¥Ò»²¢ÇÒÒ»¸öÒ³ÃæÖÐÔ²½ÇÓ¦Óò»¶àµÄÒ³Ãæ¡£
4.²»ÈÝÒ×ʵÏÖÔ²»¡ÄÚÓн¥±äÉ«µÄͼÐα³¾°¡£
5.Ô²½Ç¿ò²»¹»Ô²»¬£¬Óоâ³ÝÏÖÏó£¬ÊʺÏÓÚ±³¾°É«ºÍµ±Ç°É«É«²î²»´ó²¢ÇÒÔ²»¡½ÏСµÄÍøÒ³¡£
ʵÏÖÔÀí£º
Óúܶà1ÏñËØ¸ßµÄdivÈÝÆ÷£¬ÀûÓñ³¾°É«ºÍ±ß¿òÉ«À´Ä£Äâ³öÔ²½Ç¿òµÄÂÖÀªÏß¡£
ʵÀýÑÝʾ£º http://www.cssplay.co.uk/boxes/snazzy.html
£²£¬ÎÞͼƬ´¿cssÔ²½Ç¿ò£¬ÓÃÌØÊâ×Ö·û£¨&bull£©
ÊÕ¼ÀíÓÉ£ºÔ²»¬£¬²»ÓÃͼÐÎ
ͼ¶þ
ÌØµã£º
1.²»ÓÃÈκÎͼÐΣ¬Ê¹ÓÃÌØÊâ×Ö·û•£¨Ô²µã£©Ä£Äâ³öÔ²½Ç¡£
2.¼æÈÝÐÔ£ºÍ¨É±ËùÓÐä¯ÀÀÆ÷
3.Ô²½Çƽ»¬
ȱµã£º
1.¹¹ÔìÕâ¸öÔ²½ÇÒ»ÑùÐèÒª¼ÓÈëÎÞÓïÒåµÄ±êÇ©£¬½á¹¹ÈßÓ࣬ͬµÚÒ»ÖÖÒ»Ñù¡£
2.ÖØÓÃÐÔ²»Ç¿£ºÈç¹ûÒ»¸öÒ³ÃæÓжà¸öÔ²½Ç£¬²¢ÇÒҪʵÏÖ²»Í¬µÄ°ë¾¶´óС£¬ÐèÒªµ÷ÕûËĸö½ÇͼƬµÄ¶¨Î»£¬²¢ÇÒ×Ö·û´óС¶ÔÆäÓÐÓ°Ï죬Áé»îÐÔ²»¹»¡£
3.ÑÕÉ«Ëä¿Éµ÷½Ú£¬µ«ÒªÇóÀïÃæµÄ±³¾°É«ºÍ×Ö·ûµÄÑÕÉ«Ïàͬ£¬²»ÄÜ×ö³É±ß¿òÏßÌõ¡£ÊÊÓÃÓÚÉ«²Êµ¥Ò»²¢ÇÒÒ»¸öÒ³ÃæÖÐÔ²½Ç²»ÊÇÌ«¶àµÄÒ³Ãæ¡£
4.Ò»Ñù²»ÈÝÒ×ʵÏÖÔ²»¡ÄÚÓн¥±äÉ«µÄͼÐα³¾°¡£
ʵÏÖÔÀí£º
ÓÃÌØÊâ×Ö·û£¨&bull£©£¬ÀûÓö¨Î»£¬½ØÈ¡ËÄ·Ö֮һԲģÄâ³öÔ²½Ç¿òµÄÒ»¸ö½ÇͼƬ¡£
ʵÀýÑÝʾ£ºhttp://www.cssplay.co.uk/boxes/curves.html
£³£¬Í¼Æ¬Ô²½Ç¿ò
ÊÕ¼ÀíÓÉ£º¼æÈÝÐÔÇ¿£¬¿ÉÒÔ±íÏֺܸ´ÔÓµÄÔ²½ÇЧ¹û¡£
ͼÈý
ÌØµã£º
1.ʹÓÃËĸöÔ²½ÇͼÐΣ¨»òÒ»¸öԲͼƬ£©¡£
2.¼æÈÝÐÔ£ºÍ¨É±ËùÓÐä¯ÀÀÆ÷¡£
3.ÕâÊÇ×î³£ÓõÄÔ²½Ç¿ò×ö·¨¡£
4.ÒòΪ²ÉÓÃͼƬÀ´±íÏÖ£¬ËùÒÔÆäÔ²½ÇÊdz¬¼¶Æ½»¬£¬ÎÞÈκξâ³ÝÏÖÏó¡£
5.±íÏַḻ£¬ÊÊÓÃÓÚ¸÷ÖÖ¶ÔͼƬ±íÏÖÒªÇó½Ï¸ßµÄÔ²½Ç¿ò¡£
ȱµã£º
1.¹¹ÔìÕâ¸öÔ²½ÇÒ²ÐèÒª¼ÓÈëËĸö±êÇ©À´×°ËÄÕŽÇͼƬ£¬½á¹¹Ò²ÓÐÈßÓà¡£
2.ÖØÓÃÐÔ²»Ç¿£ºÈç¹ûÒ»¸öÒ³ÃæÓжà¸öÔ²½Ç£¬²¢ÇÒҪʵÏÖ²»Í¬µÄ°ë¾¶´óС£¬ÔòÒªÖØÐÂÖÆ×÷Ò»Ì×Ô²½ÇͼƬ¡£
3.Èç¹û¶Ô½á¹¹µÄÈßÓàûÓÐÌØ±ðµÄÐèÇó£¬Õâ¾ÍÊdz¬¼¶Ô²»¬Ô²½Ç¿òµÄ½â¾ö·½°¸ÁË¡£
ʵÏÖÔÀí£º
ÀûÓþʬ¸ñÔÀí£¬ÔÚÒ»¸öÈÝÆ÷µÄËĸö½Ç¼ÓÈë¾ø¶Ô¶¨Î»£¨»òÏà¶Ô¶¨Î»£©µÄËÄÕÅÔ²½ÇͼƬ¡£
ʵÀýÑÝʾ£ºhttp://www.cssplay.co.uk/boxes
Ïà¹ØÎĵµ£º
½ñÌì¿´µ½Ò»ÆªÎÄÕÂÊÇcss´òÔì½ø¶ÈÌõ¡£È»ºó×Ô¼º×ö³É¶¯Ì¬µÄ½ø¶ÈÌõ£¬Í¬Ñù£¬Ê¹Óõ½cssºÍjauery£¬Çë¿´£º
1 Ê×ÏÈ£¬ÐèÒªÒýÈëjquery.jsÎļþ¡£
<script src="Content/jquery.js" type="text/javascript"></script>
2 ËùÓõ½µÄÑùʽ²¿·Ö£º
<style>
.graph {
& ......
IE6¡¢IE7¡¢IE8¡¢FFä¯ÀÀÆ÷µÄCSS¼æÈÝÎÊÌ⣬±¾À´ie6¸úffÖ®¼äµÄ¼æÈÝÊǺÜÈÝÒ×½â¾öµÄ¡£¼ÓÉϸöie7»áÂé·³µã£¬ie8µÄ³öÏ־͸üÍ·ÌÛÁË£¬ÔÀ´hack ie7µÄ·½·¨ÓÖ²»ÄÜÓÃÁË£¬Ôõô°ìÄØ£¿
»¹ºÃ£¬Î¢ÈíÌṩÁËÕâÑùÒ»¸ö´úÂ룺 °ÑÕâ¶Î´úÂë·Åµ½ÀïÃæ£¬ÔÚie8ÀïÃæµÄÒ³Ãæ½âÎöÆðÀ´¾Í¸úie7һģһÑùµÄÁË£¬ËùÒÔ£¬»ù±¾ÉÏ¿ÉÒÔÎÞÊÓie8£¬Ê£ÏµĴúÂëÖ»ÐèÒªÕâÑùд¾ ......
Alert{
backgroundColor: #2791DB;
headerColors:#2791DB,#2791DB;
borderThicknessLeft:0;
borderThicknessRight:0;
borderThicknessTop:0;
font-size:14;
buttonStyleName: myCustomButtonStyleName;
}
.myCus ......
jspÒ³Ãæµ÷Óà <link type="text/css" rel="stylesheet" href="css/style.css"/>Ñùʽ±í
ÆäËûÑùʽ¶¼¿ÉÒÔÔÙÒ³ÃæÕý³£ÏÔʾ
.button-qingchu{background:url(images/qingchu.jpg); width:70px; height:30px; border:0px;} ÏñÕâÑùµÄ±³¾°Í¼Æ¬Ñùʽ¾ÍÏÔʾ²»³öͼƬÊÇʲôÎÊÌ⣡ Myeclipse 6.5
ÔÚhtmlÖж¼¿ÉÒÔÏÔʾ ÔÚjspÖÐÏÔʾ ......
Ê×ÏÈҪ˵µÄÊÇÔªËØµÄborder£¬ÔªËصı߿ò (border) ÊÇÎ§ÈÆÔªËØÄÚÈݺÍÄڱ߾àµÄÒ»Ìõ»ò¶àÌõÏß¡£CSS border ÊôÐÔÔÊÐíÄã¹æ¶¨ÔªËر߿òµÄÑùʽ¡¢¿í¶ÈºÍÑÕÉ«¡£
CSS ±ß¿ò
ÔÚ HTML ÖУ¬ÎÒÃÇʹÓñí¸ñÀ´´´½¨Îı¾ÖÜΧµÄ±ß¿ò£¬µ«ÊÇͨ¹ýʹÓà CSS ±ß¿òÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔ´´½¨³öЧ¹û³öÉ«µÄ±ß¿ò£¬²¢ÇÒ¿ÉÒÔÓ¦ÓÃÓÚÈκÎÔªËØ¡£
ÔªËØÍâ±ß¾àÄÚ¾ÍÊÇÔªËØ ......