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

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


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

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



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


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


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














    

用 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;}

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）效果』