简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

用Javascript 和 CSS 实现脚注（Footnote）效果_javascript技巧

WBOY
Release： 2016-05-16 18:46:54
Original
1974 people have browsed it

不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。

复制代码 代码如下:



要实现脚注，我们需要下列元素：
复制代码 代码如下:


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



其中：
article1 是你需要脚注的文章主体
.. 是注释内容，标签 span 和 class 均可配置。
artnotes1 是显示脚注的地方
按照默认的设置调用方式：
复制代码 代码如下:



如果你想自定义一些内容，可以用下面的方式：
复制代码 代码如下:



测试代码：将下面的代码保存运行。
复制代码 代码如下:





Related labels：
css javascript
source：php.cn
Previous article：javascript 函数介绍_基础知识 Next article：javascript 基础简介 适合新手学习_基础知识
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Stream data from OpenAI's API using AJAX, PHP, and server-sent events How can I use Server Sent Events (SSE) to stream data from the above API to a browser clie...
From 2023-11-11 12:03:23
0
1
497
Uncaught TypeError: Cannot set property of undefined (set 'innerHTML') I'm trying to create a webpage using php, on an element of class "Continuous TextBox&...
From 2023-11-08 21:06:09
0
1
278
How to get the RGB value of CSS/HTML named color in JavaScript I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...
From 2023-11-06 09:05:50
0
2
210
Why do so many JavaScript scripts append random numbers to things? collision? I've been learning JavaScript lately and have seen many examples of using Math.rand() to a...
From 2023-11-04 20:00:04
0
2
296
Identify performance limitations in JavaScript I'm trying to find the bottleneck in my Javascript. Basically I'm developing a chrome exte...
From 2023-10-31 20:47:17
0
1
229
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！