¡¾DIV+CSSÈëÃŽ̡̳¿Îå¡¢CSSÑ¡ÔñÆ÷
ÉϽڿÎÎÒÃǽ²ÁËÒ»ÏÂCssͨ¹ýʲô·½Ê½È¥¿ØÖÆÒ³Ãæ
£¬Èç¹û²»¼ÇµÃ£¬ÎÒÀ´°ï´ó¼Ò»ØÒäһϣ¬×ܹ²ÓÐËÄÖÖ·½Ê½ÐÐÄÚ·½Ê½¡¢ÄÚ
Ƕ·½Ê½¡¢Á´½Ó·½Ê½¡¢µ¼È뷽ʽ£¬´ó¼Òͨ¹ýÕâËÄÖÖ·½Ê½¾Í¿ÉÒÔʵÏÖCSS
¶ÔHTML
Ò³ÃæÑùʽµÄ¿ØÖÆ£¬Èç¹ûÒªÈÃÕâЩÑùʽ¶ÔHTMLÒ³ÃæÖеÄÔªËØʵÏÖÒ»¶ÔÒ»£¬Ò»¶Ô¶à»òÕ߶à¶ÔÒ»µÄ¿ØÖÆ£¬Õâ¾ÍÐè
ÒªÓõ½CSSÑ¡ÔñÆ÷£¬HTMLÒ³ÃæÖеÄÔªËؾÍÊÇͨ¹ýCSSÑ¡ÔñÆ÷½øÐпØÖƵġ£
CSSÑ¡ÔñÆ÷¹²ÓÐÈýÖÖ£º±êÇ©Ñ¡ÔñÆ÷
¡¢ID
Ñ¡ÔñÆ÷
¡¢ÀàÑ¡ÔñÆ÷
¡£
ΪÁ˺óÃæµÄ¶ÔÑ¡ÔñÆ÷µÄ½âÊ͸üÈÝÒ×Àí½â£¬ÔÚÕâÀïÏÈ´ò¸ö±ÈÓ÷£¬Èç¹û°ÑÄãËù´¦µÄ»·¾³ÊÓΪHTMLÒ³ÃæµÄ»°£¬»·¾³ÀïµÄÿһ¸öÈËÔòÏ൱ÓÚHTMLÒ³ÃæÄÚ±êÇ©ÔªËØ£¬Ã¿
¸öÈ˶¼ÓÐÒ»¸öID(Éí·ÝÖ¤)£¬ÄÇôhtmlÖеÄÿһ¸ö±êÇ©Ò²¶¼ÓÐ×Ô¼ºµÄID£¬´ó¼Ò¶¼ÖªµÀIDÊÇΨһµÄ£¬²»¿ÉÄÜÖظ´¡£
¡¾±êÇ©Ñ¡ÔñÆ÷¡¿
Ò»¸öÍêÕûµÄHTMLÒ³ÃæÊÇÓÐ
ºÜ¶à²»Í¬µÄ±êÇ©×é³É£¬¶ø±êÇ©Ñ¡ÔñÆ÷£¬ÔòÊǾö¶¨ÄÄЩ±êÇ©²ÉÓÃÏàÓ¦µÄCSSÑùʽ£¬(ÔÚ´ó»·¾³ÖÐÄã¿ÉÄܳöÓÚ²»Í¬µÄλÖ㬵«ÊDz»¹ÜÔõôÑù£¬Äã×ÜÊÇ´©×ÅͬһÌ×Ò·þ£¬
Õâ¼þÒ·þ¾ÍÊÇÓɱêÇ©Ñ¡ÔñÆ÷ÊÂÏȸøÄãÏÞ¶¨ºÃµÄ£¬²»¹Ü×ßµ½ÄÄÀﶼÊÇÕâÉíÒ·þ)±ÈÈ磬ÔÚstyle.cssÎļþÖжÔp±êÇ©ÑùʽµÄÉùÃ÷ÈçÏ£º
p{
font-size:12px;
background:#900;
color:090;
}
ÔòÒ³ÃæÖÐËùÓÐp±êÇ©µÄ±³¾°¶¼ÊÇ#900(ºìÉ«)£¬ÎÄ×Ö´óС¾ùÊÇ12px£¬ÑÕɫΪ#090(ÂÌÉ«)£¬ÕâÔÚºóÆÚά»¤ÖУ¬Èç¹ûÏë¸Ä±äÕû¸öÍøÕ¾ÖÐp±êÇ©±³¾°µÄÑÕ
É«£¬Ö»ÐèÒªÐÞ¸ÄbackgroundÊôÐԾͿÉÒÔÁË£¬¾ÍÕâôÈÝÒ×£¡
¡¾IDÑ¡ÔñÆ÷¡¿
IDÑ¡ÔñÆ÷ÔÚijһ¸öHTML
Ò³ÃæÖÐÖ»ÄÜʹÓÃÒ»´Î(µ±È»Ò²¿ÉÒÔÓúü¸´Î£¬²»¹ý¾Í²»·ûºÏW3C±ê×¼ÁË£¬ÄÇÒ³ÃæÒ²¾Í²»ÊDZê×¼Ò³Ãæà¶~£¬ÔÛÃǵÄÄ¿µÄ²»¾ÍÊÇΪÁË×ö±ê×¼µÄÒ³Ãæô£¬ËùÒÔ½¨Òé´ó¼Ò²»
ÒªÔÚͬһ¸öhtmlÒ³ÃæÖжà¸ö±êÇ©ÓµÓй²Í¬µÄID)£¬¾ÍÏñÔÚÄãËù´¦µÄ»·¾³ÖУ¬ÄãÖ»ÓÐÒ»¸öID(Éí·ÝÖ¤)£¬²»¿ÉÄÜÖظ´£¡ÏàÐÅ´ó¼ÒÒ²ÄÜ¿´³öÀ´£¬IDÑ¡ÔñÆ÷¸ü¾ß
ÓÐÕë¶ÔÐÔ£¬È磺
Ïȸøij¸öHTMLÒ³ÃæÖеÄij¸öp±êÇ©Æð¸öID£¬´úÂëÈçÏ£º
<p id="one">´Ë´¦Îªp±êÇ©ÄÚµÄÎÄ×Ö</p>
ÔÚCSSÖж¨ÒåIDΪoneµÄp±êÇ©µÄÊôÐÔ£¬¾ÍÐèÒªÓõ½#£¬´úÂëÈçÏ£º
#one{
font-size:12px;
background:#900;
color:090;
}
ÕâÑùÒ³ÃæÖеÄij¸öp¾Í»áÊÇCSSÖж¨ÒåµÄÑùʽ¡£
¡¾ÀàÑ¡ÔñÆ÷¡¿
ÕâÖÖÑ¡ÔñÆ÷¸üÈÝÒ×Àí½âÁË£¬¾ÍÊÇ
ʹҳÃæÖеÄijЩ±êÇ©(¿ÉÒÔÊDz»Í¬µÄ±êÇ©)¾ßÓÐÏàͬµÄÑùʽ£¬¾ÍÏñ¹úÇìÖÐij¸ö·½ÕóÖУ¬¿Ï¶¨¶¼ÊDz»Í¬µÄÈË£¬È´¾ù´©ºìÉ«Ò·þ£¬ÊÖÖи߾ٻ¨»·£¬Ñùʽ¶¼ÊÇÒ»ÑùµÄ£¬Èç¹û
ÏëÈÃÕâÒ»ÀàÈ˶¼Óй²Í¬µÄÑùʽ£¬¸ÃÔõô×öÄØ~ºÇºÇ£¬ºÍIDÑ¡ÔñÆ÷µÄÓ
Ïà¹ØÎĵµ£º
ÓÃCSSÈÃÔªËؾÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇé—ͬÑùµÄºÏ·¨CSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÐÐΪȴ¸÷ÓÐǧÇï¡£ÈÃÎÒÃÇÏÈÀ´¿´Ò»ÏÂCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØˮƽ¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØˮƽ¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪ
aut ......
Í·£ºheader
¡¡¡¡ÄÚÈÝ£ºcontent/container
¡¡¡¡Î²£ºfooter
¡¡¡¡µ¼º½£ºnav
¡¡¡¡²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn
¡¡¡¡Ò³ÃæÍâΧ¿ØÖÆÕûÌå²¼¾Ö¿í¶È£ºwrapper
¡¡¡¡×óÓÒÖУºleft right center
¡¡¡¡µÇ¼Ìõ£ºloginbar
¡¡¡¡±êÖ¾£ºlogo
¡¡¡¡¹ã¸æ£ºbanner
¡¡¡¡Ò³ÃæÖ÷Ì壺main
¡¡¡¡Èȵ㣺hot ......
¸Õ¿ªÊ¼Ñ§Ï°zend framework £¬¶ÔÓÚ·¾¶ÎÊÌ⻹ÊÇûŪÃ÷°×£¬ÒÔÖÁÓÚͼƬ²»ÄÜÕý³£ÏÔʾ£¬ËѱéÁËGoogleÖÕÓÚÕÒµ½Ò»¸ö½â¾ö°ì·¨¡£¾ßÌå½â¾ö°ì·¨ÈçÏ£º
ÔÚ.htaccessÖÐÓÃÏÂÃæÕâ¶Î´úÂë´úÌæÔÓдúÂë
# Zend Framework rewrite¹æÔò
RewriteEngine on
RewriteCond
%{REQUEST_FILENAME} !-f
RewriteRule .* index.php
#
°²È«ÐÔ¿¼ÂÇ£ ......
IE vs FF
CSS ¼æÈÝÒªµã£ºDOCTYPE Ó°Ïì CSS ´¦Àí
FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ¾ÓÖÐ, IE ²»ÐÐ
FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ
FF: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ width, µ« IE ²»»á, ¹ÊÐèÒªÓà !important ¶àÉèÒ» ......
¼ÙÈçÎÒÃÇÏëͨ¹ýǰ̨×ÔÖ÷Ñ¡ÔñCSSÑùʽÀ´´ïµ½¸Ä±äÑÕÉ«¡¢·ç¸ñµÈÄ¿µÄµÄ»°£¬ÓÃJSµ÷ÓÃCSSÎļþ¾ÍOK¡£
ÏÈ×öÁ½¸ö£¨»ò¶à¸ö£©CSSÎļþ¡£
style_1.css¡¡´úÂ룺
body{background-color: #ccff66;}
......
style_2.css¡¡´úÂ룺
body{background-color: #ff0000;}
......
JS´úÂëÈçÏ£º
<link rel="stylesheet" rev="stylesheet" ......