zoukankan      html  css  js  c++  java
  • a标签作为锚点实例

    在浏览一些网页的时候大都在网页的上方有一个固定住的导航条,上边会列出下方显示内容的版块分区。当点击导航条中的一个版块的时候他会自动的跳转到指定的版块,这是页面内部的区域跳转。上实例:

    <!--为了简化代码方便阅读,div版块设置为宽度高度各为300px的不同颜色的版块-->
    <p id="part1">第1章</p>
    <div class="part"></div>
    <p id="part2">第2章</p>
    <div class="part"></div>
    <p id="part3">第3章</p>
    <div class="part"></div>
    <p id="part4">第4章</p>
    <div class="part"></div>
    <p id="part5">第5章</p>
    <div class="part"></div>
    <p id="part6">第6章</p>
    <div class="part"></div>

    <!--设置的锚点链接设置行内样式将导航条定位到右上角-->
    <div style="position: fixed;top:20px;right: 20px">
    <a href="#part1">第1章</a>
    <a href="#part2">第2章</a>
    <a href="#part3">第3章</a>
    <a href="#part4">第4章</a>
    <a href="#part5">第5章</a>
    <a href="#part6">第6章</a>
    </div>

    分析: 此时点击 导航条的各个区域就会跳转到页面指定的区域。
    使用锚点链接的几个重点是:
    1:在链接的目的区域设置id属性,并设置上唯一的一个id名称。
    2:在导航条区域设置a标签,注意href属性的属性值是要链接区域的id值,并且一定要记住带“#”号。

  • 相关阅读:
    贰、js的基础(二)类型转换
    贰、js的基础(一)
    ajax的异步请求小结
    壹、js的概述
    sass的用法小结(四)进阶篇
    sass的用法小结(三)
    sass的用法小结(二)
    sass的用法小结(一)
    H5页面在线制作工具搜集
    H5教程:移动页面性能优化
  • 原文地址:https://www.cnblogs.com/Rooney10/p/13069966.html
Copyright © 2011-2022 走看看