Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

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   : Óɸ¡µãÊý×ֺ͵¥Î»±êʶ·û×é³ÉµÄ³¤¶ÈÖµ | °Ù·ÖÊý¡£°Ù·ÖÊýÊÇ»ùÓÚ¸¸¶ÔÏóµÄ¿í¶È¡£²»¿ÉΪ¸


Ïà¹ØÎĵµ£º

IEºÍFirefoxÔÚcss,JavaScript·½ÃæµÄ¼æÈÝÐÔ

1.document.formName.item("itemName") ÎÊÌâ
˵Ã÷:IEÏÂ,¿ÉÒÔʹÓÃdocument.formName.item("itemName")»òdocument.formName.elements["elementName"];FirefoxÏÂ,Ö»ÄÜʹÓÃdocument.formName.elements["elementName"].
½â¾ö·½·¨:ͳһʹÓÃdocument.formName.elements["elementName"].
2.¼¯ºÏÀà¶ÔÏóÎÊÌâ
˵Ã÷:IEÏÂ,¿ÉÒÔʹÓÃ() ......

ÔÚfirefoxÓëIEÏÂDIV+CSS PaddingЧ¹û²»Í¬µÄ½â¾ö·½·¨

<div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
ÒÔÉÏ´úÂëÔÚIEÖкÍfirefox»áÓв»Í¬µÄЧ¹û.×îÖ÷ÒªÔ­ÒòÊÇfirefox½âÊÍpadding-topÓëIEµÄЧ¹û²»Í¬
fixfox¶ÔDIV×ܸ߶ÈÊÇpadding-top+heightµÄ,¶øIEÖÐ,padding-topÊǰüº¬ÔÚheightÖеÄ,
Òª½â¾öÕâÒ»¸öì¶Ü,¿ÉÒÔÀûÓÃ!imp ......

DIV+CSSÖбêÇ©ul ol li dl dt ddÓ÷¨

ul ol li dl dt dd¶¼ÊÇDIV+CSS×öÍøÒ³³¤ÓõĶ«Î÷,Ï൱ÓÚÒ»¿ÃÊ÷µÄÊ÷¼¼,ÏÂÃæ¾ÍÁ˽âÒ»ÏÂÕâЩ¶«Î÷µÄÈ«ÌåÓ÷¨,±¾ÈËÓÃdd,dt,dlÓõúÜÉÙ,¶®µÃ½áºÏʹÓöÔ×ö¼Ü¹¹ÊǺÜÓкô¦µÄŶ!
DIV
CSSÍøÒ³²¼¾ÖÖг£ÓõÄÁбíÔªËØul ol li dl dt ddÊÍÒ壬¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol
ÓÐÐòÁÐ±í¡£
<ol>
<li> ......

10¸ö DIV+CSS ÐèҪעÒâµÄÎÊÌâ

1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¼´Ê¹ÊÇÀÏÊÖÒ²¾­³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
2. ¼ì²éCSSÊÇ·ñÕýÈ·
¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ
¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
3. È·¶¨´íÎó ......

css div Êó±ê¾­¹ýʱͼƬ±ä´ó

<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 ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