ÆäËûµÄϸ½Ú²î±ð
µ±ÄãÔÚдcssµÄʱºò£¬ÌرðÊÇÓÃfloat: left£¨»òright£©ÅÅÁÐÒ»´ÜͼƬʱ£¬»á·¢ÏÖÔÚfirefoxÀïÃæÕý³£¶øIEÀïÃæÓÐÎÊÌâ¡£ÎÞÂÛÄãÓÃmargin:0,»¹ÊÇborder: 0À´Ô¼Êø£¬¶¼ÎÞ¼ÃÓÚÊ¡£

ÆäʵÕâÀﻹÓÐÁíÍâÒ»¸öÎÊÌ⣬¾ÍÊÇIE¶ÔÓÚ¿Õ¸ñµÄ´¦Àí£¬firefoxÊǺöÂԵĶøIE¶ÔÓÚ¿éÓë¿éÖ®¼äµÄ¿Õ¸ñÊÇ´¦ÀíµÄ¡£Ò²¾ÍÊÇ˵һ¸ödiv½áÊøºóÒª½ô½Ó×ÅÒ»¸ödivд£¬Öм䲻ҪÓлسµ»òÕß¿Õ¸ñ¡£²»È»Ò²Ðí»áÓÐÎÊÌ⣬±ÈÈç3pxµÄÆ«²î£¬¶øÇÒÕâ¸öÔ­ÒòºÜÄÑ·¢ÏÖ¡£

·Ç³£²»×ßÔ˵ÄÊÇÎÒÓÖÅöµ½ÁËÕâÑùµÄÎÊÌ⣬¶à¸öimg±êÇ©Á¬×Å£¬È»ºó¶¨ÒåµÄfloat: left£¬Ï£ÍûÕâЩͼƬ¿ÉÒÔÁ¬ÆðÀ´¡£µ«Êǽá¹ûÔÚfirefoxÀïÃæÕý³£¶øIEÀïÃæÏÔʾµÄÿ¸öimg¶¼Ïà¸ôÁË3px¡£ÎҰѱêÇ©Ö®¼äµÄ¿Õ¸ñ¶¼É¾³ý¶¼Ã»ÓÐ×÷Óá£

ºóÀ´µÄ½â¾ö·½·¨ÊÇÔÚimgÍâÃæÌ×li£¬²¢ÇÒ¶Ôli¶¨Òåmargin: 0£¬ÕâÑù¾Í½â¾öÁËIEºÍfirefoxµÄÏÔʾƫ²î¡£IE¶ÔÓÚһЩģÐ͵ĽâÊÍ»á²úÉúºÜ¶à´íÎóÎÊÌ⣬ֻÓжà¶à³¢ÊÔ²ÅÄÜ·¢ÏÖÔ­Òò¡£

2¡¢Ç¶Ì×DIV:¸¸DIVµÄ¸ß¶È²»Äܸù¾Ý×ÓDIV×Ô¶¯±ä»¯µÄ½â¾ö·½°¸

<div id="parent">
<div id="content"> </div>
</div>

µ±ContentÄÚÈݶàʱ£¬¼´Ê¹parentÉèÖÃÁ˸߶È100%»òauto,ÔÚ²»Í¬ä¯ÀÀÆ÷Ï»¹ÊDz»ÄÜÍêºÃµÄ×Ô¶¯ÉìÕ¹¡£ ½â¾ö·½°¸

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

ÔÚ²ãµÄ×îÏ·½²úÉúÒ»¸ö¸ß¶ÈΪ1µÄ¿Õ¸ñ£¬¿É½â³ýÕâ¸öÎÊÌâ

Îå¡¢Ëæ»úµÄÇл»Í¼Æ¬£º
#random {
BACKGROUND: url(/rotate.php);
}
Õâ¸ö·½·¨ºÜÇÉÃî¡£

