http://douban.fm/}}
认证高级PHP讲师
说实话，你这样的问法着实令人无法回答，是否可以问的细致一些？因为你抛出这样一个问题，给人的意思是 所有你都不懂，包括 html,css,js 等，那么这是否意味着回答的人要一步步教你所有这些？我想这很不现实。
所以，在这里我只能提供一种思路给你： 你可以借助现成的 jquery 插件 PageSlide 进行开发实现你想要的效果。
（希望我的回答对你有所帮助。）
这问题都问成负的了... 可以用Firefox的firebug 或者 Chrome、ie>=7 的开发者工具查看下这页面标签结构，以及css属性。尝试点击左列、上下拖动右滚动条看css属性变化。
你所问的侧栏滑出其实挺简单。使用CSS绝对定位与借助Jquery的动画效果就可以很快速的完成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>test</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type = "text/css"> body{ background: #9acd32; padding: 100px;} #side{ position: absolute; top: 0; left: 0; width: 20px; height: 100%; overflow: hidden; } #side_content{ position: absolute; right: 0; top: 0; height: 100%; overflow: hidden; width: 500px; background: #ffe4c4; } #side_ctrl{ position: absolute; right: 0; top: 0; height: 100%; width: 20px; background: #a52a2a; } .open #side_ctrl{background: green;} </style> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#side_ctrl").click(function(){ if($("#side").hasClass("open")){ $("#side").animate({width:"20px"}).removeClass("open"); }else{ $("#side").animate({width:"500px"}).addClass("open"); } }); }); </script> </head> <body> <span>http://sfau.lt/bNGBV</span> <p id="side"> <p id="side_content"></p> <p id="side_ctrl"></p> </p> </body> </html>
当然了我也不是做前端的，写的很基础。仅在Chrome测试了下。
http://www.w3school.com.cn/css/css_po...http://api.jquery.com/animate
另外问问题也要有技巧和诚意。最基本要表明自己做到了什么程度，告知大家你所遇到的难点。你就一张图难免让别人认为你什么都没做、没想，只是等着拿。
我相信你换个方式问，不会0回复的。
这是在父标签(a)设置高度与overflow:hidden来隐藏子标签(b)里面多出的部分;然后通过鼠标中键(c)滚动来控制右边的scollbar(d)，来根据d的定位改变b的scrollTop;通过的是jquery里面的scrollTop()，很方便实现此效果。 对于左右两边定位，仅仅是position的应用，通过animate()来改变宽度。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
说实话，你这样的问法着实令人无法回答，是否可以问的细致一些？因为你抛出这样一个问题，给人的意思是 所有你都不懂，包括 html,css,js 等，那么这是否意味着回答的人要一步步教你所有这些？我想这很不现实。
所以，在这里我只能提供一种思路给你：
你可以借助现成的 jquery 插件 PageSlide 进行开发实现你想要的效果。
（希望我的回答对你有所帮助。）
这问题都问成负的了...
可以用Firefox的firebug 或者 Chrome、ie>=7 的开发者工具查看下这页面标签结构，以及css属性。尝试点击左列、上下拖动右滚动条看css属性变化。
你所问的侧栏滑出其实挺简单。使用CSS绝对定位与借助Jquery的动画效果就可以很快速的完成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>test</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type = "text/css"> body{ background: #9acd32; padding: 100px;} #side{ position: absolute; top: 0; left: 0; width: 20px; height: 100%; overflow: hidden; } #side_content{ position: absolute; right: 0; top: 0; height: 100%; overflow: hidden; width: 500px; background: #ffe4c4; } #side_ctrl{ position: absolute; right: 0; top: 0; height: 100%; width: 20px; background: #a52a2a; } .open #side_ctrl{background: green;} </style> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#side_ctrl").click(function(){ if($("#side").hasClass("open")){ $("#side").animate({width:"20px"}).removeClass("open"); }else{ $("#side").animate({width:"500px"}).addClass("open"); } }); }); </script> </head> <body> <span>http://sfau.lt/bNGBV</span> <p id="side"> <p id="side_content"></p> <p id="side_ctrl"></p> </p> </body> </html>当然了我也不是做前端的，写的很基础。仅在Chrome测试了下。
http://www.w3school.com.cn/css/css_po...
http://api.jquery.com/animate
另外问问题也要有技巧和诚意。最基本要表明自己做到了什么程度，告知大家你所遇到的难点。你就一张图难免让别人认为你什么都没做、没想，只是等着拿。
我相信你换个方式问，不会0回复的。
这是在父标签(a)设置高度与overflow:hidden来隐藏子标签(b)里面多出的部分;然后通过鼠标中键(c)滚动来控制右边的scollbar(d)，来根据d的定位改变b的scrollTop;通过的是jquery里面的scrollTop()，很方便实现此效果。
对于左右两边定位，仅仅是position的应用，通过animate()来改变宽度。