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

不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。复制代码 代码如下: 要实现脚注，我们需要下列元素： 复制代码 代码如下: CSS CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 其中： article1 是你需要脚注的文章主体 .. 是注释内容，标签 span 和 class 均可配置。 artnotes1 是显示脚注的地方 按照默认的设置调用方式： 复制代码 代码如下: 如果你想自定义一些内容，可以用下面的方式： 复制代码 代码如下: 测试代码：将下面的代码保存运行。复制代码 代码如下: 用 Javascript 和 CSS 实现脚注（Footnote）效果 - 注释, css, Javascript, footnote, 脚注, 用 Javascript 和 CSS 实现脚注（Footnote）效果 a { font-weight: bold; text-decoration: none; color: #f30; } a:hover { color: #FFA200; } #wrapper { width: 500px; margin: 0 auto; text-align: left; } #wrapper p {line-height:200%;font-size:14px;} /* ================================================ styling for footnotes begins here ================================================ */ div.footnoteHolder { border-left: 1px solid #ccc; margin: 20px 0 50px 20px; padding: 20px 10px; font-size: 12px; line-height: 150%; } span.footnote { vertical-align: super; font-size: 10px; } ul.footnote, ul.footnote li { margin:0; padding:0; } ul.footnote li { list-style-type:decimal; margin:3px 0 3px 20px; color:#777; } em.footnote2 { vertical-align: super; font-size:10px; } ul.footnote2, ul.footnote2 li { margin:0; padding:0; } ul.footnote2 li { list-style-type:decimal; margin:3px 0 3px 20px; color:#678BB2; } Article 1 在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。或者一个验证邮件地址的正则表达式正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。，又或者一个简单的文件上传类，甚至一个效果不错的CSSCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。 本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。 Article 2 在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。或者一个验证邮件地址的正则表达式正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。，又或者一个简单的文件上传类，甚至一个效果不错的CSSCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。 本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。 返回 『用 Javascript 和 CSS 实现脚注（Footnote）效果』