CSSÍøÕ¾²¼¾Ödiv¸ß¶È×ÔÊÊÓ¦ ½â¾ö
ºÜ¶àµÄWeb
designerÔÚ¸Õ½Ó´¥W3C±ê×¼µÄʱºò£¬¶¼Óöµ½¹ý¸ß¶È×ÔÊÊÓ¦µÄÎÊÌâ¡£ÒòΪdivµÈ¶ÔÏóµÄheight:100%;²¢²»Äܹ»Ö±½Ó²úÉúʵ¼ÊЧ¹û£¬ÓÚÊÇ¿ªÊ¼
»³ÒÉä¯ÀÀÆ÷ÊÇ·ñÖ§³Öheight:100%;µÄ±àд·½·¨£¿µ±È»²»ÊÇ£¬×îÃ÷ÏÔµÄÀý×Ó¾ÍÊÇtable
height="100"ÊÇûÓÐÈκÎÎÊÌâµÄ¡£ÕâÊǺÜÁîÈË·³ÄÕµÄÎÊÌâ¡£ÎÒä¯ÀÀÁ˺ܶàÍøÕ¾£¬°üÀ¨www.w3cn.orgµÈ£¬ÓеĽâ¾ö°ì·¨ÊDz»¶ÏµØÐÞ¸Ä
heightµÄ¹Ì¶¨Öµ£¬»òÕßÀûÓÃÒ³Ãæ±³¾°ºÍdiv±³¾°ÏàͬÀ´ÆÛÆä¯ÀÀÕßµÄÊÓ¾õ£¬µ«¶¼Ã»ÓдӸù±¾ÉϽâ¾öÎÊÌâ¡£½ñÌì´ÓÒ»±¾¡¶CSSÍøÕ¾²¼¾Öʵ¼¡·ÉÏÖÕÓÚÕÒµ½×î
ÍêÃÀµÄ½â¾ö°ì·¨£¬À´¿´Ò»ÏÂÕâ¶Î¸ß¶È×ÔÊÊÓ¦µÄCSS´úÂ룺
html,body{
margin:0px;
height:100%;
}
#left {
background-color:#CCC;
width:300px;
height:100%;
float:left;
}
´úÂëÒѾµ½Á˲»ÄÜÔÙ¼òµ¥µÄµØ²½£¬¶Ô#left¶ÔÏóÉèÖÃÁËheight:100%;£¬È»¶øÒ²Äܹ»¿´¼û£¬Í¬Ê±ÉèÖÃÁËHTMLÓëbodyµÄheight:100%;£¬¶øÕâ¸ö¾ÍÊǸ߶È×ÔÊÊÓ¦ÎÊÌâµÄ¹Ø¼üËùÔÚ¡£
·ÖÎö£º
Ò»¸ö¶ÔÏó¸ß¶ÈÊÇ·ñ¿ÉÒÔʹÓðٷֱÈÏÔʾ£¬È¡¾öÓÚ¶ÔÏóµÄ¸¸¼¶
¶Ô
Ïó£¬#leftÔÚÒ³ÃæÖÐÖ±½ÓÐýתÔÚbodyÖ®ÖУ¬Òò´ËËüµÄ¸¸¼¶ÊÇbody£¬¶øä¯ÀÀÆ÷ĬÈÏ״̬Ï£¬ÊÇûÓиøbodyÒ»¸ö¸ß¶ÈÊôÐԵģ¬Òò´Ëµ±ÎÒÃÇÖ±½ÓÉè
ÖÃ#leftΪheight:100%;ʱ£¬²»»á²úÉúÈκÎЧ¹û£¬¶øµ±ÎÒÃǸøbodyÉèÖÃÁË100%Ö®ºó£¬ËüµÄ×Ó¼¶¶ÔÏó#leftµÄ
height:100%;±ã·¢Éú×÷ÓÃÁË£¬Õâ±ãÊÇä¯ÀÀÆ÷½âÎö¹æÔòÒý·¢µÄ¸ß¶È×ÔÊÊÓ¦ÎÊÌâ¡£¶ø´úÂëÖгýÁ˸øbodyÓ¦ÓÃÖ®Í⣬»¹¸øHTML¶ÔÏóÒ²Ó¦ÓÃÏàͬµÄÑùʽ
Éè¼Æ£¬ÕâÑù×öµÄºÃ´¦ÊÇʹIEÓëfirefoxä¯ÀÀÆ÷¶¼Äܹ»ÊµÏָ߶È×ÔÊÊÓ¦£¬¶øbodyÈ´²»ÊÇ¡£ÁíÍ⣬FirefoxÖеÄHTML±êÇ©²»ÊÇ100%¸ß¶È£¬Òò
´Ë¸øÁ½¸ö±êÇ©¶¼¶¨ÒåΪheight:100%;ÒÔ±£Ö¤Á½¸öä¯ÀÀÆ÷ϾùÄܹ»Õý³£ÏÔʾ¡£
Ïà¹ØÎĵµ£º
Â˾µÐ§¹û | ¹¦ÄÜÃèÊö
-----------------------------------------------
Alpha | ÉèÖò»Í¬µÄ͸Ã÷¶È±ä»¯Ð§¹û
-----------------------------------------------
Blur | ½¨Á¢Ä£ºýЧ¹û
-----------------------------------------------
DropShadow| ½¨Á¢Ò»ÖÖÆ«ÒƵÄÓ°ÏóÂÖÀª£¬¼´Í¶ÉäÒõÓ°
---------------------- ......
SpriteMeÊÇGoogleµÄÒ»¸ö¿ªÔ´ÏîÄ¿£¬¿ÉÒÔÓÃÀ´·½±ãµØÕÒ³öÒ»¸öÒ³ÃæÖÐËùʹÓõÄͼƬ£¬È»ºó¿ÉÒÔ½«ËùÒÔͼƬºÏ²¢µ½Ò»¸ö“Sprite”ͼƬ£¬È»ºóÔÙͨ¹ý
CSS¿ØÖƵ÷ÓÃÄÄÒ»¸öÇøÓò£¬ÆäÌṩÁËÒ»¸öÍøÕ¾À´°²×°£¬ÑÝʾʹÓ÷½·¨£¬http://spriteme.org/ ¡£
°²×°·½·¨ºÜ¼òµ¥£¬°´ÕÕÉÏÃæÄǸöÒ³ÃæÉϵÄÌáʾ£¬½«Ò»¸öÁ´½ÓÍϵ½“ÊéÇ©¹ ......
ÕâÊÇÔÏÈÎÒдµÄ ±¸ÍüµÄ ¾¡¹ÜдµÄºÜÀÃ
frame.css
Java´úÂë
CHARSET "UTF-°Ë";
html,body{
margin: Áãpx;
padding: Áãpx;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: Áãpx;
padding: Áãpx;
}
/*ÓÉÓÚÓÃÁËÏà¶ÔλÖøñ¾Ö£¬Ó¦·Ö±æÂÊÌ«´óʱ£¬Í¼Æ¬ºÍÎÄ ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAO BAO TEST 2&l ......
1.document.formName.item("itemName") ÎÊÌâ
˵Ã÷:IEÏÂ,¿ÉÒÔʹÓÃdocument.formName.item("itemName")»òdocument.formName.elements["elementName"];FirefoxÏÂ,Ö»ÄÜʹÓÃdocument.formName.elements["elementName"].
½â¾ö·½·¨:ͳһʹÓÃdocument.formName.elements["elementName"].
2.¼¯ºÏÀà¶ÔÏóÎÊÌâ
˵Ã÷:IEÏÂ,¿ÉÒÔʹÓÃ() ......