×÷Ϊһ¸ö³ÌÐòÔ±£¬¾³£ÐèÒªÃæ¶ÔµÄÒ»¸öÎÊÌâ¾ÍÊÇÔÚÐÂÎŵÈÐÅÏ¢µÄ±êÌâÁбíÖУ¬³£³£ÎªÁËÊÊÓ¦±í¸ñµÄ¿í¶È£¬ÐèÒª¶Ô¹ý³¤µÄ±êÌâÎÄ×ֵĽøÐнØÈ¡²¢ÔÚ½ØÈ¡ºóµÄÎÄ×ÖÄ©¶Ë¼ÓÉÏÊ¡ÂԺš£
ÖÚËùÖÜÖª£¬Óкܶ෽·¨¿ÉÒÔʵÏÖÕâ¸ö¹¦ÄÜ£¬JavaScript£¬ASP£¬PHP¶¼Óи÷×ÔµÄʵÏÖ·½·¨£¬µ«ÊÇÃæÁÙµÄÎÊÌâÓкܶ࣬±ÈÈçÖÐÓ¢ÎÄ»ìÔÓʱ»òÔÚijЩ±àÂëÏ£¬ÈÝÒ×Ôì³É½ØÈ¡³öÏÖÂÒÂëµÄÎÊÌ⣬ËäÈ»´ó¶àÊýÎÊÌâÒѾÓбȽϳÉÊìµÄ½â¾ö·½°¸£¬µ«ÔÚÊý¾ÝÁ¿±È½Ï´óʱ£¬Ê¹ÓÃJavaScript£¬ASP£¬PHPʵÏÖÕâÒ»¹¦ÄÜ£¬ÎÞÒÉ»á¸ø¿Í»§¶Ë»ò·þÎñÆ÷¶ËÔì³É±È½Ï´óµÄ×ÊÔ´¿ªÏú¡£
Ëæ×ÅW3CµÄ½¥½¥ÆÕ¼°£¬Ðí¶àÍøÕ¾¶¼ÔÚ½øÐÐ׎«´«Í³±í¸ñת»¯ÎªDIV+CSSµÄ²¼¾Ö·½Ê½£¬ÎÒÔÚÑо¿CSSÓëDIVµÄһЩÌØÐÔʱ£¬·¢ÏÖÁËÒ»¸ö±È½ÏÓÐȤµÄCSS£¬¾¹ýһϵÁеÄÑо¿ºÍʵÑéÒԺ󣬷¢ÏÖÁËÒ»¸öʹÓÃDIV+CSSʵÏÖÕâÒ»¹¦ÄܵÄÁíÀà·½·¨£¬´Ë·½·¨ÔÚÎÒËùÄܲâÊÔ¾ùÎÞÎÊÌ⣬²¢ÇÒÁ¼ºÃµÄ¼æÈÝÓÚ¸÷ÖÖ±àÂë¼°ÖÐÓ¢ÎÄ»ìÅŵÄÇé¿ö¡£
ÔÚDivÖеķ½·¨£º
<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">
<NOBR>¾ÍÊDZÈÈçÓÐÒ»ÐÐÎÄ×Ö£¬ºÜ³¤£¬±í¸ñÄÚÒ»ÐÐÏÔʾ²»ÏÂ.</NOBR>
<NOBR>¾ÍaÊDZÈÈçÓÐÒ»ÐÐÎÄ ......
TABLE{
BORDER-RIGHT: #888 1px solid;
BORDER-TOP: #888 1px solid;
MARGIN-TOP: 10px;
BORDER-LEFT: #888 1px solid;
WIDTH: 100%;
BORDER-BOTTOM: #888 1px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BORDER-COLLAPSE: collapse;
}
TABLE PRE {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: auto;
PADDING-TOP: 0px;
BACKGROUND-COLOR: transparent;
BORDER-RIGHT-WIDTH: 0px;
}
TABLE TH {
BORDER-RIGHT: #888 1px solid;
PADDING-RIGHT: 15px;
BORDER-TOP: #888 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
VERTICAL-ALIGN: baseline;
BORDER-LEFT: #888 1px solid;
PADDING-TOP: 5px;
BORDER-BOTTOM: #888 1px solid;
BACKGROUND-COLOR: #ccc;
}
TABLE TD {
BORDER-RIGHT: #aaa 1px solid;
PADDING-RIGHT: 15px;
BORDER-TOP: #aaa 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
VERTICAL-ALIGN: text-top;
BORDER-LEFT: #aaa 1px solid;
PADDING-TOP: 5px;
BORDER-BOTTO ......
ÎÒ³ÐÈÏÎÒ²¢²»¾³£ÏëÕâ¸öÎÊÌâ......ÎÒÃÇдµÄcssµÄЧÂÊÊÇÔõôÑùµÄÄØ£¬ä¯ÀÀÆ÷äÖȾµÄËÙ¶ÈÓÖÈçºÎÄØ£¿
ÕâÊÇÓ¦¸ÃÊÇä¯ÀÀÆ÷¿ª·¢ÕßÓ¦¸Ã¹ØÐĵÄ(Ò³Ãæ¼ÓÔظü¿ì£¬Óû§¾Í»á¸üÓä¿ì)¡£MozillaÓÐһƪÎÄÕ£ºabout best practices . Googleµ±È»Ò²ºÜ¹ØÐÄÕâ¸öÎÊÌ⣬ËûÃÇÒ²ÓÐÕâÑùһƪÎÄÕ£ºOptimize browser rendering ¡£
ÈÃÎÒÃÇÁ˽âÏÂËûÃÇÖ÷Òª³«µ¼µÄ¶«¶«£¬È»ºóÌÖÂÛËûÃǵÄʵÓÃÐÔ¡£
´ÓÓÒµ½×ó
ä¯ÀÀÆ÷ÈçºÎ¶ÁÈ¡ÄãµÄCSSÑ¡ÔñÆ÷ÓÐÒ»¸öºÜÖØÒªµÄÔÔò£¬ÄǾÍÊÇËüÃÇ´ÓÓÒµ½×ó¶ÁÈ¡¡£ÕâÒâζÕâÏñ ul > li a[title="home"] ÕâÑùµÄÑ¡ÔñÆ÷£¬a[title="home"] ½«ÊÇ×îÏȱ»¶ÁÈ¡µÄ¡£ÕâÒ»²¿·Öͨ³£±»³ÆΪ “key selector” £¨¿É·ñ³ÆΪ“Ä¿±êÑ¡ÔñÆ÷” -_-!£©Ñ¡ÔñÆ÷µÄ×îºóÒ»²¿·Ö£¬Ò²ÊDZ»Ñ¡ÔñµÄ±êÇ©¡£
ID's ÊÇ×îÓÐЧÂʵģ¬Í¨Ó÷ûÊÇ×îÂýµÄ
ÓÐËÄÖÖÄ¿±êÑ¡ÔñÆ÷£ºID, class, tagºÍͨÓ÷û¡£¿´ÏÂËûÃǸ÷×ÔµÄЧÂÊÈçºÎ:
#main-navigation { } /* ID (×î¿ì) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (×îÂý) */
#content [title='home'] /* Universal */ È»ºóÎÒÃǽáºÏ´ÓÓÒ ......
³éʱ¼äÈÏÕæѧѧ³É´óÊƵÄdiv+cssÍøÒ³Éè¼Æ·½Ê½£¬ÏȼÇϹؼü¸ÅÄîµÄÁìÎò°É£¬ÓÐÖú¶ÔÕâÖÖÍøÒ³Éè¼Æ·½Ê½ÓиöºÜºÃµÄÁìÎò¡£ÒªÖªµÀ Èκζ«Î÷ ÒªÖªµÀËùÒÔÈ»²ÅÄÜÁé»îÔËÓ㬲ÅÄÜ̸µÄÉÏ´´Ð¡£
1¡¢Ê×ÏÈ¿¼ÂÇÒ³ÃæµÄ½á¹¹
Ëùν½á¹¹¾ÍÊÇ¿´¿´Ò³ÃæÓÐÄÇЩÄÚÈݿ锽áºÏ¹¹³É“£¬ÁгöÕâЩÄÚÈݽṹ¿é£¬È»ºó½øÐÐÌáÈ¡£¬ÕûÀí×îºóÐèÒªµÄÒ»¸öÁÐ±í¡£
ÕûÀí¾ÍÊǶÔÄÚÈÝ¿é½øÐкÏÀí»®·Ö£¬¾¡Á¿ÌáÈ¡ÖØÓò¿·Ö£¬×îºóÐγÉÒ»·ÝÌÞ³ýÖظ´µÄ¿é£¬ÖØÓÃÁ£¶ÈºÏÀíµÄÒ»¸öÁÐ±í¡£
2¡¢½á¹¹ºÍ²¼¾ÖµÄ·ÖÀë¡£
½á¹¹ºÍ²¼¾Ö²»ÊÇÒ»»ØÊ£¬ÏÖÓнṹºó²Å¿¼ÂDz¼¾Ö£¬²¼¾ÖÊǽ¨Á¢Ôڽṹ»ù´¡Ö®Éϵģ¬ÊǶԽṹµÄÒ»ÖÖäÖȾ¡£¾ÍºÃÏñÎÒÔÚÉè¼Æ·þװ֮ǰҪ֪µÀ·þ×°µÄ¹¹³É£ºÓÐÁì×Ó£¬Å¦¿Û£¬¿Ú´ü£¬Ðä×ӵȹ¹³É£¬È»ºóÔÚ¿¼ÂÇÁì×ÓÓÃɶÑÕÉ«£¬ÐÎ×´£¬¿Ú´ü·Åµ½ÄǸöλÖ᣶ÔÕâЩԪËؽøÐÐÐÞÊκó¾Í³ÉÁ˲»Í¬¿îʽµÄÒ·þÁË¡£div¾ÍÊǽṹ¿é£¬css¾ÍÊÇÆðµÄÕâ¸ö×óÓҵIJ¼¾Ö¹¤¾ß£¬¶Ôͬһ¸ö½á¹¹¿ÉÒÔʹÓò»Í¬µÄcss²¼¾ÖÑùʽ£¬ÄÇô¾ÍÐγÉÁ˲»Í¬·ç¸ñµÄÒ³Ãæ±íÏÖÐÎʽ¡£¶ø½á¹¹Ìå¿éÊDz»±äµÄ¡£
3¡¢½á¹¹µÄ±íÏÖÊôÐÔºÍcss¹Øϵ
ËùÓнṹµÄ±íÏÖÊôÐÔ¶¼¿ÉÒÔÓÃcss´úÌæʵÏÖ£¬¶øÇÒÒªÇó²»ÔÙʹÓýṹµÄ±íÏÖÊôÐÔ£¬¶øÊÇÓÃcss´úÌ棬¼´ÊµÏֽṹºÍ²¼¾ÖÑùʽµÄÍêÈ«·ÖÀ룬Õâ¸ö¿ÉÒÔ·½±ã¶ÔÒ»Ì׽ṹ½øÐ ......
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header,
csdnblog_sidebar, csdnblog_content¡£
ËùÒÔ£¬¶¨ÒåËüÃǵÄÖ÷ÌåÑùʽ¿ÉÒÔÕâÑù:
#csdnblog_header
{
//Í·²¿µÄ·ç¸ñ
}
#csdnblog_sidebar
{
//²à±ßÀ¸µÄ·ç¸ñ
}
#csdnblog_content
{
//Ö÷ÌåÄÚÈݵķç¸ñ
}
ÕâÈý¸ödivÓÖ±»Á½¸ödiv°ü¹üÆðÀ´ÁË£¬ËüÃǵÄid·Ö±ðÊÇcsdnblog_allwrap,
csdnblog_midwrap
ÕâÁ½¸ö»¹¿ÉÒÔ¶¨ÒåÕû¸öÒ³ÃæµÄÕûÌåÑùʽ
#csdnblog_allwrap
{
//ÄãÏëÒªµÄ·ç¸ñ
}
#csdnblog_midwrap
{
//ÄãÏëÒªµÄ·ç¸ñ
}
Ò³ÃæµÄÍ·²¿ÓÉÒÔϼ¸²¿·Ö×é³É
1¡¢h1£¬ÏÔʾblogµÄÓû§×Ô¶¨Òå±êÌâ
#csdnblog_header h1
{
//±êÌâ·ç¸ñÉèÖÃ
}
2¡¢h2£¬ÏÔʾÓû§×Ô¶¨ÒåµÄblogÃèÊö
#csdnblog_header h2
{
//blogÃèÊö·ç¸ñÉèÖÃ
}
3¡¢ul, idΪpersonalnav, ¸öÈ˵¼º½Áбí
#csdnblog_header
ul#personalnav
{
//blog¸ö ......
·¢ÎÄÕÂÖУ¬Í¼Æ¬°Ñdiv³ÅÆÆÁ˵Ľâ¾ö°ì·¨
ÔÀ´Í¼Æ¬×ÔÊÊÓ¦¿í¶ÈÒ»°ã¶¼ÊÇͨ¹ýJavascriptÀ´½â¾öµÄ£¬µ«ÊǶàÉÙ»¹ÊDZȽÏÂé·³¡£»¹ÓÐÒ»ÖÖͨ¹ýÉèÖÃÍâ²ãÈÝÆ÷overflow:hiddenÊôÐÔÀ´½â¾ö£¬µ«ÊÇÕâÑù»áµ¼ÖÂͼƬÏÔʾ²»È«µÄÎÊÌâ¡£½ñÌì¿´µ½ÁËÒ»ÖÖеĽâ¾ö°ì·¨£¬Í¨¹ýCSSÀ´½â¾öÕâ¸öÎÊÌâ¡£
CSS´úÂë
img{
max-width:500px;
width:expression_r(document.body.clientWidth>500?"500px":"auto");
} ......
×ܼǼÊý:772; ×ÜÒ³Êý:129; ÿҳ6 Ìõ;
Ê×Ò³ ÉÏÒ»Ò³ [1] 2
[3] [4] [5] [6] [7] [8] [9] [10] ÏÂÒ»Ò³ βҳ