div+css(¶þ)
ǰÑÔ£ºCSS²¼¾ÖÓ봫ͳ±í¸ñ(table)²¼¾Ö×î´óµÄÇø±ðÔÚÓÚ£ºÔÀ´µÄ¶¨Î»¶¼ÊDzÉÓñí¸ñ£¬Í¨¹ý±í¸ñµÄ¼ä¾à»òÕßÓÃÎÞɫ͸Ã÷µÄGIFͼƬÀ´¿ØÖÆÎIJ¼¾Ö°æ¿éµÄ¼ä¾à£»¶øÏÖÔÚÔò²ÉÓòã(div)À´¶¨Î»£¬Í¨¹ý²ãµÄmargin,padding,borderµÈÊôÐÔÀ´¿ØÖưæ¿éµÄ¼ä¾à¡£
(Ò») CSS2ºÐÄ£ÐÍ
ºÐÄ£ÐÍÖ÷Òª¶¨ÒåËĸöÇøÓò£ºÄÚÈÝ(content)¡¢±ß¿ò¾à(padding)¡¢±ß½ç(border)ºÍ±ß¾à(margin)¡£
(¶þ) ʵÀý½âÎö
#sample{
MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150%; WIDTH:60%; }
˵Ã÷ÈçÏ£º
l MARGINÊÇÖ¸²ãµÄ±ß¿òÒÔÍâÁôµÄ¿Õ°×£¬ÓÃÓÚÒ³±ß¾à»òÕßÓëÆäËü²ãÖÆÔìÒ»¸ö¼ä¾à¡£
"10px 10px 10px 10px"·Ö±ð´ú±í"ÉÏÓÒÏÂ×ó"(˳ʱÕë·½Ïò)Ëĸö±ß¾à£¬Èç¹û¶¼Ò»Ñù£¬¿ÉÒÔËõд³É"MARGIN: 10px;"¡£Èç¹û±ß¾àΪÁ㣬Ҫд³É"MARGIN: 0px;"¡£
×¢Ò⣺µ±ÖµÊÇÁãʱ£¬³ýÁËRGBÑÕɫֵ0%±ØÐë¸ú°Ù·ÖºÅ£¬ÆäËûÇé¿öºóÃæ¿ÉÒÔ²»¸úµ¥Î»"px"¡£MARGINÊÇ͸Ã÷ÔªËØ£¬²»Äܶ¨ÒåÑÕÉ«¡£
l PADDINGÊÇÖ¸²ãµÄ±ß¿òµ½²ãµÄÄÚÈÝÖ®¼äµÄ¿Õ°×¡£ºÍmarginÒ»Ñù£¬·Ö±ðÖ¸¶¨ÉÏÓÒÏÂ×ó±ß¿òµ½ÄÚÈݵľàÀë¡£Èç¹û¶¼Ò»Ñù£¬¿ÉÒÔËõд³É"PADDING:0px"¡£µ¥¶ÀÖ¸¶¨×ó±ß¿ÉÒÔд³É"PADDING-LEFT: 0px;"¡£PADDINGÊÇ͸Ã÷ÔªËØ£¬²»Äܶ¨ÒåÑÕÉ«¡£
l BORDERÊÇÖ¸²ãµÄ±ß¿ò£¬"BORDER-RIGHT: #CCC 2px solid;"ÊǶ¨Òå²ãµÄÓұ߿òÑÕɫΪ"#CCC"£¬¿í¶ÈΪ"2px"£¬ÑùʽΪ"solid"Ö±Ïß¡£Èç¹ûÒªÐéÏßÑùʽ¿ÉÒÔÓÃ"dotted"¡£
l BACKGROUNDÊǶ¨Òå²ãµÄ±³¾°¡£·Ö2¼¶¶¨Ò壬Ïȶ¨ÒåͼƬ±³¾°£¬²ÉÓÃ"url(../images/bg_logo.gif)"À´Ö¸¶¨±³¾°Í¼Æ¬Â·¾¶£»Æä´Î¶¨Òå±³¾°É«"#FEFEFE"¡£"no-repeat"Ö¸±³¾°Í¼Æ¬²»ÐèÒªÖØ¸´£¬Èç¹ûÐèÒªºáÏòÖØ¸´ÓÃ"repeat-x",×ÝÏòÖØ¸´ÓÃ"repeat-y",ÖØ¸´ÆÌÂúÕû¸ö±³¾°ÓÃ"repeat"¡£ºóÃæµÄ"right bottom;"ÊÇÖ¸±³¾°Í¼Æ¬´ÓÓÒϽǿªÊ¼¡£Èç¹ûûÓб³¾°Í¼Æ¬¿ÉÒÔÖ»¶¨Òå±³¾°É«BACKGROUND: #FEFEFE
l  
Ïà¹ØÎĵµ£º
CSSÑ¡ÔñÆ÷¿ÉÒÔ׼ȷµÄ²éÕÒµ½Ö¸¶¨µÄ±êÇ©£¬Ê¹ÓÃCSSÑ¡ÔñÆ÷¿ÉÒÔʹÎÒÃÇ·½±ãΪ±êÇ©¶¨ÒåCSSÑùʽ£¬¶ø²»ÓÃΪÿ¸ö±êÇ©¶¼¶¨ÒåCSSÑùʽ¡£
ÏÂÃæÎÒÃǽ²Ò»ÏÂ×î³£ÓõÄÎåÖÖCSSÑ¡ÔñÆ÷£º
Ò»¡¢±êǩѡÔñÆ÷£ºÍ¨³£ÓÃËüÀ´²éÕÒHTMLÖеÄijһÖÖ±êÇ©¡£
ÀýÈ磺
ҪΪHTMLÖеÄËùÓÐP±êÇ©Éè¼ÆÑùʽ£¬¿ÉÒÔʹÓÃÏÂÃæµÄ·½·¨
p { font:12px;}
¶þ¡¢idÑ¡ÔñÆ÷£º Í ......
#weblmenu
{
height:22px;
width:700px;
float:left;
display:inline;
text-align:left;
}
#weblmenu ul
{
height:22px;
width:700px;
text-align:left;
float:left;
}
#weblmenu ul li
{
height:22px;
width:110px;
float:left;
list-style-type:none;
text-align:center;
word-break:break-all;
} ......
<div class="llist" >
<div class="lbar">¶¨ÏòÓªÏú</div>
<ul class="lbox01" style="height: auto;min-height: 100px;">
<c:forEach var="item" items="${marketInfos.results}">
<li><div style="overflow:hidden; text-overfl ......
ÓÃdiv+css½â¾öVS2005Öв¼¾ÖÄѵÄÎÊÌâ
Div+CSS²¼¾ÖÈëÃÅ½Ì³Ì ¡¶×ª×Ô À¶É«ÀíÏë http://www.blueidea.com/tech/site/2006/3574.asp¡·
Ò³Ãæ²¼¾ÖÓë¹æ»®
ÔÚÍøÒ³ÖÆ×÷ÖУ¬ÓÐÐí¶àµÄÊõÓÀýÈ磺CSS¡¢HTML¡¢DHTML¡¢XHTMLµÈµÈ¡£ÔÚÏÂÃæµÄÎÄÕÂÖÐÎÒÃǽ«»áÓõ½Ò»Ð©ÓйØÓÚHTMLµÄ»ù±¾ÖªÊ¶£¬¶øÔÚÄãѧϰÕâÆªÈëÃŽ̳Ì֮ǰ£¬ÇëÈ·¶¨ÄãÒѾ¾ßÓÐÁË ......
jQueryÌṩcss()µÄ·½·¨À´ÊµÏÖǶÈëʽ¸Ä±äÔªËØÑùʽ£¬css()·½·¨ÔÚʹÓÃÉϾßÓжàÑùÐÔ¡£ÆäÖÐÒ»ÖÖ½ÓÊÜÁ½¸öÊäÈë²ÎÊý£ºÑùʽÊôÐÔºÍÑùʽֵ£¬ËüÃÇÖ®¼äÓöººÅ·Ö¿ª¡£±ÈÈçÎÒÃÇÒª¸Ä±äÁ´½ÓÑÕÉ«£¬ÎÒÃÇ¿ÉÒÔʹÓÃÏÂÃæµÄ´úÂ룺$("#61dh a").css('color','#123456');
//ÕâÀïÑ¡ÔñÆ÷¡®$("#61dh a")¡¯±íʾIDΪ¡®#61dh¡¯µÄÔªËØÏµÄËùÓÐÁ´½Ó¡£
//.css( ......