js 模仿google extension网站
?
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript">$(function(){// $("div_left1").css("top",0);// $("div_left1").css("left",$("#div_left").position().left+$("#div_left").width());$("#div_right").width($(document).width()-442);//442表示div_left:300+docuemnt.padding的宽度+div_left.padding的宽度$("#div_center").width($(document).width()-442);$("#div_right").css("left",$("#div_left").width()+50+5+20);//50表示body.padding 距离左边5px20表示div_left.padding $("#div_center").css("left",$("#div_left").width()+50+5+20);$("#div_center").css("top",$("#div_right").height()+2);$(window).bind('resize',function(){$("#div_right").width($(document).width()-442);//442表示div_left:300+docuemnt.padding的宽度+div_left.padding的宽度$("#div_center").width($(document).width()-442);$("#div_right").css("left",$("#div_left").width()+50+5+20);//50表示padding 距离左边5px$("#div_center").css("left",$("#div_left").width()+50+5+20);$("#div_center").css("top",$("#div_right").height()+2);});});</script></head><body style="margin:0px;padding:0px 50px 0px 50px;text-align:center"><div id="div_left" style="border:1px solid #99bbe8;background-color:#ececec;width:300px;height:100%;float:left;margin:0px;position: fixed; top:0px;padding:10px 10px 10px 10px;z-index:1000"><div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第一商店</div><div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第二商店</div><div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第三商店</div><div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第四商店</div><div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第五商店</div><div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第六商店</div></div><div id="div_right" style="border:1px solid #99bbe8;height:100px;position: fixed; top:0px;margin-right:50px;background-color:#99bbe8;z-index:100;"></div><div id="div_center" style="border:1px solid #ff0000;height:2000px;position:absolute;;background-color:#ececec;"><div style="width:100%;height:1000px;"><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div><div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div></div></div></body></html>//右右拉动还有问题;有待研究
?