¹ØÓÚdivµÄ¸ß¶È×ÔÊÊÓ¦
¡¡¡¡½ñÌìСÄòÈÃÎÒ°ïËûµÄÒ³×Ó½â¾öÒ»¸öÎÊÌ⣬¾ÍÊÇdivµÄ¸ß¶È×ÔÊÊÓ¦£¬Ò²¾ÍÊÇÔÚÒ»¸ö¸¸¼¶divÖÐǶÌ×Ò»×óÒ»ÓÒÁ½¸ö×Ódiv£¬ÓұߵÄ×ÓdivÄÚÈÝ¿ÉÎÞÏÞÀ©Õ¹£¬¶ø¿ÉÒÔʹµÃ¸¸¼¶divµÄ¸ß¶ÈÄܱ»ÎÞÏÞÀ­³¤£¬ÓÃÒ»°ãµÄ²¼¾Ö·½·¨£¬ÔÚIEÖпÉÒÔÕýÈ·ä¯ÀÀ£¬ÔÚMozillaÖи¸¼¶divµÄ¸ß¶È¾Í¹Ì¶¨ÔÚ10px×óÓÒ£¬ÎÞ·¨×ÔÊÊÓ¦¸ß¶È£¬height:autoÒ²²»ÐУ¬Ôõô°ìÄØ¡£ÍøÉϲο¼µ½Ò»Æª×ÊÁÏ£¬ÒªÊµÏÖ×ÔÊÊÓ¦¸ß¶È£¬div²ã±ØÐë¾ßÓÐfloatÊôÐÔ£¬ÓÚÊÇÎÒ¿ªÊ¼¶¯ÊÖÊÔÑ飬float:leftµÄ»°£¬div¾ÍÅܵ½Ò³Ãæ×î×ó±ßÈ¥ÁË£¬ÕâºÃ°ì£¬ÎÒÔÚËüµÄÍâÃæÔÙÌ×Ò»²ãdiv£¬°ÑλÖö¨ºÃ£¬ÄÇôÀïÃæµÄ¾ÍËãfloat:leftÒ²²»»á±»Òƶ¯Î»ÖÃÁË¡£

<div id="container_father">
<div id="container">
    <div id="panel"> test<br />
     test<br />
     test<br />
      <!-- id="panel" -->
    </div>
    <div id="sidebar">
     <ul>
       <li class="current">Ô¤°²×°¼ì²é</li>
       <li>ÔĶÁ PFC ÊÚȨЭÒé</li>
       <li>³õʼ»¯Êý¾Ý¿â</li>
       <li>Íê³É°²×°</li>
      </ul>
      <!-- id="sidebar" -->
    </div>
    <!-- id="container" -->
</div>
</div>

#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
   width: 750px;
   border: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

ÉîÈë±ê×¼ ~ The IE Doubled Float-Margin Bug(IEË«±¶¸¡¶¯±ß½çBug)
ʲô·¢Éú¹ÊÕÏ£¿
Ò»¶ÎÎÞ´íµÄ´úÂë°ÑÒ»¸ö¾Ó×󸡶¯(float:left)µÄÔªËØ·ÅÖýøÒ»¸öÈÝÆ÷ºÐ(box)£¬²¢ÔÚ¸¡¶¯ÔªËØÉÏʹÓÃÁË×ó±ß½ç(margin-left) À´ÁîËüºÍÈÝÆ÷µÄ×ó±ß²úÉúÒ»¶Î¾àÀë¡£¿´ÆðÀ´Ï൱µÄ¼òµ¥£¬¶ÔÂ𣿵«Ö±ÖÁËü±»ÔÚIE/WinÖÐä¯ÀÀΪֹ£¬ÔÚä¯ÀÀÆ÷ÖоÓ×󸡶¯ÔªËصı߽糤¶È±»ÉñÃصط­ÁËÒ»±¶£¡

Çé¿öÓ¦¸ÃÈçºÎ£¿

