ÌÔ±¦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:
Ïà¹ØÎĵµ£º
1.idÑ¡ÔñÆ÷
idÑ¡ÔñÆ÷µÄÃüÃûÓ¦¼á³ÖÌåÏÖÎĵµµÄ½á¹¹ºÍλÖá£
Èç:#header¡¢#footer¡¢#left µÈ
2.classÑ¡ÔñÆ÷
classÑ¡ÔñÆ÷µÄÃüÃûÓ¦¸ÃÌåÏÖÃû³ÆµÄÑùʽÃèÊöÐÔ¡£
È磺.red¡¢.underline µÈ
3.¶ÔÓÚÄ£¿éµÄÍâΧ½á¹¹ÔªËØ×îºÃÓÃidÊôÐÔ£¬ÄÚ²¿ÔªËØ¿ÉÒÔ¶¨ÒåclassÊôÐÔ£¬
ÒòΪÍâΧµÄ½á¹¹Ò»°ãʽΨһµÄ¡£¶øÄÚ²¿µÄÔªËØ¿ÉÄÜ»á³öÏÖÖØ¸´¡£
ÁíÍ ......
1. ½«ÍøÒ³»òÔªËØ¾ÓÖÐ
HTML£º
<div class="wrap">
</div><!-- end wrap -->
CSS£º
.wrap { width:960px; margin:0 auto;}
......
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#FFFFFF;
margin: ......
1.positionµÄabsoluteÊôÐÔ±íʾ¸Ã¿éÒѾÍêÈ«ÍÑÀëÎı¾Á÷ÁË¡£Ò²¾ÍÊDz»ÔÙÕ¼ÓÿռäλÖÃ
¡£ÍêÈ«¿¿top,button,right,leftÀ´½øÐж¨Î»¡£
¡¡Õâ¸ö±ØÐëÄܹ»ÍêÈ«Àí½â¡£Í¬Ê±Îª¼õÉÙ´íÎóÔÚÉèÖÃabsoluteºó£¬Ò»¶¨ÖÁÉÙÖ¸¶¨top,buttom,right,leftÖеÄÒ»¸ö¡£
2.Èç¹û¿éÉèÖÃÁËabsoluteÊôÐÔ£¬Æä¶¨Î»µÄÔµãºÍ¸¸¿éµÄpositionÓйء£
¡¡Èç¹û¸¸¿éÉèÖà ......
Ò»£ºcssµÄ¸ÅÄî
CSSÊDzãµþÑùʽ±í£¨Cascading Style Sheets£©ÓÃÀ´¶¨ÒåÍøÒ³µÄÏÖʵЧ¹û¡£¿ÉÒÔ½â¾öhtml´úÂë¶ÔÑùʽ¶¨ÒåµÄÖØ¸´£¬Ìá¸ßÁ˺óÆÚÑùʽ´úÂëµÄ¿Éά»¤ÐÔ£¬²¢ÔöÇ¿ÁËÍøÒ³µÄÏÖʵЧ¹û¹¦ÄÜ¡£¼òµ¥Ò»¾ä»°£ºCSS½«ÍøÒ³ÄÚÈݺÍÏÔʾÑùʽ½øÐзÖÀ룬Ìá¸ßÁËÏÔʾ¹¦ÄÜ¡£
¶þ£ºcssµÄÓŵã
Ñùʽ±í¶¨ÒåÈç ......