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

ÌÔ±¦css×¢½â

ÎÒÃǰÑËü·ÖΪÈçÏÂͼËùʾ¿é
¾ßÌåµÄHTML,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 :¡¡ Óɸ¡µãÊý×ֺ͵¥Î»±êʶ·û×é³ÉµÄ³¤¶ÈÖµ | °Ù·ÖÊý¡£°Ù·ÖÊýÊÇ»ùÓÚ¸¸¶ÔÏóµÄ¿í¶È¡£²»¿ÉΪ¸ºÊý¡£¿ÉÒÔÓÃÏà¶Ô³¤¶ÈÏóËØµ¥Î»px»òÕß¾ø¶Ô³¤¶ÈinµÈ×öµ¥Î»(1in = 2.54cm = 25.4 mm = 72pt = 6pc)
margin:


Ïà¹ØÎĵµ£º

¹ØÓÚcssÑùʽѡÔñÆ÷

1.idÑ¡ÔñÆ÷
idÑ¡ÔñÆ÷µÄÃüÃûÓ¦¼á³ÖÌåÏÖÎĵµµÄ½á¹¹ºÍλÖá£
Èç:#header¡¢#footer¡¢#left µÈ
2.classÑ¡ÔñÆ÷
classÑ¡ÔñÆ÷µÄÃüÃûÓ¦¸ÃÌåÏÖÃû³ÆµÄÑùʽÃèÊöÐÔ¡£
È磺.red¡¢.underline µÈ
3.¶ÔÓÚÄ£¿éµÄÍâΧ½á¹¹ÔªËØ×îºÃÓÃidÊôÐÔ£¬ÄÚ²¿ÔªËØ¿ÉÒÔ¶¨ÒåclassÊôÐÔ£¬
ÒòΪÍâΧµÄ½á¹¹Ò»°ãʽΨһµÄ¡£¶øÄÚ²¿µÄÔªËØ¿ÉÄÜ»á³öÏÖÖØ¸´¡£
ÁíÍ ......

10¸ö·Ç³£ÓÐÓõÄCSS¼¼ÇÉ


1. ½«ÍøÒ³»òÔªËØ¾ÓÖР      
      
    
HTML£º
<div class="wrap">  
</div><!-- end wrap -->  
CSS£º
.wrap { width:960px; margin:0 auto;}   ......

DIV+CSSÖÆ×÷¹ö¶¯Ìõ


<style> 
* {  
 margin:0;  
 padding:0;  
}  
body {  
 font-size:12px;  
 font-family:Verdana, Arial, Helvetica, sans-serif;  
 background:#FFFFFF;  
 margin: ......

css¶¨Î»ÖÐabsoluteҪעÒâµÄÊÂÏî

1.positionµÄabsoluteÊôÐÔ±íʾ¸Ã¿éÒѾ­ÍêÈ«ÍÑÀëÎı¾Á÷ÁË¡£Ò²¾ÍÊDz»ÔÙÕ¼ÓÿռäλÖÃ
¡£ÍêÈ«¿¿top,button,right,leftÀ´½øÐж¨Î»¡£
¡¡Õâ¸ö±ØÐëÄܹ»ÍêÈ«Àí½â¡£Í¬Ê±Îª¼õÉÙ´íÎóÔÚÉèÖÃabsoluteºó£¬Ò»¶¨ÖÁÉÙÖ¸¶¨top,buttom,right,leftÖеÄÒ»¸ö¡£
2.Èç¹û¿éÉèÖÃÁËabsoluteÊôÐÔ£¬Æä¶¨Î»µÄÔ­µãºÍ¸¸¿éµÄpositionÓйء£
¡¡Èç¹û¸¸¿éÉèÖà ......

´«ÖDz¥¿Í——cssϸ½Ú

Ò»£ºcssµÄ¸ÅÄî
    CSSÊDzãµþÑùʽ±í£¨Cascading Style Sheets£©ÓÃÀ´¶¨ÒåÍøÒ³µÄÏÖʵЧ¹û¡£¿ÉÒÔ½â¾öhtml´úÂë¶ÔÑùʽ¶¨ÒåµÄÖØ¸´£¬Ìá¸ßÁ˺óÆÚÑùʽ´úÂëµÄ¿Éά»¤ÐÔ£¬²¢ÔöÇ¿ÁËÍøÒ³µÄÏÖʵЧ¹û¹¦ÄÜ¡£¼òµ¥Ò»¾ä»°£ºCSS½«ÍøÒ³ÄÚÈݺÍÏÔʾÑùʽ½øÐзÖÀ룬Ìá¸ßÁËÏÔʾ¹¦ÄÜ¡£
¶þ£ºcssµÄÓŵã
    Ñùʽ±í¶¨ÒåÈç ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