ÏÂÃæµÄͼÊÍչʾÁËÒ»¸ö¼òµ¥µÄdiv(²èÉ«µÄºÐ×Ó)°üº¬×ÅÒ»¸ö¾Ó×󸡶¯µÄdiv(ÂÌÉ«µÄºÐ×Ó)¡£¸¡¶¯ÔªËØÓÐÒ»¸ö100pxµÄ×ó±ß½ç£¬Ê¹ÈÝÆ÷ºÐÓëËüµÄ×ó±ßÔµÖ®¼ä²úÉúÁËÒ»¸ö100pxµÄ¼ä϶¡£µ½ÏÖÔÚΪֹ£¬Ò»Ö±¶¼»¹²»´í¡£

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

³Â¾ÉµÄIE¡°Ë«±¶Õ¼¾Ý¡±
Ô­ÑùµÄÏàͬ´úÂë±»ÔÚIE/WinÖÐä¯ÀÀʱÒÔЩ΢²»Í¬µÄ·½Ê½ÏÔʾ£¬ÏÂÃæµÄͼÊÍչʾÁËIE/WinÔÚ²¼¾ÖÉÏËù×öµÄ¡£
ÕâΪʲô»á·¢Éú£¿±ðÎÊÕâÖÖɵÎÊÌ⣡Õâ¾ÍÊÇIE£¬¼ÇµÃÂ𣿷ûºÏ±ê×¼Ö»ÊÇÀíÏëµÄ×´¿ö£¬²»Ö¸ÍûʵÏÖ£¬Õâ¸ö¼òµ¥µÄÊÂʵÕýÑéÖ¤ÁË¡£

Öصã

Õâ¸öBug½öµ±¸¡¶¯±ß½çºÍ¸¡¶¯ÔªËصķ½ÏòÏàͬʱ³öÏÖÔÚ¸¡¶¯ÔªËغÍÈÝÆ÷ºÐµÄÄÚ±ßÔµÖ®¼ä£¬ÔÚÕâÖ®ºóµÄÈÎÒâÓÐ×ÅÏàËƱ߽çµÄ¸¡¶¯ÔªËز»»á³ÊÏÖË«±¶±ß½ç¡£Ö»ÓÐÌض¨µÄ¸¡¶¯ÐеĵÚÒ»¸ö¸¡¶¯ÔªËØ»áÔâÓöÕâ¸öBug¡£Ïñ¾Ó×óµÄÇé¿öÒ»Ñù£¬Ë«±¶±ß½çͬÑùÉñÃصØÏÔʾÔÚ¾ÓÓÒµÄÏàͬ·½Ê½¡£

ÐÞ¸´°ì·¨£¡

Ö±µ½ÏÖÔÚ(04Äê1ÔÂ)Õâ¸öBugÒ»Ö±±»ÈÏΪÊÇÎÞ·¨ÐÞ¸´µÄ£¬Í¨³£ÓÃÀ´Ìæ´ú´íÎóµÄ±ß½çµÄ¿ØÖÆ·½·¨È磺һ¸ö²»¿ÉÊÓ¸¡¶¯ÔªËصÄ×ó±ß¾à£¬Á¬Í¬Ò»¸öÄÚǶµÄºÐ×ÓÒ»Æ𣬿ÉÊӵĺÐ×Ó×°ÔÚ²»¿ÉÊÓ¸¡¶¯ÔªËØÀ»òÕßʹÓü¼Çɽö¶ÔIE/WinÉ趨±ß½çµÄ1/2Öµ¡£Õâ°ì·¨ÉúЧÁË£¬µ«ÊÇÊÇ»ìÂҵĶøÇÒ¸ãÔãÁ˸ɾ»µÄÔ´´úÂë¡£²»¹ýÏÖÔÚÈ«²¿½áÊøÁË¡£

Steve Clason·¢ÏÖÁËÒ»¸öÐÞ¸´°ì·¨£¬ÃèÊöÔÚËûµÄGuest DemoÀÐÞ¸´ÁËË«±¶±ß½çºÍΧÈÆÎÄ×ÖËõ½øBug¡£ÕâÊÇÒ»¸ö¾­µäµÄIEµÄBugÐÞ¸´°ì·¨£¬Ê¹ÓÃÒ»¸öÊôÐÔÀ´ÐÞ¸´Ó°Ïì²»Ïà¹ØÊôÐÔµÄBug¡£

