首页 > 代码库 > 锚点的使用和总结

锚点的使用和总结

一个简单的锚点的例子

<!DOCTYPE html><html>  <head>      <meta charset="UTF-8">      <title>定位到具体位置</title>      <style type="text/css">       /*CSS reset*/       body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}       table{border-collapse:collapse;border-spacing:0;}       fieldset,img {border:0;}       address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}       ol,ul {list-style:none;}       capation,th{text-align:left;}       h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}       q:before, q:after{content:‘ ‘}       abbr,acronym{border:0;}       .positionDiv{width: 70%; margin: 0 auto; height: 400px; border: 1px solid #000;}       #div1{background-color: red;}       #div2{background-color: green;}       #div3{background-color: blue;}       #div4{background-color: yellow;}       #div5{background-color: orange;}       #content{width: 70%; margin-top: 20px; overflow: auto;}       #menu{ position:fixed; border: 1px solid #000; width: 15%; top:20px; right: 50px;}       #menu ul li{list-style: none; padding: 10px; text-align: center; border: 1px solid #000;}      </style>  </head>  <body>        <div id="menu">        <ul>            <li><a href="#div1">div1</a></li>            <li><a href="#div2">div2</a></li>            <li><a href="#div3">div3</a></li>            <li><a href="#div4">div4</a></li>            <li><a href="#div5">div5</a></li>        </ul>    </div>      <div id="content">          <div id="div1" class="positionDiv">                 <span>div1</span>              </div>        <div id="div2" class="positionDiv">                 <span>div2</span>              </div>          <div id="div3" class="positionDiv">                 <span>div3</span>              </div>          <div id="div4" class="positionDiv">                 <span>div4</span>              </div>          <div id="div5" class="positionDiv">                 <span>div5</span>              </div>      </div>        </body>  <script type="text/javascript">  </script></html>