Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

¡¾×ª¡¿DIV+CSSÒ³ÃæÈÃfooterʼÖÕÔڵײ¿

ƽ ʱÄÃCSS²¼¾Ö¶¼ÊÇһЩÄÚÈݱȽ϶àµÄÍøÕ¾,ǰÁ½ÌìÓÃCSS+DIVŪÁ˸öÄÚÈÝÉÙµÄÒ³Ãæ,·¢ÏÖÁËÒ»¸öСÎÊÌâ,¿ÉÄÜ´ó¼Ò¶¼»áÓöµ½,ÄǾÍÊÇÍøÕ¾FOOTERµÄ¶¨ λ,Èç¹ûÄÚÈݱȽÏÉٵϰ,Ò³ÃæµÄFOOTER¾Í»áËæ×ÅÄÚÈݵļõÉÙÅܵ½ÉÏÃæÈ¥,²»ÊǹԹԵÄÔÚÏÂÃæ´ô×Å,º¦µÃÎÒÑо¿Á˰ëÌìÕÒ¸ßÈËÖÕÓÚ¸ø¸ã¶¨ÁË,Ò²ËãÒ»¸öССµÄ ¼¼Çɸø´ó¼Ò·ÖÏí
Ê×ÏÈÎÒÃÇÒªÔÚÍâ²ãÉ趨һ¸öDIV(content £©ÈÃÕâ¸öDIVµÄ¸ß¶ÈµÈÓÚä¯ÀÀÆ÷µÄ¸ß¶È,È»ºó½«footerÕâ¸öDIVÉ趨ΪcontentµÄÒ»¸ö×ÓDIV ,²¢Ê¹Óþø¶Ô¶¨Î»,ʹËü¹Ì¶¨µ½contentµÄµ×¶Ë;ÕâÊÇ´ó¸ÅµÄ˼·,
ÏÂÃæÊÇʵÏֵķ½·¨:
<body>
<div id="content">
<div id="main">
<h1>main</h1>
<p>Äã¿ÉÒԸıää¯ÀÀÆ÷´°¿ÚµÄ¸ß¶È£¬À´¹Û²ìfooterЧ¹û¡£</p>
<p>ÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×ÖÎÄ×Ö</p>
</div>
<div id="footer"> <h1>Footer</h1><div>
</div>
</body>
È»ºóÎÒÃÇдÏÂCSS:
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
Ê×ÏȰÑHTMLºÍBODYµÄHEIGHTÊôÐÔÉèΪ100%;±£Ö¤contentµÄ¸ß¶ÈÄܳÅÂúä¯ÀÀÆ÷;
È»ºó°Ñ#contentµÄ¸ß¶ÈÒ²ÉèÖÃΪ100% £¬µ«ÊÇÕâÀïÎÒÃÇʹÓÃÁË“min-height”ÊôÐÔ£¬¶ø²»ÊǵÄheightÊôÐÔ£¬ÕâÊÇÒòΪÈç¹û#mainÖеÄÄÚÈÝÈç¹ûÔö¼ÓÁË£¬ËûµÄ¸ß¶È³¬¹ýÁËä¯ÀÀÆ÷´°¿ÚµÄ ¸ß¶È£¬ÄÇôÈç¹û°Ñ#contentµÄ¸ß¶ÈÈÔÈ»ÊÇ100%£¬¾Í»áµ¼ÖÂ#footerÈÔÈ»¶¨Î»ÔÚ䝯÷´°¿ÚµÄ϶ˣ¬´Ó¶øÕÚ¸ÇÁË#contentÖеÄÄÚÈÝ¡£
¶øÊ¹ÓÃmin-heightÊôÐÔµÄ×÷ÓþÍÊÇʹ#contentµÄ¸ß¶È“ÖÁÉٔΪä¯ÀÀÆ÷´°¿ÚµÄ¸ß¶È£¬¶øµ±Èç¹ûËüÀïÃæµÄÄÚÈÝÔö¼ÓÁË£¬ËûµÄ¸ß¶È»áÒ²¸úËæ×ÅÔö¼Ó£¬Õâ²ÅÊÇÎÒÃÇÐèÒªµÄЧ¹û¡£
½ÓÏÂÀ´£¬½«#contentÉèÖÃΪÏà¶Ô¶¨Î»£¬Ä¿µÄÊÇʹËû³ÉΪËüÀïÃæµÄ#footerµÄ¶¨Î»»ù×¼
È»ºó°Ñ#foooterÉèÖÃΪ¾ø¶Ô¶¨Î»£¬²¢Ê¹Ö®ÌùÔÚ#mainµÄ×î϶ˡ£
µ«ÊÇҪעÒ⣬Èç¹ûµ±ÎÒÃǰÑ#footerÌùÔÚ#contentµÄ×î϶ËÒÔºó£¬Ëûʵ¼ÊÉÏÒѾ­ºÍÉÏÃæµÄ#mainÕâ¸ödivÖØµþÁË£¬ÎªÁ˱ÜÃ⸲¸Ç#mainÖÐ µÄÄÚÈÝ£¬ÎÒÃÇÔÚ#main


Ïà¹ØÎĵµ£º

JSP/XML,JavaBeanºÍCSS/XSLЭͬ¹¤×÷

1.ÔÚJSPÖÐÉú³É¶¯Ì¬XML
  ¿ÉÒÔʹÓÃJSPÉú³ÉXML,ʹÓÃCSS»òÕßXSLת»»ºÍÏÔʾXML;
  Ö»ÒªÔÚ¾²Ì¬µÄXMLÎĵµÄ£°åÖмÓÈëJava´úÂëºÍJSP±ê¼Ç£¬XML¾Í¿ÉÒÔÓо²±ä¶¯£¬²úÉú¶¯Ì¬µÄÄÚÈÝ£¬Éú³ÉXMLÎĵµµÄ·½·¨ºÜ¼òµ¥£¬Ö»ÐèÒªÔÚÎļþÖÐʹÓÃÖ¸Áîcontenttype,Èç<%@ page contenttype="text/xml"%>£»
  ÔÚXMLÎĵµÖÐͬÑù¿ÉÒÔʹ ......

CSS¶¨ÒåScroll¹ö¶¯ÌõÑùʽ¡£

 scrollbar-face-color: #000000;
 scrollbar-shadow-color: #FFC300;
 scrollbar-highlight-color: #000000;
 scrollbar-3dlight-color: #FFC300;
 scrollbar-darkshadow-color: #000000;
 scrollbar-track-color: #000000;
 scrollbar-arrow-color: #FFC300;
Èç¹ûʹÓÃDw»òÕ߯ä ......

Javascript+css ʵÏÖÍøÒ³»»·ô¹¦ÄÜ


ÏÖÔÚÍøÕ¾»»Æ¤·ôÊDZȽϳ£¼ûµÄ¹¦ÄÜ£¬´ó¶àÊýÂÛ̳¶¼Óеģ¬ÒªÏëʵÏÖÕâÑùЧ¹û¿ÉÒÔ¿´ÈçÏ´úÂ룺Html´úÂ벿·Ö:
1.ÒªÓÐÒ»¸ö´øidµÄÑùʽ±íÁ´½Ó,ÎÒÃÇҪͨ¹ý²Ù×÷Õâ¸öÁ´½ÓÀ´µ÷Óò»Í¬µÄhref.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.Ƥ·ôÑ¡Ôñ°´Å¥(ºǫ́Ϊÿ¸öliÌí¼Óonclickʼþ,´¥·¢»»· ......

cssÖеĴ¹Ö±¾ÓÖУ¬²»Í¬ÓÚÔÚTableÖÐ

´¹Ö±¾ÓÖжԱí¸ñÀ´ËµÊÇС²ËÒ»µú£¬Ö»ÐèÖ¸¶¨µ¥Ôª¸ñΪvertical-align: middle¼´¿É£¬
µ«ÕâÔÚcss²¼¾ÖÖв»¹ÜÓ᣼ÙÉèÄ㽫һ¸öµ¼º½²Ëµ¥µÄ¸ß¶ÈÉèΪ2em£¬
È»ºóÔÚcssÖÐÖ¸¶¨´¹Ö±¶ÔÆëµÄ¹æÔò£¬ÎÄ×Ö»¹ÊǻᱻÅŵ½ºÐµÄ¶¥²¿£¬¸ù±¾Ã»ÓÐÊ²Ã´Çø±ð¡£
Òª½â¾öÕâÒ»ÎÊÌ⣬ֻÐ轫ºÐµÄÐиßÉèΪÓëºÐµÄ¸ß¶ÈÏàͬ¼´¿É£¬
ÒÔÕâ¸öÀý×ÓÀ´Ëµ£¬ºÐ¸ß2em,ÄÇôֻР......

CSS ³õ¼¶½Ì³Ì

CSS ¸ÅÊö
CSS Ö¸²ãµþÑùʽ±í (Cascading Style Sheets)
Ñùʽ¶¨ÒåÈçºÎÏÔʾ HTML ÔªËØ
Ñùʽͨ³£´æ´¢ÔÚÑùʽ±íÖÐ
°ÑÑùʽÌí¼Óµ½ HTML 4.0 ÖУ¬ÊÇΪÁ˽â¾öÄÚÈÝÓë±íÏÖ·ÖÀëµÄÎÊÌâ
ÍⲿÑùʽ±í¿ÉÒÔ¼«´óÌá¸ß¹¤×÷ЧÂÊ
ÍⲿÑùʽ±íͨ³£´æ´¢ÔÚ CSS ÎļþÖÐ
¶à¸öÑùʽ¶¨Òå¿É²ãµþΪһ
Ñùʽ½â¾öÁËÒ»¸öÆÕ±éµÄÎÊÌâ
HTML ±êǩԭ±¾± ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