zoukankan      html  css  js  c++  java
  • 利用锚点实现左边导航右边定位内容

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

  • 相关阅读:
    【NOI2015】品酒大会 SAM
    4566: [Haoi2016]找相同字符 SAM
    3709: [PA2014]Bohater 贪心
    1925: [Sdoi2010]地精部落 dp, 抖动子序列
    4205: 卡牌配对 最大流+建图技巧
    留言板
    self-introduction
    最近比赛
    STOI补番队胡策
    BZOJ 3503: [Cqoi2014]和谐矩阵( 高斯消元 )
  • 原文地址:https://www.cnblogs.com/shenyixin/p/3380688.html
Copyright © 2011-2022 走看看