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½¥±ä´úÂë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 ......
½ñÌì¿´µ½Ò»ÆªÎÄÕÂÊÇcss´òÔì½ø¶ÈÌõ¡£È»ºó×Ô¼º×ö³É¶¯Ì¬µÄ½ø¶ÈÌõ£¬Í¬Ñù£¬Ê¹Óõ½cssºÍjauery£¬Çë¿´£º
1 Ê×ÏÈ£¬ÐèÒªÒýÈëjquery.jsÎļþ¡£
<script src="Content/jquery.js" type="text/javascript"></script>
2 ËùÓõ½µÄÑùʽ²¿·Ö£º
<style>
.graph {
& ......
Ê×ÏÈҪ˵µÄÊÇÔªËØµÄborder£¬ÔªËصı߿ò (border) ÊÇÎ§ÈÆÔªËØÄÚÈݺÍÄڱ߾àµÄÒ»Ìõ»ò¶àÌõÏß¡£CSS border ÊôÐÔÔÊÐíÄã¹æ¶¨ÔªËر߿òµÄÑùʽ¡¢¿í¶ÈºÍÑÕÉ«¡£
CSS ±ß¿ò
ÔÚ HTML ÖУ¬ÎÒÃÇʹÓñí¸ñÀ´´´½¨Îı¾ÖÜΧµÄ±ß¿ò£¬µ«ÊÇͨ¹ýʹÓà CSS ±ß¿òÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔ´´½¨³öЧ¹û³öÉ«µÄ±ß¿ò£¬²¢ÇÒ¿ÉÒÔÓ¦ÓÃÓÚÈκÎÔªËØ¡£
ÔªËØÍâ±ß¾àÄÚ¾ÍÊÇÔªËØ ......
cssʵÏÖ±³¾°ÀÉì ÖÆ×÷Ò³ÃæÊ±£¬ÓÐʱÐèÒªÔÚ±í¸ñÄÚ²åÈë±³¾°Í¼,ÎÒÃÇ¿ÉÒÔʹÓÃCSS½øÐпØÖÆ£¬´úÂ룺
style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;"
ÆäÖУ¬./images/counter_bg.jpgΪÏÔʾͼƬ·¾¶¡£ ......
½ñÌìдÁËÒ»¸ö¼òµ¥µÄÍøÒ³£¬Çë¿´´úÂ룺
´íÎóµÄ£º
HTML´úÂ룺
½ñÌìµÄÈÕ×Ó
//CSS´úÂëʹÓÃÍⲿÒýÈëʽ
ÎҵļÒÏçÔÚ¿Àï
CSS´úÂ룺
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:red; /*ÒªµÄ¾ÍÊÇÕâÑùµÄЧ¹û£ºÉèÖÃ×ÖÌåÑÕɫΪºìÉ«*/
}
½á¹ûÏÔʾµÄ×ÖÌ ......