CSS¶¨Î»
1.¶¨Î»µÄ¶¨Òå
CSSÖж¨Î»ÓÃposition:static|relative|absolute|fixedÀ´ÊµÏÖ
static:1.Õý³£Á÷ÏÔʾ£»2.²»ÄÜͨ¹ýz-index½øÐвãµþ·Ö¼¶£»3.¿ÉÉèÖÃwidth,height£»4.ÉèÖÃtop,right,bottom,leftÎÞЧ
relative:1.²»ÍÑÀëÎĵµÁ÷£¬²Î¿¼×ÔÉíµÄ¾²Ì¬Î»Öã¬Í¨¹ýtop,right,bottom,left½øÐж¨Î»£»2.¿Éͨ¹ýz-index½øÐвãµþ·Ö¼¶£»3.ÓÉÓÚÆ«ÒÆ¿ÉÄܻᵼÖ¿í¶È¡¢¸ß¶È´íλ£»½¨ÒéÉèÖÃÆ«ÒÆÁ¿ºó£¬ÖØÐÂÉèÖÃÔªËØµÄwidth,heightÊôÐÔ£»4.ÓÉÓÚÔªËØÆ«ÒÆ£¬»áµ¼ÖºóÃæµÄÄÚÈݱ»¸²¸Ç£¬ËùÒÔÒªÏëÕý³£ÏÔʾºóÃæµÄÄÚÈÝ£¬ÐèÒª½«ºóÃæÄÚÈÝ×÷Ϊһ¸ö²ã£¬È»ºóÉèÖÃÕâ¸ö²ãµÄmargin-top:ÉÏ·½Æ«ÒÆÔªËصÄtopÖµ¡£
absolute:1.ÍÑÀëÎĵµÁ÷£¬Í¨¹ýtop,right,bottom,left¶¨Î»£¬ËüÒÀÀµÆä×î½üµÄ¸¸¼¶ÔªËض¨Î»£¬µ±¸¸¼¶positionΪstaticʱ£¬absoluteÔªËØ½«ÒÔbody×ø±êÔµã½øÐж¨Î»£»2.¿Éͨ¹ýz-index½øÐвãµþ·Ö¼¶¡£
fixed£º1.¹Ì¶¨¶¨Î»£¬ÆäËù¹Ì¶¨µÄ¶ÔÏóÊÇ¿ÉÊÓ´°¿Ú£¬¶ø²¢·ÇÊÇbody»òÊǸ¸¼¶ÔªËØ£»2.¿Éͨ¹ýz-index½øÐвãµþ·Ö¼¶¡£
z-index£ºauto | number£»auto ×ñ´ÓÆä¸¸¶ÔÏóµÄ¶¨Î»£» numberΪÕûÊýÖµ£¬¿ÉÕý¡¢¸º£¬µ±È»ÖµÔ½´ó£¬²ãÔªËØÔ½¿¿ÉÏ¡£
2.¶¨Î»µÄÔÀí
2.1¿ÉÒÔÎ»ÒÆµÄÔªËØ£¨Ïà¶Ô¶¨Î»£©
ÔÚÎı¾Á÷ÖУ¬ÈκÎÒ»¸öÔªËØ¶¼±»Îı¾Á÷ÏÞÖÆÁË×ÔÉíµÄλÖ㬵«Í¨¹ýCSS¿ÉÒԸıäÕâÐ©ÔªËØµÄλÖá£ÎÒÃÇͨ¹ýfloatÀ´ÈÃÔªËØ¸¡¶¯£»Í¨¹ýmarginÀ´ÈÃÔªËØ²úÉúλÖÃÒÆ¶¯£¬µ«margin²¢·ÇÕæÊµµÄÎ»ÒÆ£¬ÒòΪÄÇÖ»ÊÇÎ»ÒÆµÄÕÏÑÛ·¨£¬¶øÕæÕýÒâÒåÉϵÄÎ»ÒÆÊÇͨ¹ýtop,right,bottom,leftÕë¶ÔÒ»¸öÏà¶Ô¶¨Î»µÄÔªËØËù²úÉúµÄ¡£
£¨Í¼1£©
ÎÒÃÇ¿´µ½Í¼1ÊÇÒ»¸ö¿í¶ÈΪ200px£¬¸ß¶È50px£¬margin:25px£»border:25px solid #333; padding:25px;Ïà¶Ô¶¨Î»µÄÔªËØ£¬²¢ÇÒÎ»ÒÆ¾àÉÏ50px£¬¾à×ó50px¡£¶øÏ·½ÊÇÒ»¸öĬÈ϶¨Î»µÄºÚÉ«Çø¿é£¬ÎÒÃÇ¿´µ½Õâ¸ö´¦ÔÚÎı¾Á÷µÄÇø¿é±»ÉÏÃæµÄÏà¶Ô¶¨Î»ÔªËص²×¡ÁËÒ»²¿·Ö£¬Õâ˵Ã÷£ºµ±ÔªËر»ÉèÖóÉÏà¶Ô¶¨Î»»ò¾ø¶Ô¶¨Î»ºó£¬½«×Ô¶¯²úÉú²ãµþ£¬ËûÃDzãµþ¼¶±ð×ÔÈ»¸ßÓÚÎı¾Á÷£¬³ý·ÇÉèÖÃz-indexֵΪ¸ºÖµ£¬µ«ÔÚFirefoxä¯ÀÀÆ÷ÖÐz-indexΪ¸ºÖµÊ±½«²»»áÏÔʾ¡£ÎÒÃÇ·¢ÏÖµ±Ïà¶Ô¶¨Î»ÔªËØÎ»Òƺ󣬱íÏÖÄÚÈÝÒѾÍÑÀëÁËÎı¾Á÷£¬Ö»ÊÇÔÚÎı¾Á÷Öл¹ÎªÔÀ´µÄÏà¶Ô¶¨Î»ÁôÏÂÁË×Ü¿íÓë×ܸߡ£Õâ˵Ã÷ÔÚÏà¶Ô¶¨Î»ÖУ¬ËäÈ»±íÏÖÇøÍÑÀëÁËÔÀ´µÄÎı¾Á÷£¬µ«ÊÇÔÚÎı¾Á÷Öл¹ÓдËÏà¶Ô¶¨Î»µÄÀÏÎÑ¡£Ìرð×¢Ò⣺1.ʵ¼ÊÓ¦ÓÃÖÐÈ
Ïà¹ØÎĵµ£º
ÔÚ ASP .NET µÄ AJAX ¿Ø¼þÖÐ TabContainer µÄ CSS ÑùʽµÄ±àд¾ßÓÐÒ»¶¨µÄ¸ñʽ¹æ·¶¼°ÃüÃû¹æÔò£¬ÈçÏÂͼ£º
¾ßÌåµÄ CSS ÑùʽµÄ±àдΪ£º
.ajax_tab_menu .ajax__tab_header /*ÕûÌå°´Å¥µ×Ñùʽ*/
{
font-family:ËÎÌå;
height:29px;
font-size:12px;
background:#181c1f repeat-x bottom;
}
.ajax_tab_menu .ajax__tab ......
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
¡¡¡¡2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö± ......
¡¡¡¡Ê¹ÓÃXHTML+CSSÀ´ÊµÏÖÔªËØµÄ´¹Ö±¾ÓÖÐÒ»Ö±ÊÇǰ¶Ë¿ª·¢ÖеÄÒ»¸ö±È½Ï¸´ÔÓÇÒ¼¬ÊÖµÄÎÊÌ⣬×÷ÎªÍøÒ³Éè¼ÆÊ¦»òǰ¶Ë¿ª·¢¹¤³Ìʦ£¬Õâ¸ö´¹Ö±¾ÓÖÐÎÊÌâ
Ò²ÊDZØÐëÕÆÎյļ¼ÇÉÖ®Ò»£¬Ò»Ð©»¥ÁªÍø¹«Ë¾ÃæÊÔÌâÖÐÒ²»á³öÏÖÕâÀàÌâÄ¿¡£½ñÌ챩·ç±ò±ò½«·ÖÏíÒ»¸öÍêÃÀͨ¹ýCSSʵÏÖ´¹Ö±¾ÓÖеķ½·¨£¬¸Ã·½·¨ÊÇÓÉaka
Yuhů·¢Ã÷µÄ£¬Õâ¸ö·½·¨Ò²ÊÇĿǰ±©·ç ......
cssÔ²½Çbox±¸Íü <style type="text/css">
div.box{}
div.boxtitle{background-color:#888; height:24px; line-height:24px; vertical-align:middle; padding-left:10px;}
div.boxcontent{ padding:10px; border:1px #888 solid;}
b.r {display:block;background: #fff} ......
Â˾µÐ§¹û | ¹¦ÄÜÃèÊö
-----------------------------------------------
Alpha | ÉèÖò»Í¬µÄ͸Ã÷¶È±ä»¯Ð§¹û
-----------------------------------------------
Blur | ½¨Á¢Ä£ºýЧ¹û
-----------------------------------------------
DropShadow| ½¨Á¢Ò»ÖÖÆ«ÒƵÄÓ°ÏóÂÖÀª£¬¼´Í¶ÉäÒõÓ°
---------------------- ......