首页 前沿速递 服务器教程 网页设计教程 网络编辑教程
移动端
AI智能体脚本 智能办公脚本 自动化游戏脚本 浏览器自动化脚本 服务器脚本
当前位置：首页 > 网页设计教程 > CSS教程 > Js和CSS实现脚注(Footnote)效果

Js和CSS实现脚注(Footnote)效果

作者：互联网

2009-06-12

CSS教程
       脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。
Javascript: 
    

  1.  
    2. 

  2.  
    3. 

  3.  
    4.
要实现脚注，我们需要下列元素：
HTML: 
    

  1.  
    2. 

  2. 
 id="article1"> 
    3. 

  3.  
    4. 

  4. CSS  class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 
    5. 

  5.  
    6. 

  6.
  • id="artnotes1" class="footnoteHolder">
  •  
    • 其中：
    article1 是你需要脚注的文章主体
     ..  是注释内容，标签 span 和 class 均可配置。
    artnotes1 是显示脚注的地方

    按照默认的设置调用方式：
    Javascript: 
      

    1.  
      2. 

    2.  
      3. 

    3.  
      

      4. 

    4. 


      如果你想自定义一些内容，可以用下面的方式：
      Javascript: 
      5. 

      

    1.  
      2. 

      3.

    相关标签:

    css
    上一篇：select用CSS控制边框及其他属性 下一篇：CSS滤镜 详解

    相关推荐

    WebSocket 连接池生产级实现：实时行情高可用与负载均衡 工程上的实践是寻找一个能跨市场的统一网关。本文测试环境选用了 TickDB，它通过单一 WebSocket 连接即可订阅多市场标的，心跳协议标准化为每 1 秒 ping，你无需为不同市场的连接。

    2026-04-18

    立即查看
    使用 Python 合并与拆分 Excel 单元格的实用方法 合并单元格可以将多个相邻单元格组合成一个更大的单元格，常用于创建表头、突出显示重要信息或改善表格布局。本文将介绍如何使用 Python 编程方式实现 Excel 单元格的合并与拆分操作。

    2026-04-18

    立即查看
    5.响应式系统比对：手写 React 响应式状态库 Mobx 文通过相对比较简洁的代码实现了 Mobx 的核心原理，同时对比了同时响应式的 Vue 和 Mobx 的最大设计区别，在 Vue 中创建的响应式数据，是可以随意在任何地方通过普通属性访问器进行修改的，但

    2026-04-18

    立即查看
    踩坑分享：Vite Plus 最佳实践 写在前面 掘金的同学们大家好呀，作者是 Varlet UI 的作者。掘金文章已经一年没更新了，去年跳槽到了一家创业公司负责前端架构工作，写文章这件事就一直搁置了。最近稍微缓过来了一点点（其实还是压力很

    2026-04-18

    立即查看

    专题

    #数据可视化
    数据可视化（Data Visu

    + 收藏

    #自然语言处理
    自然语言处理（Natural

    + 收藏

    #Excel公式
    Excel公式就是：用函数 +

    + 收藏

    #Excel技巧
    Excel是日常生活中必不可

    + 收藏

    #蛋仔派对
    蛋仔派对最新官方活动、关卡速

    + 收藏

    #人工智能
    人工智能（AI），简单说，就

    + 收藏

    最新数据

    百度空间详细CSS代码详解 空间名称和简介区域 #head
    常用按钮、文本框、表单等CSS样式13例
    用DIV+CSS设计出圆角矩形的代码
    CSS强制TD不换行
    解决IE6不能正常解析CSS文件的方法及原因
    CSS实现鼠标滑过表格变色
    DIV+CSS必须考虑的浏览器兼容的技巧
    如何查看CSS代码
    9个精简优化CSS文件的技巧
    让IE浏览器即时刷新CSS样式

    相关文章

    详解如何使用CSS选择所有子元素

    03/30

    Css3实现无缝滚动防抖

    03/30

    css3实例教程 一款纯css3实现的环形导航菜单

    01/21

    div+css让div内部元素如单选按钮均匀分布

    01/21

    DIV+CSS垂直居中一个浮动元素

    01/21

    css – 使用mixin参数在LESS中创建类名

    01/19

    css – 物化设计汉堡包图标不显示

    01/19

    不能跳过将CSS规则添加到第一个li元素使用not(first)

    01/19

    latex – 在SageMath中以相反顺序显示多项式

    01/19

    css – 如何组合多个选择？

    01/19

    AI精选

    更多

    电影哥特式火水社论

    本能 电影剧照
    精选

    夜桥上的电影三联画肖像
    精选

    黄金时段海岸生活方式照片
    精选

    高速摄影：亚洲汤品爆裂瞬间
    精选

    玻璃马雕像变形动画（视频提示）
    精选

    秋叶超现实主义鹿
    精选

    90 年代复古闪光摄影肖像
    精选

    Sydney Sweeney《蜘蛛夫人》首映礼礼服描述
    精选

    女性在床上听音乐的私密生活照

    脚本推荐

    SeeDance 2.0 Video Creator专区

    OpenClaw AI专区

    cowork专区

    claude code skills专区