DIV+CSS ÃüÃû³£ÓõÄ
ÍøÒ³ÇÐͼ¹ý³ÌÖÐdiv+cssÃüÃû¹æÔò
ÄÚÈÝ£ºcontent/container µ¼º½£ºnav ²àÀ¸£ºsidebar ¡¡ ¡¡
À¸Ä¿£ºcolumn ±êÖ¾£ºlogo Ò³ÃæÖ÷Ì壺main ¡¡¡¡
¹ã¸æ£ºbanner Èȵ㣺hot ÐÂÎÅ£ºnews
ÏÂÔØ£ºdownload ×Óµ¼º½£ºsubnav ²Ëµ¥£ºmenu
ËÑË÷£ºsearch Ò³½Å£ºfooter ¹ö¶¯£ºscroll
°æÈ¨£ºcopyright ÓÑÇéÁ´½Ó£ºfriendlink ×Ӳ˵¥£ºsubmenu
ÄÚÈÝ£ºcontent ±êǩҳ£ºtab ÎÄÕÂÁÐ±í£ºlist
×¢²á£ºregsiter ÌáʾÐÅÏ¢£ºmsg С¼¼ÇÉ£ºtips
¼ÓÈ룺joinus À¸Ä¿±êÌ⣺title Ö¸ÄÏ£ºguild
·þÎñ£ºservice ״̬£ºstatus ͶƱ£ºvote
β£ºfooter ºÏ×÷»ï°é£ºpartner µÇ¼Ìõ£ºloginbar
Ò³ÃæÍâΧ¿ØÖÆÕûÌå²¼¾Ö¿í¶È£ºwrapper ×óÓÒÖУºleft right center ¡¡¡¡
(¶þ)×¢Ê͵Äд·¨:
/* Footer */
ÄÚÈÝÇø
/* End Footer */
(Èý)idµÄÃüÃû:
(1)Ò³Ãæ½á¹¹
ÈÝÆ÷: container ҳͷ£ºheader ÄÚÈÝ£ºcontent/container
Ò³ÃæÖ÷Ì壺main ҳβ£ºfooter µ¼º½£ºnav
²àÀ¸£ºsidebar À¸Ä¿£ºcolumn ×óÓÒÖУºleft right center
Ò³ÃæÍâΧ¿ØÖÆÕûÌå²¼¾Ö¿í¶È£ºwrapper
(2)µ¼º½
µ¼º½£ºnav
Ö÷µ¼º½£ºmainbav
×Óµ¼º½£ºsubnav
¶¥µ¼º½£ºtopnav
±ßµ¼º½£ºsidebar
×󵼺½£ºleftsidebar
ÓÒµ¼º½£ºrightsidebar
²Ëµ¥£ºmenu ×Ӳ˵¥£ºsubmenu ±êÌâ: title ÕªÒª: summary
(3)¹¦ÄÜ
±êÖ¾£ºlogo
¹ã¸æ£ºbanner
µÇ½£ºlogin
µÇ¼Ìõ£ºloginbar
×¢²á£ºregsiter
ËÑË÷£ºsearch
¹¦ÄÜÇø£ºshop
±êÌ⣺title
¼ÓÈ룺joinus
״̬£ºstatus
°´Å¥£ºbtn
¹ö¶¯£ºscroll
±êǩҳ£ºtab
ÎÄÕÂÁÐ±í£ºlist
ÌáʾÐÅÏ¢£ºmsg
µ±Ç°µÄ: current
С¼¼ÇÉ£ºtips
ͼ±ê: icon
×¢ÊÍ£ºnote
Ö¸ÄÏ£ºguild
·þÎñ£ºservice
Èȵ㣺hot
ÐÂÎÅ£ºnews
ÏÂÔØ£ºdownload
ͶƱ£ºvote
ºÏ×÷»ï°é£ºpartner
ÓÑÇéÁ´½Ó£ºlink
°æÈ¨£ºcopyright
(ËÄ)classµÄÃüÃû:
(1)ÑÕÉ«:ʹÓÃÑÕÉ«µÄÃû³Æ»òÕß16½øÖÆ´úÂë,Èç
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)×ÖÌå´óС,Ö±½ÓʹÓÃ"font+×ÖÌå´óС"×÷ΪÃû³Æ,Èç
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)¶ÔÆëÑùʽ,ʹÓÃ¶ÔÆëÄ¿±êµÄÓ¢ÎÄÃû³Æ,Èç
.left { float:left; }
.bottom { float:bottom; }
(4)±êÌâÀ¸Ñùʽ,ʹÓÃ"Àà±ð+¹¦ÄÜ"µÄ·½Ê½ÃüÃû,Èç
.barnews { }
.barproduct { }
×¢ÒâÊÂÏî:
1.Ò»ÂÉСд;
2.¾¡Á¿ÓÃÓ¢ÎÄ;
3.²»¼ÓÖиܺÍÏ»®Ïß;
4.¾¡Á¿²»Ëõд£¬³ý·ÇÒ»¿
Ïà¹ØÎĵµ£º
Internet Explorer 8Ô¤ÉèÊÇÒÔCSS 2.1Ϊ±ê×¼£¬²¢ÐÞÕýÁËÐí¶àInternet Explorer 7µÄCSS Bug£¬ÕâÒâζ×ÅÓÐÒ»²¿·ÝÒÔÍùÒÀ¾ÝIE 7ËùÉè¼ÆµÄÍøÒ³£¬
ÔÚIE 8ÉϵijÊÏÖ»áÓÐËù³öÈ룬ËùÐÒ°ÝIE 7ÏàÈݼìÊÓ¹¦ÄÜËù´Í£¬Ä¿Ç°ÒòʹÓÃIE 8¶øµ¼Ö°æÃæ´íÎóµÄÍøÕ¾²¢²»¶à¡£
µ«Ò»ÖµÒÀÀµIE 7ÏàÈݼìÊÓ¹¦Äܲ¢·Ç³¤¾ÃÖ®¼Æ£¬¾¡Ôç½«ÍøÕ¾ÐÞ¸ÄΪIE 8ÏàÈݲÅÊdz¤¾Ã ......
ºÜ¶àʱºòÎÒÃDZØÐëʹһЩ¿éÔªËØ²¢ÅÅÏÔʾ£¬Ò»°ãÏëµ½µÄÊDZØÐëʹÓø¡¶¯£¬µ«ÊÇ¿éÔªËØ¸¡¶¯¸ø±ß¾à(margin)µÄʱºòÔÚIEÏ»á³öÏÖ¼Ó±¶µÄBUG£¬ËùÒԺܶàʱºò²»µÃ²»°ÑÕâ¸ö¿éÔªËØÌ×ÔÚÒ»¸öÄÚÁªÔªËØÀïÃæ£¬È»ºó¸øÄÚÁªÔªËظ¡¶¯ºÍ±ß¾à¡£½ñÌì¿´µ½ÁËâø·É¡¢ÇظèºÍÎÚÁú²è¹ØÓÚdisplay:inline-blockµÄÎÄÕ£¬ºÜ²»´í£¬×ÛºÏһϣ¬¼Ç¼ÏÂÀ´¡£
display:inl ......
Ò»¡¢CSSÎļþ¼°ÑùʽÃüÃû
1¡¢CSSÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
2¡¢CSSÑùʽÃüÃû¹æ·¶
±¾È˽¨Ò飺ÓÃ×Öĸ¡¢_ºÅ¹¤¡¢-ºÅ¡¢Êý×Ö×é³É£¬±ØÐëÒÔ×Öĸ¿ªÍ·£¬²»ÄÜΪ´¿Êý×Ö¡£ÎªÁË¿ª·¢ºóÑùʽÃû¹ÜÀí·½±ã£¬´ó¼ÒÇëÓÃÓÐÒâÒåµÄµ¥ ......
.
Transparent
{
width
: 16px
;
height
: 42px
;
background
: transparent
url(images/transparent.png)
no-repeat
;
}
*
html
.
Transparent
{
&nbs ......
¡¡¡¡ÔÚWeb±ê×¼ÖеÄÒ³Ãæ²¼¾ÖÊÇʹÓÃDivÅäºÏCSSÀ´ÊµÏֵġ£ÕâÆäÖÐ×î³£Óõ½µÄ¾ÍÊÇʹÕû¸öÒ³ÃæË®Æ½¾ÓÖеÄЧ¹û£¬ÕâÊÇÔÚÒ³Ãæ²¼¾ÖÖлù±¾£¬Ò²ÊÇ×îÓ¦¸ÃÊ×ÏÈÕÆÎÕµÄ֪ʶ¡£²»¹ý£¬»¹ÊǾ³£»áÓÐÈËÎʵ½Õâ¸öÎÊÌ⣬ÔÚÕâÀïÎÒ¼òµ¥×ܽáÒ»ÏÂʹÓÃDivºÍCSSʵÏÖÒ³ÃæË®Æ½¾ÓÖеķ½·¨£º
¡¡¡¡Ò»¡¢margin:auto 0 Óë text-aligh:center
¡¡¡¡ÔÚÏÖ´úä¯ÀÀÆ÷£¨È ......