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.ʵ¼ÊÓ¦ÓÃÖÐÈ
Ïà¹ØÎĵµ£º
.box128{
width:128px;
height:128px;
text-align: center;
vertical-align:middle;
display:table-cell !important;
display:block;
border:1px solid #DDD;
  ......
ÊÂʵÉÏ£¬ËùÓбíÏֵĵط½¶¼ÐèÒªÓÃCSSÀ´ÊµÏÖ¡£ÎÒÃÇÒÔÇ°¶¼Ï°¹ßÓÃtableÀ´¶¨Î»ºÍ²¼¾Ö£¬ÏÖÔÚÒª¸ÄÓÃDIVÀ´¶¨Î»ºÍ²¼¾Ö¡£ÕâÊÇ˼ά·½Ê½µÄ±ä»¯£¬Ò»¿ªÊ¼ÓÐЩ²»Ï°¹ß¡£ºÇºÇ£¬Èκαä¸ï¶¼»áÓÐ×èÁ¦µÄ£¬ÎªÁËÏíÊܱê×¼´øÀ´µÄ"Òæ´¦"£¬·ÅÆúһЩÀϵĴ«Í³×ö·¨ÊÇÖµµÃµÄ¡£
¡¡¡¡Íⲿµ÷ÓÃÑùʽ±í
¡¡¡¡ÔÚÒÔÇ°£¬ÎÒÃÇͨ³£²ÉÓÃ2ÖÖ·½·¨Ê¹ÓÃÑùʽ±í£º
......
Â˾µÐ§¹û | ¹¦ÄÜÃèÊö
-----------------------------------------------
Alpha | ÉèÖò»Í¬µÄ͸Ã÷¶È±ä»¯Ð§¹û
-----------------------------------------------
Blur | ½¨Á¢Ä£ºýЧ¹û
-----------------------------------------------
DropShadow| ½¨Á¢Ò»ÖÖÆ«ÒƵÄÓ°ÏóÂÖÀª£¬¼´Í¶ÉäÒõÓ°
---------------------- ......
ÕâÊÇÔÏÈÎÒдµÄ ±¸ÍüµÄ ¾¡¹ÜдµÄºÜÀÃ
frame.css
Java´úÂë
CHARSET "UTF-°Ë";
html,body{
margin: Áãpx;
padding: Áãpx;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: Áãpx;
padding: Áãpx;
}
/*ÓÉÓÚÓÃÁËÏà¶ÔλÖøñ¾Ö£¬Ó¦·Ö±æÂÊÌ«´óʱ£¬Í¼Æ¬ºÍÎÄ ......
Ч¹ûÈçÏ£º
ʵÏÖ·½·¨£ºÀûÓÃÒ»ÏÂÁ½ÕÅͼƬ£º
ǰ̨´úÂ룺
<div id="nagivation">
&nb ......