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 : Óɸ¡µãÊý×ֺ͵¥Î»±êʶ·û×é³ÉµÄ³¤¶ÈÖµ | °Ù·ÖÊý¡£°Ù·ÖÊýÊÇ»ùÓÚ¸¸¶ÔÏóµÄ¿í¶È¡£²»¿ÉΪ¸
Ïà¹ØÎĵµ£º
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ÏÂ,¿ÉÒÔʹÓÃ() ......
<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 ......
ul ol li dl dt dd¶¼ÊÇDIV+CSS×öÍøÒ³³¤ÓõĶ«Î÷,Ï൱ÓÚÒ»¿ÃÊ÷µÄÊ÷¼¼,ÏÂÃæ¾ÍÁ˽âÒ»ÏÂÕâЩ¶«Î÷µÄÈ«ÌåÓ÷¨,±¾ÈËÓÃdd,dt,dlÓõúÜÉÙ,¶®µÃ½áºÏʹÓöÔ×ö¼Ü¹¹ÊǺÜÓкô¦µÄŶ!
DIV
CSSÍøÒ³²¼¾ÖÖг£ÓõÄÁбíÔªËØul ol li dl dt ddÊÍÒ壬¿é¼¶ÔªËØdiv¾¡Á¿ÉÙÓ㬺ÍtableÒ»Ñù£¬Ç¶Ì×Ô½ÉÙÔ½ºÃ
ol
ÓÐÐòÁÐ±í¡£
<ol>
<li> ......
1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
2. ¼ì²éCSSÊÇ·ñÕýÈ·
¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ
¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
3. È·¶¨´íÎó ......
<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 ......