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 : Óɸ¡µãÊý×ֺ͵¥Î»±êʶ·û×é³ÉµÄ³¤¶ÈÖµ | °Ù·ÖÊý¡£°Ù·ÖÊýÊÇ»ùÓÚ¸¸¶ÔÏóµÄ¿í¶È¡£²»¿ÉΪ¸
Ïà¹ØÎĵµ£º
Ò»¡¢CSS HACK
ÒÔÏÂÁ½ÖÖ·½·¨¼¸ºõÄܽâ¾öÏÖ½ñËùÓÐHACK.
1, !important
Ëæ×ÅIE7¶Ô!importantµÄÖ§³Ö, !important ·½·¨ÏÖÔÚÖ»Õë¶ÔIE6µÄHACK.(×¢Òâд·¨.¼ÇµÃ¸ÃÉùÃ÷λÖÃÐèÒªÌáÇ°.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77¶ÔFireFox
*+ht ......
Èç¹ûÄãÊÇÍøվǰ¶Ë¿ª·¢ÈËÔ±£¬ÄÇô¶ÔÄãÀ´Ëµ£¬Ò²Ðí×öÒ»¸öƯÁÁµ¼º½²Ëµ¥»áºÜµÃÐÄÓ¦ÊÖ¡£±¾ÎÄҪΪ´ó¼Ò×ܽá¸÷ÖÖµ¼º½²Ëµ¥µÄ×ÊÔ´£¬ÒÔ±ãÈôó¼ÒµÄÍøվǰ¶Ë¿ª·¢µÄ¹¤×÷¸ü
·½±ã¸ü¿ìËÙ£¬Ö»ÒªÑ¡ÔñÏֳɵÄÀý×ӾͿÉÒÔÓ¦ÓÃÓÚ×Ô¼ºµÄÍøÕ¾ÁË¡£±¾ÎÄÊÕ¼¯µÄÕâЩ×ÊÔ´£¬´Ó·Ç³£¼òµ¥µÄHTMLºÍCSSµ¼º½²Ëµ¥£¬µ½·Ç³£¸´ÔӺ͸߼¶µÄ
JQuer ......
1. ½«ÍøÒ³»òÔªËؾÓÖÐ
HTML£º
<div class="wrap">
</div><!-- end wrap -->
CSS£º
.wrap { width:960px; margin:0 auto;}
......
ת:дµÄ²»´í,¶ÔÓÚÍøÒ³¿ª·¢ÓÐÖ¸µ¼ÒâÒå
ÔÚ¡¶ÓûÁ· CSS £¬±ØÏȹ¬ IE¡·ºÍ¡¶ÄãÓÐ <table /> Ç¿ÆÈÖ¢Â𣿡·ÕâÁ½ÆªÎÄÕÂÖУ¬¿´µ½Óв»ÉÙÆÀÂÛÓõ½div+CSS²¼¾ÖÕâ¸ö˵·¨£¬ÓÃÀ´ºÍtable²¼¾Ö±È½Ï¡£Êµ¼ÊÉÏdiv²»ÊÇÓÃÀ´²¼¾ÖµÄ£¬divÖ»ÊÇÓÃÀ´±íʾһ¸öÆäËüÔªËض¼ÎÞ·¨×¼È·±í´ïÓïÒâµÄÒ»¸ö¿éÇø£¬Ö»ÓÐCSSÊÇÓÃÓÚ²¼¾ÖµÄ£¬ËùÒÔ¸ù±¾¾Í²»´æÔÚdi ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>ÎÞˢб任Ñùʽ±í</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /& ......