10¸ö·Ç³£ÓÐÓõÄCSS¼¼ÇÉ
1. ½«ÍøÒ³»òÔªËØ¾ÓÖÐ
HTML£º
<div class="wrap">
</div><!-- end wrap -->
CSS£º
.wrap { width:960px; margin:0 auto;}
2.Sticky Footer (ÈÃÒ³½ÅÓÀÔ¶Í£¿¿ÔÚÒ³Ãæµ×²¿£¬¶ø²»ÊǸù¾Ý¾ø¶ÔλÖÃ)
HTML£º
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
CSS£º
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End&nb
Ïà¹ØÎĵµ£º
±¾ÎÄΪ´ó¼ÒÊÕ¼¯¾«Ñ¡ÁË30¸öʹÓô¿CSS
Íê³ÉµÄÇ¿´óʵ¼ùµÄÓÅÐãCSS¼¼ÊõºÍʵÀý
£¬Äú½«ÔÚÕâÀï·¢ÏֺܶàÓëÖÚ²»Í¬µÄ¼¼Êõ£¬±ÈÈç:ͼƬ¼¯¡¢ÒõӰЧ¹û¡¢¿ÉÀ©Õ¹°´Å¥¡¢²Ëµ¥µÈ…ÕâЩʵÀý¶¼ÊÇʹÓô¿CSSºÍHTMLʵÏֵġ£
µ¥»÷ÿ¸öʵÀýµÄ±êÌâ¿ÉÒÔ±»×ªÏòµ½¸Ã¼¼ÊõʵÀýµÄÏà¹Ø½Ì³Ì»ò˵Ã÷Ò³Ãæ(Ó¢ÎÄ)£¬µ¥»÷ÿ¸öʵÀýµÄͼƬ½ØÍ ......
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½øÐ ......
IE8 ×Ô¶¯ÔÚ¼æÈÝģʽÏÂÔËÐУº
¼ÓÈëÕâôһÐÐ <meta http-equiv="x-ua-compatible" content="ie=7" />
ÆäÄÚÈÝËæÖøÖ¸¶¨µÄÒ³ÃæÄ£Ê½¶ø¸ü¸Ä£¬µ±ÒªÄ£ÄâIE7ʱ£¬Ö¸¶¨IE=IE7£¬Ò²¿ÉÒÔÖ¸¶¨IE=6À´Ä£·ÂIE6
Çø±ðIE6ÓëFF£º
background:orange;*background:blue;
Çø±ðIE6ÓëIE7£º
background:green !important;background:blue;
......
Èç¹ûÄãÊÇÍøÕ¾Ç°¶Ë¿ª·¢ÈËÔ±£¬ÄÇô¶ÔÄãÀ´Ëµ£¬Ò²Ðí×öÒ»¸öƯÁÁµ¼º½²Ëµ¥»áºÜµÃÐÄÓ¦ÊÖ¡£±¾ÎÄҪΪ´ó¼Ò×ܽá¸÷ÖÖµ¼º½²Ëµ¥µÄ×ÊÔ´£¬ÒÔ±ãÈôó¼ÒµÄÍøÕ¾Ç°¶Ë¿ª·¢µÄ¹¤×÷¸ü
·½±ã¸ü¿ìËÙ£¬Ö»ÒªÑ¡ÔñÏֳɵÄÀý×ӾͿÉÒÔÓ¦ÓÃÓÚ×Ô¼ºµÄÍøÕ¾ÁË¡£±¾ÎÄÊÕ¼¯µÄÕâЩ×ÊÔ´£¬´Ó·Ç³£¼òµ¥µÄHTMLºÍCSSµ¼º½²Ëµ¥£¬µ½·Ç³£¸´ÔӺ͸߼¶µÄ
JQuer ......