div+css²¼¾Ö
1.È«²¿µÄ´úÂë¾ùÔÚÒ»¸öDIVÈÝÆ÷(ÎÒÔÝʱÕâÑù³Æºô) HeadÀïÃæ,ÎÒÃÇÀ´¿´¿´HeadµÄд·¨
#Head{
text-align:center;
}
ΪʲôHeadÇ°ÃæÓÐÒ»¸ö"#"ºÅÄØ?
¶øÓеÄÈ´ÊÇÔÚÇ°Ãæ¼ÓÒ»¸ö"£®"±ÈÈç "£®Head",ÓÐʱºòдcssµÄʱºò¸É´àʲôҲ²»¼Ó,±ÈÈç td,body,ËûÃÇÓÐʲôÇø±ð,¾ßÌåÔõôÓÃ,Èç¹û×ÐϸÄã¾Í»á·¢ÏÖÔÚHTML´úÂëµÄDIVÈÝÆ÷ÀïÃæ,ÓеÄÊÇ <div id="Head"></div> ¶øÓеÄÊÇÕâÑù <div class="HackBox"></div>
´ÓidºÍclass×ÖÃæÉϵÄÒâ˼,ÎÒÃÇÒ²ÒѾÁ˽âÁË,id¾ßÓÐΨһÐÔ,¶øclassÊÇÒ»¸öÀà,ÊÊÓÃÓڿɶà´ÎÖظ´Ê¹ÓõÄÈÝÆ÷,¶øÇ°ÃæʲôҲ²»´øµÄ,±ãÊÇ CSSÀïĬÈϵÄͨÓÃÓÚHTML´úÂëµÄÃèÐð,¼´¶ÔHTMLÀïµÄ´úÂëÆðÈ«¾Ö×÷ÓÃ,±ÈÈç td,±ãÊǶÔHTML±í¸ñÀïÃæµÄÈ«²¿ÁÐÆð×÷ÓÃ,text-align:centerÊÇÖ¸ÔÚ´ËÈÝÆ÷ÀïÃæµÄÎÄ×ÖÈ«²¿¾ÓÖжÔÆë,ÎÒÃÇ×¢Òâµ½,ÐкóÃ滹ÓÐÒ»¸ö·ÖºÅ ";",
Óï·¨ text-align : left | right | center | justify
ȡֵ˵Ã÷£º
left : ĬÈÏÖµ¡£×ó¶ÔÆë
right : ÓÒ¶ÔÆë
center : ¾ÓÖжÔÆë
justify : Á½¶Ë¶ÔÆë
2.HeadTop
#Head #HeadTop{
position:relative;
width:760px;
margin:10px auto 10px;
text-align:left;
}
Ϊʲô#HeadTopÇ°Ãæ»áÓÐÒ»¸ö#Head?
ÎÒÃÇ·¢ÏÖ#headTopÊÇǶÌ×ÔÚ#HeadÀïÃæµÄ,ΪÁËHeadÀïÃæµÄÉèÖÃÔÚHeadTopÀïÃæͬÑùÉúЧ,½«HeadTop·ÅÔÚÁËHeadºóÃæ
position : static | absolute | fixed | relative
È¡Öµ£º
static : ĬÈÏÖµ¡£ÎÞÌØÊⶨ룬¶ÔÏó×ñÑHTML¶¨Î»¹æÔò
absolute : ½«¶ÔÏó´ÓÎĵµÁ÷ÖÐÍϳö£¬Ê¹Óà left £¬ right £¬ top £¬ bottom µÈÊôÐÔÏà¶ÔÓÚÆä×î½Ó½üµÄÒ»¸ö×îÓж¨Î»ÉèÖõĸ¸¶ÔÏó½øÐоø¶Ô¶¨Î»¡£Èç¹û²»´æÔÚÕâÑùµÄ¸¸¶ÔÏó£¬ÔòÒÀ¾Ý body ¶ÔÏ󡣶øÆä²ãµþͨ¹ý z-index ÊôÐÔ¶¨Òå
fixed :δ֧³Ö¡£¶ÔÏó¶¨Î»×ñ´Ó¾ø¶Ô(absolute)·½Ê½¡£µ«ÊÇÒª×ñÊØһЩ¹æ·¶
relative :¶ÔÏ󲻿ɲãµþ£¬µ«½«ÒÀ¾Ý left £¬ right £¬ top £¬ bottom µÈÊôÐÔÔÚÕý³£ÎĵµÁ÷ÖÐÆ«ÒÆλÖÃ
width : auto | length
auto : ĬÈÏÖµ¡£ÎÞÌØÊⶨ룬¸ù¾ÝHTML¶¨Î»¹æÔò·ÖÅä
length : Óɸ¡µãÊý×ֺ͵¥Î»±êʶ·û×é³ÉµÄ³¤¶ÈÖµ | °Ù·ÖÊý¡£°Ù·ÖÊýÊÇ»ùÓÚ¸¸¶ÔÏóµÄ¿í¶È¡£²»¿ÉΪ¸
Ïà¹ØÎĵµ£º
±¾½Ì³ÌΪwww.sw-web.cnÍøÒ³Éè¼ÆѧԺÍƼöÎÄÕÂ
Èç¹ûÄãÏë³¢ÊÔһϲ»Óñí¸ñÀ´ÅÅ°æÍøÒ³£¬¶øÊÇÓÃCSSÀ´ÅÅ°æÄãµÄÍøÒ³£¬Ò²¾ÍÊdz£ÌýµÄÓÃDIVÀ´±àÅÅÄãµÄÍøÒ³½á¹¹£¬ÓÖ»òÕß˵ÄãÏëѧϰÍøÒ³±ê×¼Éè¼Æ£¬ÔÙ»òÕß˵ÄãµÄÉÏ˾ҪÄã¸Ä±ä´«Í³µÄ±í¸ñÅŰ淽ʽ£¬Ìá¸ßÆóÒµ¾ºÕùÁ¦£¬ÄÇôÄãÒ»¶¨Òª½Ó´¥µ½µÄÒ»¸ö֪ʶµã¾ÍÊÇCSSµÄºÐ×Óģʽ£¬Õâ¾ÍÊÇDIVÅÅ°æµÄºËÐÄË ......
Ö»Õë¶Ôie6£¬ie7ºÍfirefoxµÄcsshack
×¢ÒⶼҪдÔÚÕý³£ÑùʽµÄºó±ß£¬³ý!important·½·¨ÔÚÇ°±ß
---------------Õë¶ÔÑùʽÃû------------
Èç¹ûÖ»ÈÃie6¿´¼ûÓÃ*html .head{color:#000;}
Èç¹ûÖ»ÈÃie7¿´¼ûÓÃ*+html .head{color:#000;}
Èç¹ûÖ»ÈÃff¿´¼ûÓÃ:root body .head{color:#000;}
Èç¹ûÖ»ÈÃff¡¢IE8¿´¼ûÓÃhtml>/**/body .he ......
Èç¹ûÄãÊÇÍøվǰ¶Ë¿ª·¢ÈËÔ±£¬ÄÇô¶ÔÄãÀ´Ëµ£¬Ò²Ðí×öÒ»¸öƯÁÁµ¼º½²Ëµ¥»áºÜµÃÐÄÓ¦ÊÖ¡£±¾ÎÄҪΪ´ó¼Ò×ܽá¸÷ÖÖµ¼º½²Ëµ¥µÄ×ÊÔ´£¬ÒÔ±ãÈôó¼ÒµÄÍøվǰ¶Ë¿ª·¢µÄ¹¤×÷¸ü
·½±ã¸ü¿ìËÙ£¬Ö»ÒªÑ¡ÔñÏֳɵÄÀý×ӾͿÉÒÔÓ¦ÓÃÓÚ×Ô¼ºµÄÍøÕ¾ÁË¡£±¾ÎÄÊÕ¼¯µÄÕâЩ×ÊÔ´£¬´Ó·Ç³£¼òµ¥µÄHTMLºÍCSSµ¼º½²Ëµ¥£¬µ½·Ç³£¸´ÔӺ͸߼¶µÄ
JQuer ......
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......
ת:дµÄ²»´í,¶ÔÓÚÍøÒ³¿ª·¢ÓÐÖ¸µ¼ÒâÒå
ÔÚ¡¶ÓûÁ· CSS £¬±ØÏȹ¬ IE¡·ºÍ¡¶ÄãÓÐ <table /> Ç¿ÆÈÖ¢Â𣿡·ÕâÁ½ÆªÎÄÕÂÖУ¬¿´µ½Óв»ÉÙÆÀÂÛÓõ½div+CSS²¼¾ÖÕâ¸ö˵·¨£¬ÓÃÀ´ºÍtable²¼¾Ö±È½Ï¡£Êµ¼ÊÉÏdiv²»ÊÇÓÃÀ´²¼¾ÖµÄ£¬divÖ»ÊÇÓÃÀ´±íʾһ¸öÆäËüÔªËض¼ÎÞ·¨×¼È·±í´ïÓïÒâµÄÒ»¸ö¿éÇø£¬Ö»ÓÐCSSÊÇÓÃÓÚ²¼¾ÖµÄ£¬ËùÒÔ¸ù±¾¾Í²»´æÔÚdi ......