利用锚点实现左边导航右边定位内容
2013-10-21 15:37
483 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../css/layout.css" /> <title> </title> <style> .div_left { background-color: #e4e4e4; width: 202px; text-align:left; margin-right:auto; margin-top:auto; float:left; height:560; } .div_rigth { background-color: #F7F7F7; margin-left:auto; margin-top:auto; margin-bottom:auto; width:770px; height:560; overflow-y:auto; overflow-x:auto; text-align: left; } </style> </head> <body> <div style="margin: 15px 5px 15px 5px; float:left;" text-align="left"> <div class="div_left"> <ul><br/> <li><h1><a id="gotop" href="#divTop1">前边</a></h1></li> <li><h1><a id="gotop" href="#divTop2">简介</a></h1></li> <li><h1><a id="gotop" href="#divTop3">中间</a></h1></li> <li><h1><a id="gotop" href="#divTop4">后边</a></h1></li> </ul> </div> <!-- 代码开始 --> <div class="div_rigth"> <a name="divTop1"></a> <div style="height:900px; background:#999999"> </div> <a name="divTop2"></a> <div style="height:900px; background:#444444"> </div> <a name="divTop3"></a> <div style="height:900px; background:#555555"> </div> <a name="divTop4"></a> <div style="height:900px; background:#666666"> </div> </div> </div> </body> </html>
相关文章推荐
- 利用绝对定位实现两列右边固定宽度左边自适应布局
- 用frameset实现左边导航,右边显示相应内容的布局
- 用Iframe实现左边TreeView导航,右边显示相应内容的布局
- 实现拉动右边内容栏左边菜单栏动态变化
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- 原生js模拟锚点,实现点击后,内容定位到本页的对应位置
- 左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
- html静态实现左边导航右边显示链接页面
- 利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari
- html利用锚点实现定位代码实例
- 如何实现网页点击左边的导航右边显示对应的页面?
- 实现点击左边菜单,然后右边弹出网页内容
- 用jq实现点击右边内容实现,左边内容切换、自动切换,当鼠标放上右边li上面,左边内容停止切换。
- 在Linux vim编辑器中实现左边目录,右边内容布局的方法。
- DIV实现左边表头固定、右边内容滚动的效果代码
- 导航定位(利用锚点和jquery定位)
- 如何实现网页鼠标浏览左边的导航右边显示对应的页面
- JS左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
- ztree实现左边动态生成树右边为内容详情功能
- 页面刷新之后显示当前页面的方法(左边导航,右边内容)