快捷導(dǎo)航

javascript布局查看器效果代碼

更新時(shí)間：2008年10月05日 13:50:08 作者：

用js直接區(qū)分網(wǎng)頁(yè)布局代碼，大家可以看下他的原理

<html> <head> <style> body{     margin:0 auto;     width:950px;     font-size:12px;     text-align:center; } #wholebody{     width:950px; } .newline{/*僅應(yīng)用于右側(cè)*/     clear:both;     width:700px; }     #top{         height:auto;     }     .left_square{     }     .right_square{     }     #topic{         height:100px;     }     #left{         float:left;         width:250px;     }         #left_qq{             height:80px;         }         #left_inquire{             height:220px;         }         #left_master_page{             height:200px;         }         #left_online{             height:220px;         }         #left_keyword{             height:140px;         }         #left_aboutus{             height:200px;         }     #right{         float:left;         width:700px;     }         #right_flash{             width:700px;             height:300px;             float:left;         }         #right_chara{             width:350px;             float:left;             height:200px;         }         #right_master_answer{             width:350px;             float:left;             height:200px;         }         #right_knowledge{             clear:both         }             .knowledge{                 float:left;                 width:140px;                 height:360px;             }         #right_research{             float:left;             width:50%;             height:200px;         }         #right_recommend{             float:left;             width:50%;             height:200px;         } </style> </head> <body> <div   class="wppm3vysvbp"   id="wholebody">     <div   class="wppm3vysvbp"   id="top"></div> <div   class="wppm3vysvbp"   id="topic"></div>     <div   class="wppm3vysvbp"   id="left">     <div   class="wppm3vysvbp"   id="left_qq"></div> <div   class="wppm3vysvbp"   id="left_inquire"></div> <div   class="wppm3vysvbp"   id="left_master_page"></div> <div   class="wppm3vysvbp"   id="left_online"></div> <div   class="wppm3vysvbp"   id="left_keyword"></div> <div   class="wppm3vysvbp"   id="left_aboutus"></div> </div> <div   class="wppm3vysvbp"   id="right">     <div   class="wppm3vysvbp"   id="right_flash"></div> <div   id="wppm3vysvbp"   class="newline">     <div   class="wppm3vysvbp"   id="right_chara"></div> <div   class="wppm3vysvbp"   id="right_master_answer"></div> </div> <div   class="wppm3vysvbp"   id="right_knowledge">     <div   id="wppm3vysvbp"   class="knowledge"></div> <div   id="wppm3vysvbp"   class="knowledge"></div> <div   id="wppm3vysvbp"   class="knowledge"></div> <div   id="wppm3vysvbp"   class="knowledge"></div> <div   id="wppm3vysvbp"   class="knowledge"></div> </div> <div   id="wppm3vysvbp"   class="newline">     <div   class="wppm3vysvbp"   id="right_research">res</div> <div   class="wppm3vysvbp"   id="right_recommend">rec</div> </div> </div> </div> </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]