<!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 距离左边5px 20表示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>
//右右拉动还有问题;有待研究
分享到：
相关推荐
ArcGIS JavaScript API Google Maps Extension Reference ArcGIS API for JS的google地图扩展模块离线帮助文档 自己做的，希望对有需要的有所帮助
extension.js
谷歌浏览器插件axure_chrome_extension是专门为Axure用户设计的一个扩展，目的是增强Axure原型在Chrome浏览器中的预览体验。 这款插件的下载通常是为了方便设计师在浏览器环境中直接查看和测试他们的原型，而无需...
AutoCAD扩展工具Google Earth Extension，要求至少得安装AutoCAD 2007版.需要“Microsoft Visual C++ 2005 SP1 Redistributable Package （x86）”支持，安装后执行cuiload命令加载googleearth。cui。运行时要先打开...
在SVG和VML图形库的世界里，Raphael.js是一个非常受欢迎的JavaScript库，它使得在网页上创建和操作矢量图形变得极其简单。Raphael.js不仅支持多种浏览器，包括那些不支持HTML5 canvas的老旧浏览器，而且提供了一套...
扩展jquery.treegrid.extension.js，实现jquery-treegrid的懒加载，结合jquery.cookie.js来实现缓存，减缓页面大量数据加载
标题中的"Axure MAC 谷歌浏览器插件 - Axure RP Extension for Chrome for Mac"指的是专门为Mac用户设计的Axure RP扩展，它能够无缝地与谷歌浏览器结合，使得设计师在浏览网页时能够快速获取灵感并进行原型设计。...
An extension that allows local viewing of Axure RP prototypes from Google Chrome. Axure发布的html文件，能够直接打开，但是“说明”标签不显示，需要安装该插件。 1.安装Chrome浏览器； 2.将“axure-rp-...
js-metrics-extension自述文件这是扩展名“ js-metrics-extension”的自述文件。 写下简短描述后，我们建议包括以下各节。特征描述扩展程序的特定功能，包括扩展程序的屏幕截图。 图像路径是相对于此README文件的。 ...
概述：An extension that allows local viewing of Axure RP prototypes from Google Chrome. 描述： InstallthisextensiontoallowtheviewingofAxureRPPrototypesfromyourlocalharddriveinGoogleChrome. ...
该插件用于Google浏览器打开Axure文件所需的扩展插件，将该zip解压到/Users/admin/Library/Application Support/Google/Chrome/Default/Extensions文件夹下，如果没有Extensions则创建，然后浏览器打开扩展插件，...
1.打开chrome://extensions/ 2.把Axure-RP-Extension-for-Chrome_v0.6.3.crx插件拖入 3.点击“详情信息”找的“允许访问文件网址”打开 4.重启谷歌浏览器就可以使用了
标题中的“谷歌扩展程序之axure-chrome-extension.zip”指的是一个专门为谷歌浏览器（Chrome）设计的扩展程序，这个扩展程序的名称是“Axure Chrome Extension”。Axure是一款流行的产品原型设计工具，它允许设计师...
AXURE RP EXTENSION For Chrome是一款专为谷歌浏览器设计的扩展程序，它允许用户在浏览器上直接查看和预览AXURE RP原型。AXURE RP是一款强大的原型设计工具，广泛用于交互设计师和产品经理创建线框图、原型和规格...
Jenkins Email Extension Plugin是Jenkins自动化构建工具中的一个重要插件，它扩展了Jenkins的核心邮件通知功能，提供了更丰富的自定义选项和灵活性，使得开发者和持续集成团队能够更有效地进行沟通和协作。...
google-chrome-extension-api-class-model
【开发BREW拓展类(extension)】 BREW (Binary Runtime Environment for Wireless) 是高通公司推出的一种专为无线设备设计的运行环境。它提供了一种组件化的框架，将底层硬件和服务抽象化，使得开发者可以通过统一的...
为了解决这个问题，出现了“google_axure_chrome_extension_V0.6.3.zip”这样的插件，它能确保在Chrome中顺利查看Axure原型图。本文将详细介绍这款插件的安装步骤以及其在谷歌浏览器中的使用方法。 首先，我们来看...