利用锚点实现左边导航右边定位内容

<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>

原文地址:https://www.cnblogs.com/shenyixin/p/3380688.html