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值,并且一定要记住带“#”号。

  • 相关阅读:
    消息中间件三、RabbitMQ学习一
    消息队列学习一 概念
    发送网络请求调用第三方接口(spring boot框架)
    动态生成javaBean
    达梦dm数据库远程备份与恢复
    springboot定时任务的使用
    抽象与接口
    电商网站后台九大功能模块详解
    面向对象设计—类和对象
    常用的数据结构—数组
  • 原文地址:https://www.cnblogs.com/Rooney10/p/13069966.html
Copyright © 2011-2022 走看看