CSSÊÇDHTMLµÄ»ù´¡£¬CSSÓÃÓÚÉ趨HTMLÔªËØÔÚÒ³ÃæÉϵÄÏÔʾ·ç¸ñ£¬¶øCSS-PÔòÊÇCSSµÄÒ»¸öÀ©Õ¹£¬Ëü¿ÉÓÃÀ´¿ØÖÆHTMLÔªËØÔÚÍøÒ³ÉÏ»òÕß˵ÔÚ´°¿ÚµÄλÖá£ÏÂÃæµÄÁ½¸öÁ´½ÓÌṩÁËCSSºÍCSS£PÏ꾡µÄ¼¼ÊõÊֲ᣺
¡¡¡¡ W3C CSS-Positioning
¡¡¡¡ Builder.com's CSS Guide
¡¡¡¡ ÔÚ±¾¿Î³ÌÖУ¬½«»á·´¸´µØ¶ÔCSS½øÐнéÉÜ¡£
¡¡¡¡ ʹÓÃDIV±êÇ©
¡¡¡¡ ʹÓÃCSS£P£¬Ö÷ÒªÒÀ¿¿< div >±êÇ©À´ÊµÏÖ£¬µ±Äã°ÑHTMLÄÚÈÝ·ÅÔÚ< div >±êÇ©Àïʱ£¬¿ÉÒÔ³ÆËüΪ:“DIV¿é”, “DIV ÔªËØ”, “CSS-layer”,»òÕß¼òµ¥µÄ³ÆÖ®Îª“layer”¡£
¡¡¡¡ ʹÓÃDIV±êÇ©µÄ·½·¨ºÍÆäËû±êǩûÓÐʲôÁ½Ñù£º
¡¡¡¡ < div >
¡¡¡¡ HTMLÄÚÈÝ
¡¡¡¡ < /div >
¡¡¡¡ ´¿´âʹÓÃ< DIV >±êÇ©¶ø²»¼ÓÈκÎCSSÄÚÈÝ£¬ÆäЧ¹ûÓëÓÃ< P >< /P >ÊÇÒ»ÑùµÄ¡£
¡¡¡¡ µ«µ±°ÑCSS·Å½øDIV±êÇ©ÖÐÒÔºó£¬ÎÒÃǾͿÉÒÔÖ¸¶¨HMTLÔªËØÏÔʾÔÚÆÁÄ»ÉϵľßÌåλÖ㬿ÉÒÔÔÚijһλÖÃÉÏ»³ö·½ÐλòÏߣ¬»òÕßÖ¸¶¨ÎÄ×ÖÔÚijһ¸ö¿éÖÐÈçºÎÏÔʾ¡£Ê×ÏÈÒª×öµÄ£¬ÊǸøÕâ¸öDIVÔªËØ£¨¼´²ã£©¼ÓÉÏÒ»¸öΨһµÄID±êʶ£¨IDµÄ×÷ÓÃÀàËÆÓÚΪÕâ¸ö²ãÆð¸öÃû×Ö£©¡£
¡¡¡¡ < div¡¡id="abc" >
¡¡¡¡ ¼ÓÒ»¸öIDºÅ
¡¡¡¡ < / ......
Èç¹ûÓÃwebbrowserµÄdocumentÈ¥»ñÈ¡IFrameÕâ¸ö¶ÔÏó£¬ËæºóÒ»¶¨»áµÃµ½accessdeniedµÄ´íÎó£¬ÎªÊ²Ã´£¿
ÕÒÁËһϣ¬¾Ý˵ÊDz»ÄÜ¿çÓò·ÃÎÊ...
ÖÕÓÚÓÐÒ»Ì죬ÊÔÁËһϣ¬ÔÚOnDocumentCompleteʼþÀïÃæ·µ»ØµÄdispatch¾ÍÊÇiframeµÄIHTMLWindow2¶ÔÏó£¬ÔÚÄÇÀï¿ÉÒÔ²Ù×÷ËùÓеĶÔÏó£¬È»ºó£¬ÄãÏë×öʲô¾ÍËæÄãÁË£¬²»ÖªµÀÈç¹ûÕâ¸öʱºò±£´æÁËÕâ¸öIHTMLWindow2µÄÖ¸ÕëÔÚÒÔºóÄܲ»ÄÜ·ÃÎÊÁË ......
×ªÔØ£ºhttp://jiangzhengjun.javaeye.com/blog/480996
ʼþ
DOMͬʱ֧³ÖÁ½ÖÖʼþģʽ£º²¶»ñÐÍʼþºÍðÅÝÐÍʼþ£¬µ«ÊÇ£¬²¶»ñÐÍʼþÏÈ·¢Éú¡£Á½ÖÖʼþÁ÷»á´¥¼°DOMÖеÄËùÓжÔÏ󣬴Ódocument¶ÔÏó¿ª
ʼ£¬Ò²ÔÚdocument¶ÔÏó½áÊø£¨´ó²¿·Ö¼æÈݱê×¼µÄä¯ÀÀ»á¼ÌÐø½«Ê¼þ²¶»ñ/ðÅÝÑÓÐøÖÁwindow¶ÔÏ󣩣¬DOMÖеÄÔªËØ¶¼»áÁ¬ÐøÊÕµ½Á½´Îʼþ£¬Ò»´ÎÔÚ
²¶»ñ¹ý³ÌÖУ¬ÁíÒ»´ÎÔÚðÅݹý³ÌÖС£DOMʼþÄ£ÐÍ×î¶ÀÌØµÄÐÔÖÊÊÇ£¬Îı¾½ÚµãÒ²´¥·¢Ê¼þ£¨ÔÚIEÖв»»á£©¡£µã»÷Îı¾½ÚµãʼþÁ÷Ó¦¸ÃÈçÏÂͼ£º
´«Í³Ê¼þ´¦Àíº¯ÊýÓÐÁ½ÖÖ·ÖÅ䷽ʽ£ºÔÚJavaScriptÖлòÕßÔÚHTMLÖС£
ÔÚJavaScriptÖзÖÅäʼþ´¦Àíº¯Êý£º
Js´úÂë
var
oDiv = document.getElementById(
"div1"
);
oDiv.onclick = function
() {
alert("I was clicked"
);
};
var oDiv = document.getElementById("div1");
oDiv.onclick = function () {
alert("I was clicked");
};
×¢£ºÔÚÕâ¸ö·ÖÅä·½·¨£¬Ê¼þ´¦Àíº¯ÊýÃû³Æ±ØÐëСд£¬²ÅÄÜÕýÈ·ÏìӦʼ ......
<html>
<head>
<script>
function locking(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
function Lock_CheckForm(theForm){
document.all.ly.style.display='none';document.all.Layer2.style.display='none';
return false;
}
</script>
</head>
<body>
<p align="center">
<input type="button" value="ÏµÍ³Ëø¶¨" onclick="locking()">
</p>
<div id="ly" style="position: absolute; top: 0px; filter: a ......
<meta http-equiv="x-ua-compatible" content="ie=7" />
IE6¡¢IE7¡¢FirefoxµÈä¯ÀÀÆ÷µÄ¼æÈÝÐÔÎÊÌâÈÃÍøÒ³Éè¼ÆÊ¦ÃÇ´óÉËÄԽ±¾À´ÍøÒ³Éè¼ÆÊǼþºÜÓÐȤµÄÊÂÇ飬µ«ÊÇÈ´±»Õâ¶àÓà¼æÈݹ¤×÷ÉËÄÔ½î£¬ÌØ±ðÊÇÈÃÈËÍÙÆúµÄIE6£¬¶àÉÙÈËÏëÈÃËüÏûʧ£¬¿ÉÊÇËü¾ÍÊÇÏûʧ²»ÁË£¬Î¢Èí»¹Ëµ²»»áÍ£Ö¹¶ÔIE6£¬Õæ¹»ÓôÃÆµÄ¡£
ÏÖÔÚÄØ£¬IE8Õýʽ°æÒѾ³öÀ´Ò»¶Îʱ¼äÁË£¬²»ÉÙÍøÃñ±»Î¢ÈíµÄUpdateÌáʾ°²×°ÉÏÁËIE8£¬ÕâÏÂÓÖ¸øÉè¼ÆÊ¦´øÀ´ÁËÂé·³£¬»¹ºÃ΢ÈíÁ¼ÐÄ·¢ÏÖ£¬°ÑIE8×öµÃ±È½Ï·ûºÏ±ê×¼£¬ÓëÆäËû±ê×¼ä¯ÀÀÆ÷Çø±ð²»´ó£¬¿ÉÊÇËü»¹ÊÇÓëÆäËûä¯ÀÀÆ÷ÓÐÇø±ðµÄ¡£
Ôõô°ìÄØ£¿ÎÒÒ»Ö±ÔÚÓÃIE7£¬²»ÏëÓÃIE8£¬µçÄÔÀïÓиöÂÌÉ«°æµÄIE6£¬»¹ÓÐÂÌÉ«°æµÄFirefox£¬¶ÔÓÚÍøÒ³¼æÈݲâÊÔ£¬ÎÒÓÃIE6¡¢IE7¡¢FirefoxÈý¸öä¯ÀÀÆ÷²âÊÔ£¬ÒòΪû°²×°IE8£¬ËùÒÔһֱûÄܲâÊÔ¡£
´ó¼Ò¶¼ÖªµÀ£¬IE8ÊÇÓÐÁ½ÖÖ½âÎöģʽµÄ£¬Ò»ÖÖÊÇIE8 Standard Modes £ºÄ¬ÈϵÄ×î±ê×¼µÄģʽ£¬Ñϸñ°´ÕÕW3CÏà¹Ø¹æ¶¨£¬Ò»ÖÖÊÇIE7 Standards Modes £ºIE7ÏÖÔÚÓõĽâÎöÍøÒ³µÄģʽ¡£IE7»¹ËãÊDz»´íµÄä¯ÀÀÆ÷£¬Èç¹ûÈÃIE8ä¯ÀÀÆ÷×Ô¶¯Çл»µ½IE7ģʽ£¬ÄÇÎÒÃǾͲ»ÓÃΪIE8²¼¾Ö¼æÈÝÎÊÌâ·³ÄÕÁË£¬¶ø ......
IE¶¼ÄÜʶ±ð*;±ê×¼ä¯ÀÀÆ÷(ÈçFirefox,Opera,Netscape)²»ÄÜʶ±ð*£»
IE6ÄÜʶ±ð*£¬µ«²»ÄÜʶ±ð !important,
IE7ÄÜʶ±ð*£¬Ò²ÄÜʶ±ð!important;
FF²»ÄÜʶ±ð*£¬µ«ÄÜʶ±ð!important;
дÁ½¾ä´úÂëÀ´¿ØÖÆÒ»¸öÊôÐÔ£¬Çø±ðFirefoxÓëIE6£º
background:orange;*background:blue; //
ÕâÒ»¾ä´úÂëд³öÀ´Ê±£¬ÄãÓÃfirefox»òÆäËü·ÇIEä¯ÀÀʱ£¬»á·¢ÏÖ£¬Ð´Á˸ôúÂëµÄÇøÓò±³¾°ÊdzÈÉ«µÄ£¬Èç¹ûÓÃIEä¯ÀÀ£¬È´ÊÇÀ¶É«µÄ£¬ÕâÊÇÒòΪIE¶¼ÄÜʶ±ð*;±ê×¼ä¯ÀÀÆ÷(ÈçFirefox,Opera,Netscape)²»ÄÜʶ±ð*£»
дÁ½¾ä´úÂëÀ´¿ØÖÆÒ»¸öÊôÐÔ£¬Çø±ðIE7ÓëIE6£º
background:green !important;background:blue;
//ÕâÒ»¾ä´úÂëд³öÀ´Ê±£¬ÄãÓÃIE7ä¯ÀÀ£¬»á·¢ÏÖ£¬Ð´Á˸ôúÂëµÄÇøÓò±³¾°ÊÇÂÌÉ«µÄ£¬Èç¹ûÓÃIE6ä¯ÀÀ£¬È´ÊÇÀ¶É«µÄ£¬ÕâÊÇÒòΪIE7ÄÜʶ±ð!important*£¬Ò»µ«Ê¶±ðÁË£¬¾ÍÖ´ÐУ¬ºöÂÔÁ˺óÃæµÄÄÇÒ»¾ä£¬µ«IE6È´²»ÄÜʶ±ð!important£¬ËùÒÔÇ°Ãæ²¿·ÖÌø¹ý£¬Ö±½ÓÖ´ÐÐÁ˺ó°ë²¿·Ý¡£
дÁ½¾ä´úÂëÀ´¿ØÖÆÒ»¸öÊôÐÔ£¬Çø±ðFirefoxÓëIE£º
background:orange; *background:green;
//ÕâÒ»¾ä´úÂëд³öÀ´Ê±£¬ÄãÓÃFirefoxä¯ÀÀ£¬»á·¢ÏÖ±³¾°ÊdzÈÉ«µÄ£¬¶øIEÀïÈ´ÊÇÂÌÉ«µÄ£¬ºÜ¼òµ¥£¬ÒòΪFirefox²»ÄÜʶ±ð*£¬¶øIE6£¬IE7¶¼¿ÉÒÔʶ*
дÈý¾ä´úÂëÀ´¿Ø ......