ÏÖÔÚÈçºÎÀ´×ö£¿

Ñо¿Ëü£¬¼òµ¥µØ½«{display: inline;}ÉèÖøø¸¡¶¯ÔªËؾÍÊÇÈ«²¿ËùÐè×öµÄ£¡ÊǵÄ£¬ÌýÆðÀ´Ì«¼òµ¥ÁË£¬²»ÊÇÂ𣿲»¹ýÕâÊÇÕæµÄ£¬½ö½öÒ»¸ödisplayµÄ”inline”ÉùÃ÷ÒѾ­Äܹ»Ê¤ÈÎÁË¡£

ÊìϤ¹æÔòµÄÈËÖªµÀ¸¡¶¯ÔªËØ×Ô¶¯ÉèÖÃΪ”block”ÔªËØ£¬¶ø²»¹ÜËûÃÇ֮ǰÊÇʲô¡£¾ÍÈçSteve´ÓW3CÀïÖ¸³ö£º

9.5.1 Positioning the float: the ‘float’ property

“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate
boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top
(subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. ”

Õâ˵Ã÷¸¡¶¯ÔªËØÉϵÄ{display: inline;}»á±»ºöÂÔ£¬ÊÂʵÉÏËùÓеÄä¯ÀÀÆ÷ûÓгÊÏÖÈκθı䣬°üÀ¨IE¡£µ«ÊÇ£¬Ëü²»ÖªºÎ¹ÊÈÃIEÍ£Ö¹½«¸¡¶¯ÔªËصı߽緭±¶¡£Òò¶ø£¬Õâ¸öÐÞ¸´°ì·¨¿ÉÒÔ±»Ö±½ÓÓ¦Ó㬶øûÓÐÈκη±ËöµÄÒþ²Ø·½·¨¡£Èç¹û½«À´µÄÒ»¿îä¯ÀÀÆ÷¾ö¶¨¶ÔÕâ¸öÐÞ¸´°ì·¨±§í¦£¬Ö»Òª°ÑÕâ¸öÐÞ¸´×°ÈëIE¶ÀÓõÄTan HackÀϸ½ÚÈçͬIE Three Pixel Text-Jog Demo¡£

ÏÂÃæÊÇÁ½¸öʹÓÃÁËÇ°ÃæÏàͬ´úÂëµÄÉú¶¯ÑÝʾ£¬µÚÒ»¸öÕÕ³£ÏÔʾÁËIEµÄBug£¬ÏÂÒ»¸ö¶Ô¸¡¶¯ÔªËØʹÓÃÁË”inline”ÐÞ¸´¡£

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

ÕâÀïµÄµ÷Ó÷½Ê½ÊÇ£º
Ê×ÏÈÔÚÖ÷ÌâµÄcore/zp.phpÎļþÖÐÅäÖÃZenPhotoÏà²áµÄMYSQLÏȻºó»á²éѯ³öZenPhotoµÄËùÓÐÎļþ¼Ð²¢¸½ÓÚ$zp_theme_album±äÁ¿ÖС£

½âÊÍÒ»ÏÂsuccessful.phpÎļþÖеıäÁ¿£º

$theme_name = get_post_meta($post->ID, 'Theme Name', $single = true);
$theme_author = get_post_meta($post->ID, 'Theme Author', $single = true);
$theme_thumb = get_post_meta($post->ID, 'Theme Thumbnail', $single = true);
$theme_desc = get_post_meta($post->ID, 'Theme Description', $single = true);
$theme_down = get_post_meta($post->ID, 'Theme Download', $single = true);

»ñµÃµ±Ç°ÈÕÖ¾µÄ×Ô¶¨Òå×Ö¶ÎÐÅÏ¢£¬ÕâÀï·Ö±ðÊÇÖ÷ÌâÃû×Ö¡¢×÷Õß¡¢ËõÀÀͼ¡¢ËµÃ÷¡¢µØÖ·£¬·Ö±ð¶ÔÓ¦ÓÚºóÃæµÄTheme NameµÈÐÅÏ¢¡£

<?php if($theme_thumb) { ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo $zp_theme_url ."/cache/". $zp_theme_album ."/". $theme_thumb . $zp_successful; ?>.jpg" alt="<?php if($theme_desc) echo $theme_desc; else echo the_title(); ?>" /></a><?php } ?>

Èç¹û$theme_thumb²»Îª¿Õ£¬¾ÍÏÔʾÏÂÃæµÄÐÅÏ¢£¬¼¸¸ö±äÁ¿½âÊÍ:

$zp_theme_url; ÔÚÖ÷Ìâcore/zp.phpÎļþÖÐÅäÖõÄZenPhotoµÄµØÖ·
cache£»ÊÇZenPhotoÏà²áÉú³ÉÎļþ·ÖÀàµÄĿ¼
$zp_theme_album; Ïà²á·ÖÀàÃû
$theme_thumb; µ÷ÓõÄͼƬÃû£¬È磺abc.jpg
$zp_successful; Õâ¸öÊÇZenPhotoÉú³ÉÎļþºóµÄºó׺£¬Äã¿ÉÒÔÉú³É²»Í¬´óСµÄÎļþ£¬ºÜÁé»î¾ßÌåʹÓ÷½·¨Çë²éÔÄZenPhoto³ÌÐòµÄgetCustomImageº¯Êý¡£

ºóÃæµÄÎҾͲ»½âÊÍÁË£¬»áPHPµÄͬ־һ¿´¾ÍÃ÷°×¡£

ÖØÒªÌáʾ£º
ÔÚÄãÏëÆô¶¯ºǫ́µÄZenPhotoÅäÖÃ֮ǰÇë±£Ö¤Ö÷Ìâcore/zp.phpÖÐÎÄÖеÄMYSQLÅäÖÃÕýÈ·£¬·ñÔòÖ÷Ì⽫³ö´í£¬ÎÞ·¨Ê¹Ó㬽â¾ö·½·¨ÊÇÔÚfunctions.phpÖÐÈ¡Ïûif($zp_config ==”Yes”) { include(TEMPLATEPATH . ‘/core/zp.php’); }¼ÓÔØ£¬Çеã¡
˵Ã÷²»Ïêϸ£¬ÓÐʱ¼ä²¹³ä!

ÏÂÔصØÖ·:http://sc35.com/blog/downloads
Ô¤ÀÀµØÖ·:http://sc35.com/site/
ZenPhoto Ïà²áÔ¤ÀÀµØÖ·£ºhttp://sc35.com/img/

Ìرð¸Ðл ¦±¨°.~Beta2 ¶Ô±¾Ö÷Ìâ¾èÖú100RMB

±¾Ö÷ÌâʹÓÃcss 2.1ºÍhtml 1.1±ê×¼Éè¼Æ£¬ÕâÒ²ÊǵÚÒ»¸ö²âÊÔ°æ±¾£¬¾­ºó¿ÉÄÜ»áÓкܴóµÄ¸Ä¶¯£¬ºǫ́ÅäÖúܲ»ÍêÉÆ£¬ÒòΪÎÒ¶ÔPHPÒ²ÊDz»Ìرð¾«Í¨£¬»¹ÇëÀí½â£¬×îºóÇë´ó¼Ò¶àÌᱦ¹óÒâ¼û£¬Ð»Ð»~£¡

´¿CSS µ¯³öʽ²Ëµ¥Ð§¹û:

ÏÖÔÚÎÒÏë˵˵¹ØÓÚDarkƤµÄһЩÌØÐÔ£¬²»¹ýÄ¿Ç°ÎÒ²¢Ã»Óз¢²¼Ëý£¬Ò²²»ÖªµÀ»á²»»á·¢²¼£¬Ëû¿ÉÒԳƵÄÉÏÊÇRebornµÄÓÅ»¯ÓëÉý¼¶£¬¸ÄÃûºÃÏñ²»Ì«ÊʺÏ£¬ºÇºÇ²»¹ý¶ÔÓÚÒ»¸öƤÖÆ×÷ÕßÀ´Ëµ£¬ÕâÑù¿ÉÒԼǼËûµÄ³É³¤£¬ÖÁÉÙÎÒÊÇÕâÑùÏëµÄ¡£
Dark Ê×ÏÈÊÇ×ÔÊÊÓ¦·Ö±æÂʵÄ£¬ÕâÊÇÎÒÒ»Ö±ÒÔÀ´µÄÐIJ¡£¬ÒòΪCSSÔÚIE6»á±íÏֵĺÜÒì³££¬ËùÒÔһֱûÓÐ×öºÃ×ÔÊÊÓ¦·Ö±æÂÊÕâÒ»¹Ø£¬²»¹ýDarkËãÊÇ»ù±¾ÊµÏÖÁËÓëFirefoxЧ¹û±£³ÖÒ»ÖÁ£¬Ö÷Òª²ÉÓõÄÊǸº±ß¾à×öµ½µÄ£¬ÏëÑо¿Çë²é¿´±¾BlogƤCSSÎļþ²¿·Ý£¡

È»ºóÊÇ´¿CSS µ¯³öʽ²Ëµ¥£¬Õâ¿ÉÄܶÔÓÚ´ó¶àÊý¸ÄƤµÄͬ־ÓÖÊÇÒ»¸öÃż÷£¬²»¹ýÕâ¸ö¹¦ÄÜÖ»ÄÜÓÃÓÚÖ§³ÖCSS 2.0µÄä¯ÀÀÆ÷£¬±ÈÈçIE6¾Í²»Ö§³Ö£¬ËùÒÔÒª½èÖúJS°ïÖúһϣ¬ÎÒʹÓõĵ¯³öʽ²Ëµ¥Ô´CSSÀ´×ÔV2EX²»¹ýÄã¶Ô±ÈһϻᷢÏÖÍêÈ«²»Ò»Ñù£¬ÕâÖ÷ÒªÊÇÕë¶ÔWordPressµÄÎÊÌ⣬Ҫ¾¡Á¿×öµ½Áé»î£¬»¹ÓоÍÊÇÔ´CSSÀïÓкܶàûÓÐÓõÄÊôÐÔ¶¨Ò壬±ÈÈçtext-decoration: none; text-align: left;µÈ£¬ÎÒ²»ÖªµÀ×÷ÕßÊDz»ÊÇÒ²ÊÇÈ¥copyµÄÔ´Â룬µ«ÊǶÔÓÚCSSÀ´Ëµ£¬Éϼ¶¶¨ÒåÁËÊôÐÔÄÇôϼ¶¾Í»áÓÐÏàͬµÄÊôÐÔ£¬ÊǵÄ£¬Õâ¸ö¹¦ÄÜ̫ƯÁÁÁË£¬»á¼õÉٺܶඨÒ壬ËùÒÔÈç¹ûÄãÒ²ÏëÑо¿Ò»Ï´¿CSS µ¯³öʽ²Ëµ¥£¬ÄÇÄã¾Í²é¿´ÎÒдµÄ#menu²¿·Ý£¬Äã»á·¢ÏÖ´úÂëºÜÉÙ£¬Ö±¹ÛÃ÷ÁË¡£

ÕâÀï˵µÄ¿ÉÄܱȽϳéÏó,ÎÒµ±È»Ò²Ã»Óиø³öCSS»òÊÇʲô´úÂëÖ®ÀàµÄ¶«Î÷,ÎÒÏàÐÅϲ»¶Ñо¿µÄÄãÒ»¶¨Ïëµ½Á˸ÃÔõô×öÁË°É^^!

ÎÒÒ²²»»áдרҵµÄ½Ì³Ì£¬ÕâÖ»ÊǼǼ×Ô¼ºµÄѧϰÀú³Ì£¬Èç¹ûÓв»¶ÔµÄµØ·½Çë°üº¬£¡

ÀëÉϴη¢²¼·ç¸ñÒѾ­ÓÐһЩʱ¼äÁË,²»ÖªµÀÊÇÉÙÁ˼¤Ç黹ÊÇʲô,×ÜÖ®¾õµÃ×Ô¼ººÃÀÛ,ºÃÏëÓÐÒ»¸öµØ·½Í£¿¿Ò»ÏÂ,°¥,Ò²ÐíÄãÒ²²»ÖªµÀÎÒÔÚ˵ʲô,ÎÒÒ²²»ÖªµÀ…

OK,˵·ç¸ñ°É,Õâ¸ö·ç¸ñÊÇÓÃĬÈÏ·ç¸ñ1.6¸ÄÔìµÄ,¼ÓÈëÁËһЩС¸Ä¶¯£¬µ±È»Óкܶ಻ÍêÉƵĵط½£¬Ò²ÐíÕâÖ»ÊÇ°´ÐÄÇé×öµÄ£¬×ÜÊÇÔÚ²»Í£µÄ¸Ä¶¯£¬¼Ó¶«Î÷ºÍɾ¶«Î÷£¬ËùÒÔÓкܶà¸öÐԵĶ«Î÷£¬ÔÚÄúʹÓõÄʱºòÇë×Ô¼º¸Ä°É¡£

ÐèÒªµÄ²å¼þ:
Gravatar ͼ±êÅÅÁÐ; ¿ÉÒÔÔÚÎÒµÄBlogÉÏÕÒµ½ÏÂÔØ£¡
ÖÐÎÄ WordPress ¹¤¾ßÏä;
Popularity Contest;
Èç¹û°²×°µÄʱÓÐÈϺÎÎÊÌ⣬Çëµ½Blog¸æËßÎÒ£¡

±ê×¼·½Ã棺
ʹÓÃXHTML 1.1ºÍCSS 2.1Éè¼Æ£¬ËùÓÐÒ³Ãæͨ¹ýУÑ飡
ÔÚFirefox 2.0.6¡¢IE 6¡¢IE7ÖвâÊÔ±£³ÖÒ»ÖÁ£¬ÊÊÓ¦800X600ÒÔÉÏËùÓзֱæÂÊ
ÏÂÔصØÖ·£ºhttp://code.google.com/p/fvcity/downloads/

±ðµÄ²»Ïë˵ÁË£¬ÓÐÐÄÇéµÄʱºòÔÚÌí¼Ó°É£¡

ÔÚ³ö´íʱÈç¹û¶Ô´úÂë×ö¼òµ¥¼ì²â¿ÉÒÔÊ¡È¥ºÜ¶àÍ·Í´µÄÎÊÌâ¡£W3C¶ÔÓÚXHTMLÓëCSS ¶¼Óмì²â¹¤¾ß¿ÉÓã¬Çë¼û http://validator.w3.org ¡£Çë×¢Ò⣬ÔÚÎļþ¿ªÍ·µÄ´íÎ󣬿ÉÄÜÒòΪ²»µ±µÄ½á¹¹µÈÒòËØÔì³É¸ü¶à´íÎó£»ÎÒÃǽ¨ÒéÏÈÐÞÕýһЩ×îÃ÷ÏԵĴíÎóÖ®ºóÖØмì²â£¬ÕâÑùÒ²Ðí»áÈôíÎóÊýÁ¿±¬¼õ¡£

2.ʹÓø¡¶¯¹¦ÄÜʱ¼ÇµÃʹÓÃÇå³ýÃüÁî

¸¡¶¯ÊǸöΣÏյŦÄÜ£¬Î´±Ø»á²úÉúÄúËùÆÚÍûµÄ½á¹û¡£Èç¹ûÄúÓöµ½¸¡¶¯ÔªËØÑÓÉìµ½ÍâΧÈÝÆ÷µÄ±ß¿ò»òÕßÆäËû²»Õý³£Çé¿ö£¬ÇëÏÈÈ·¶¨ÄúµÄ×ö·¨ÊÇÕýÈ·µÄ¡£Çë²ÎÔÄEric Meyer ÔÚComplex Spiral Consulting Web ÍøÕ¾ÉϵĽÌѧ¡£
ÔÚʹÓõÄʱºò¼ÇµÃ²»Ê¹ÓþÍÇå³ýËü,ÆäʵÎÒºÜϲ»¶Ê¹Óø¡¶¯¹¦ÄÜ¡£

3.±ß½çÖغÏʱÀûÓÃpadding»òborderÀ´±ÜÃâ

Äú¿ÉÄÜ»áΪÁËÒ»µã²»Ó¦¸Ã³öÏֵĿռä¶ø½¹Í·Àö»òÕßÄúÐèÒªÒ»µãµã¿Õ¼äʱ£¬ÔõÑù¶¼¼·²»³öÀ´¡£Èç¹ûÄúÓÐÓõ½margin£¬ÄÇôºÜÈÝÒײúÉú±ß½çµÄÖغϣ»Andy BuddÔÚËûµÄÍøÕ¾ÉϽâÊÍÁË¿ÉÄܵÄ×ö·¨¡£

4.³¢ÊÔ±ÜÃâͬʱ¶ÔÔªËØÖ¸¶¨padding/borderÒÔ¼°¸ß¶È»ò¿í¶È

Windows°æIE¾­³£µ¼ÖÂwidthÓëheightµÄ¼ÆËãÎÊÌâ¡£ÓÐЩ·½·¨¿ÉÒÔ½â¾ö´ËÎÊÌ⣬µ«Èç¹ûĸԪËØÐèÒªÖ¸¶¨¸ß¶ÈÓë¿í¶Èʱ£¬×îºÃÄܹ»ÔÚĸԪËØÖ®ÄÚµÄ×ÓÔªËØÌ×ÓÃmargin,»òÕßµ±×ÓÔªËØÐèÒªÖ¸¶¨¸ß¶ÈÓë¿í¶Èʱ£¬ÔÚĸԪËØÌ×ÓÃpaddingÒÔ´ïЧ¹û¡£

5.²»ÒªÒÀÀµmin-width/min-height

Windows°æIE²¢²»Ö§Ô®Á½ÖÖÓï·¨¡£µ«ÊÇÔÚijÖ̶ֳÈÏ£¬windows°æIE¿ÉÒÔ´ïµ½Ï൱ÓÚmin-width/min-heightµÄЧ¹û£¬ËùÒÔÖ»Òª¶ÔIE×öµã¹ýÂ˹¦ÄÜ£¬¼´¿É´ïµ½ÄúÏëÒªµÄ½á¹û¡£

6.ÈôÓÐÒÉÎÊ£¬ÏȼõÉٰٷֱÈ

ÓÐʱºòijЩ´íÎó»áʹ50%+50%³ÉΪ100.1%£¬Ê¹ÍøÒ³³öÏÖÎÊÌâ¡£ÕâʱÇë³¢ÊÔ½«ÕâЩֵ¸ÄΪ49%£¬ÉõÖÁ49.9%¡£

7.¼Çס¡°TRouBLed¡±Ð´·¨

Border£¬marginÓëpaddingµÄ¼òдÓï·¨ÓÐÌض¨Ë³Ðò£¬´ÓÉÏ·½¿ªÊ¼Ë³Ê±Õë·½Ïòת¶¯£ºtop,right,bottom,left. ËùÒÔmargin:0 1px 3px 5px;µÄ½á¹ûÊÇÉÏ·½Îޱ߽磬ÓÒ±ß1ÏñËØ£¬ÒÔ´ËÀàÍÆ¡£¼Çס¡°TRouBLe¡±£¬Äú¾Í²»»áŪ´í´ÎÐòÁË¡£

8.Ö»Òª²»ÊÇÁãµÄÖµ£¬¶¼ÒªÖ¸¶¨µ¥Î»

CSSÐèÒªÄú¶Ôÿ¸öfont£¬MarginµÈ¸÷ÖÖÖµÖ¸¶¨µ¥Î»¡££¨Î¨Ò»µÄÀýÍâÊÇline-height£©

±¸×¢£º±¾ÎÄÓв¿·ÝÊÇÍøÂç×ÊÔ´¡£