用Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
更新時(shí)間:2009年09月09日 09:49:22 作者:
腳注(Footnote)是向用戶提供更多信息的一個(gè)最佳途徑,也是主體信息的一個(gè)有效補(bǔ)充,常見(jiàn)于各種印刷書(shū)籍中。
不過(guò),既然腳注有這些好處,我們當(dāng)然要在網(wǎng)頁(yè)中也加以利用,本文向您介紹了用 Javascript 和 CSS 實(shí)現(xiàn)腳注效果的方法。
<script type="text/javascript">
// 說(shuō)明:用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 腳注的 className
footNoteTagName : "span", // 腳注的標(biāo)簽名
footNoteBackLink : " [back]", // 返回鏈接
format : function(contentID, footnoteID)
{
if (!document.getElementById) return false;
var content = document.getElementById(contentID);
var footnote = document.getElementById(footnoteID);
var spans = content.getElementsByTagName(this.footNoteTagName);
var noteArr = [];
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i<len; i++)
{
note ++;
if (spans[i].className == this.footNoteClassName)
{
// 獲取腳注內(nèi)容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 創(chuàng)建一個(gè)指向腳注的鏈接
var newEle = document.createElement( "a" );
newEle.href = '#ftn_' + footnoteID + '_' + note;
newEle.title = "show footnote";
newEle.id = 'ftnlink_'+footnoteID+'_' + note;
newEle.innerHTML = note;
// 清空原有內(nèi)容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 創(chuàng)建注釋列表
var ul = this.__buildNoteList(noteArr, footnoteID);
footnote.appendChild(ul);
},
__buildNoteList : function(notes, noteID)
{
if(!notes || notes.length < 1) return;
var ul = document.createElement('ul');
ul.className = this.footNoteClassName;
var li;
var len = notes.length + 1;
for(i=1; i<len; i++)
{
li = document.createElement('li');
li.id = "ftn_"+noteID+"_"+i;
li.innerHTML = notes[i-1];
// 創(chuàng)建【返回】鏈接
var link = document.createElement("a");
link.href = "#ftnlink_" + noteID + "_" + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li );
}
return ul;
}
};
</script>
要實(shí)現(xiàn)腳注,我們需要下列元素:
<div id="article1">
CSS <span class="footnote">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。</span>
</div>
<div id="artnotes1" class="footnoteHolder"></div>
其中:
article1 是你需要腳注的文章主體
<span class="footnote"> .. </span> 是注釋內(nèi)容,標(biāo)簽 span 和 class 均可配置。
artnotes1 是顯示腳注的地方
按照默認(rèn)的設(shè)置調(diào)用方式:
<script type="text/javascript">
var footnote = new footNotes();
footnote.format('article1','artnotes1');
</script>
如果你想自定義一些內(nèi)容,可以用下面的方式:
<script type="text/javascript">
var footnote = new footNotes();
footnote.footNoteClassName = "footnote2";
footnote.footNoteTagName = "em";
footnote.footNoteBackLink = " [back «]";
footnote.format('article1','artnotes1');
</script>
測(cè)試代碼:將下面的代碼保存運(yùn)行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="注釋, css, Javascript, footnote, 腳注, " />
<meta name="description" content="腳注(Footnote)是向用戶提供更多信息的一個(gè)最佳途徑,也是主體信息的一個(gè)有效補(bǔ)充,常見(jiàn)于各種印刷書(shū)籍中。不過(guò),既然腳注有這些好處,我們當(dāng)然要在網(wǎng)頁(yè)中也加以利用,本文向您介紹了用 Javascript 和 CSS 實(shí)現(xiàn)腳注效果的方法。" />
<title>用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果 - 注釋, css, Javascript, footnote, 腳注, </title>
</head>
<body>
<div class="ad">
</div>
<br />
<div id="example">
<h3 id="example_title">用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果</h3>
<div id="example_main">
<!--************************************* 實(shí)例代碼開(kāi)始 *************************************-->
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
// 說(shuō)明:用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
// 作者:CodeBit.cn ( http://www.CodeBit.cn )
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 腳注的 className
footNoteTagName : "span", // 腳注的標(biāo)簽名
footNoteBackLink : " [back]", // 返回鏈接
format : function(contentID, footnoteID)
{
if (!document.getElementById) return false;
var content = document.getElementById(contentID);
var footnote = document.getElementById(footnoteID);
var spans = content.getElementsByTagName(this.footNoteTagName);
var noteArr = [];
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i<len; i++)
{
note ++;
if (spans[i].className == this.footNoteClassName)
{
// 獲取腳注內(nèi)容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 創(chuàng)建一個(gè)指向腳注的鏈接
var newEle = document.createElement( "a" );
newEle.href = '#ftn_' + footnoteID + '_' + note;
newEle.title = "show footnote";
newEle.id = 'ftnlink_'+footnoteID+'_' + note;
newEle.innerHTML = note;
// 清空原有內(nèi)容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 創(chuàng)建注釋列表
var ul = this.__buildNoteList(noteArr, footnoteID);
footnote.appendChild(ul);
},
__buildNoteList : function(notes, noteID)
{
if(!notes || notes.length < 1) return;
var ul = document.createElement('ul');
ul.className = this.footNoteClassName;
var li;
var len = notes.length + 1;
for(i=1; i<len; i++)
{
li = document.createElement('li');
li.id = "ftn_"+noteID+"_"+i;
li.innerHTML = notes[i-1];
// 創(chuàng)建【返回】鏈接
var link = document.createElement("a");
link.href = "#ftnlink_" + noteID + "_" + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li );
}
return ul;
}
};
</script>
<div id="wrapper">
<div id="content">
<div id="article1">
<h2>Article 1</h2>
<p>在編程的過(guò)程中,我們通常都會(huì)積累很多簡(jiǎn)單、有效并且可重用的小段代碼,一個(gè)簡(jiǎn)單的字符串處理函數(shù)<span class="footnote">函數(shù)是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</span>或者一個(gè)驗(yàn)證郵件地址的正則表達(dá)式<span class="footnote">正則表達(dá)式(Regular Expression)描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。</span>,又或者一個(gè)簡(jiǎn)單的文件上傳類,甚至一個(gè)效果不錯(cuò)的CSS<span class="footnote">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </span>導(dǎo)航樣式。這些小技巧為我們節(jié)省了不少時(shí)間,但是時(shí)間一長(zhǎng),代碼數(shù)量越來(lái)越多,尋找起來(lái)也耗費(fèi)了不少時(shí)間。因此,本站致力于收集整理一些類似的小知識(shí),并且努力提高文章搜索質(zhì)量,一來(lái)方便大家查閱,二來(lái)也算是支持一下開(kāi)源事業(yè)。
</p>
<p>本站收集的代碼和教程中,有從世界著名開(kāi)源軟件中摘取的函數(shù)、類<span class="footnote">類是對(duì)某個(gè)對(duì)象的定義。它包含有關(guān)對(duì)象動(dòng)作方式的信息,包括它的名稱、方法、屬性和事件。</span>,也有網(wǎng)友提交的原創(chuàng)或翻譯的精彩文章。本站的收錄代碼的標(biāo)準(zhǔn)是:簡(jiǎn)單、精彩、通用。
</p>
</div>
<div id="artnotes1" class="footnoteHolder"></div>
<div id="article2">
<h2>Article 2</h2>
<p>在編程的過(guò)程中,我們通常都會(huì)積累很多簡(jiǎn)單、有效并且可重用的小段代碼,一個(gè)簡(jiǎn)單的字符串處理函數(shù)<em class="footnote2">函數(shù)是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</em>或者一個(gè)驗(yàn)證郵件地址的正則表達(dá)式<em class="footnote2">正則表達(dá)式(Regular Expression)描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。</em>,又或者一個(gè)簡(jiǎn)單的文件上傳類,甚至一個(gè)效果不錯(cuò)的CSS<em class="footnote2">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </em>導(dǎo)航樣式。這些小技巧為我們節(jié)省了不少時(shí)間,但是時(shí)間一長(zhǎng),代碼數(shù)量越來(lái)越多,尋找起來(lái)也耗費(fèi)了不少時(shí)間。因此,本站致力于收集整理一些類似的小知識(shí),并且努力提高文章搜索質(zhì)量,一來(lái)方便大家查閱,二來(lái)也算是支持一下開(kāi)源事業(yè)。
</p>
<p>本站收集的代碼和教程中,有從世界著名開(kāi)源軟件中摘取的函數(shù)、類<em class="footnote2">類是對(duì)某個(gè)對(duì)象的定義。它包含有關(guān)對(duì)象動(dòng)作方式的信息,包括它的名稱、方法、屬性和事件。</em>,也有網(wǎng)友提交的原創(chuàng)或翻譯的精彩文章。本站的收錄代碼的標(biāo)準(zhǔn)是:簡(jiǎn)單、精彩、通用。
</p>
</div>
<div id="artnotes2" class="footnoteHolder"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var footnote = new footNotes();
footnote.format('article1','artnotes1');
var footnote2 = new footNotes();
footnote2.footNoteClassName = "footnote2";
footnote2.footNoteTagName = "em";
footnote2.footNoteBackLink = " [back «]";
footnote2.format('article2','artnotes2');
//]]>
</script>
</div>
<!--************************************* 實(shí)例代碼結(jié)束 *************************************-->
</div>
<div id="back"><a href="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回 『用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果』</a></div>
</div>
<br />
<div class="ad">
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<script type="text/javascript">
// 說(shuō)明:用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 腳注的 className
footNoteTagName : "span", // 腳注的標(biāo)簽名
footNoteBackLink : " [back]", // 返回鏈接
format : function(contentID, footnoteID)
{
if (!document.getElementById) return false;
var content = document.getElementById(contentID);
var footnote = document.getElementById(footnoteID);
var spans = content.getElementsByTagName(this.footNoteTagName);
var noteArr = [];
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i<len; i++)
{
note ++;
if (spans[i].className == this.footNoteClassName)
{
// 獲取腳注內(nèi)容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 創(chuàng)建一個(gè)指向腳注的鏈接
var newEle = document.createElement( "a" );
newEle.href = '#ftn_' + footnoteID + '_' + note;
newEle.title = "show footnote";
newEle.id = 'ftnlink_'+footnoteID+'_' + note;
newEle.innerHTML = note;
// 清空原有內(nèi)容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 創(chuàng)建注釋列表
var ul = this.__buildNoteList(noteArr, footnoteID);
footnote.appendChild(ul);
},
__buildNoteList : function(notes, noteID)
{
if(!notes || notes.length < 1) return;
var ul = document.createElement('ul');
ul.className = this.footNoteClassName;
var li;
var len = notes.length + 1;
for(i=1; i<len; i++)
{
li = document.createElement('li');
li.id = "ftn_"+noteID+"_"+i;
li.innerHTML = notes[i-1];
// 創(chuàng)建【返回】鏈接
var link = document.createElement("a");
link.href = "#ftnlink_" + noteID + "_" + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li );
}
return ul;
}
};
</script>
要實(shí)現(xiàn)腳注,我們需要下列元素:
復(fù)制代碼 代碼如下:
<div id="article1">
CSS <span class="footnote">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。</span>
</div>
<div id="artnotes1" class="footnoteHolder"></div>
其中:
article1 是你需要腳注的文章主體
<span class="footnote"> .. </span> 是注釋內(nèi)容,標(biāo)簽 span 和 class 均可配置。
artnotes1 是顯示腳注的地方
按照默認(rèn)的設(shè)置調(diào)用方式:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var footnote = new footNotes();
footnote.format('article1','artnotes1');
</script>
如果你想自定義一些內(nèi)容,可以用下面的方式:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var footnote = new footNotes();
footnote.footNoteClassName = "footnote2";
footnote.footNoteTagName = "em";
footnote.footNoteBackLink = " [back «]";
footnote.format('article1','artnotes1');
</script>
測(cè)試代碼:將下面的代碼保存運(yùn)行。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="注釋, css, Javascript, footnote, 腳注, " />
<meta name="description" content="腳注(Footnote)是向用戶提供更多信息的一個(gè)最佳途徑,也是主體信息的一個(gè)有效補(bǔ)充,常見(jiàn)于各種印刷書(shū)籍中。不過(guò),既然腳注有這些好處,我們當(dāng)然要在網(wǎng)頁(yè)中也加以利用,本文向您介紹了用 Javascript 和 CSS 實(shí)現(xiàn)腳注效果的方法。" />
<title>用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果 - 注釋, css, Javascript, footnote, 腳注, </title>
</head>
<body>
<div class="ad">
</div>
<br />
<div id="example">
<h3 id="example_title">用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果</h3>
<div id="example_main">
<!--************************************* 實(shí)例代碼開(kāi)始 *************************************-->
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
// 說(shuō)明:用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果
// 作者:CodeBit.cn ( http://www.CodeBit.cn )
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 腳注的 className
footNoteTagName : "span", // 腳注的標(biāo)簽名
footNoteBackLink : " [back]", // 返回鏈接
format : function(contentID, footnoteID)
{
if (!document.getElementById) return false;
var content = document.getElementById(contentID);
var footnote = document.getElementById(footnoteID);
var spans = content.getElementsByTagName(this.footNoteTagName);
var noteArr = [];
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i<len; i++)
{
note ++;
if (spans[i].className == this.footNoteClassName)
{
// 獲取腳注內(nèi)容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 創(chuàng)建一個(gè)指向腳注的鏈接
var newEle = document.createElement( "a" );
newEle.href = '#ftn_' + footnoteID + '_' + note;
newEle.title = "show footnote";
newEle.id = 'ftnlink_'+footnoteID+'_' + note;
newEle.innerHTML = note;
// 清空原有內(nèi)容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 創(chuàng)建注釋列表
var ul = this.__buildNoteList(noteArr, footnoteID);
footnote.appendChild(ul);
},
__buildNoteList : function(notes, noteID)
{
if(!notes || notes.length < 1) return;
var ul = document.createElement('ul');
ul.className = this.footNoteClassName;
var li;
var len = notes.length + 1;
for(i=1; i<len; i++)
{
li = document.createElement('li');
li.id = "ftn_"+noteID+"_"+i;
li.innerHTML = notes[i-1];
// 創(chuàng)建【返回】鏈接
var link = document.createElement("a");
link.href = "#ftnlink_" + noteID + "_" + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li );
}
return ul;
}
};
</script>
<div id="wrapper">
<div id="content">
<div id="article1">
<h2>Article 1</h2>
<p>在編程的過(guò)程中,我們通常都會(huì)積累很多簡(jiǎn)單、有效并且可重用的小段代碼,一個(gè)簡(jiǎn)單的字符串處理函數(shù)<span class="footnote">函數(shù)是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</span>或者一個(gè)驗(yàn)證郵件地址的正則表達(dá)式<span class="footnote">正則表達(dá)式(Regular Expression)描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。</span>,又或者一個(gè)簡(jiǎn)單的文件上傳類,甚至一個(gè)效果不錯(cuò)的CSS<span class="footnote">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </span>導(dǎo)航樣式。這些小技巧為我們節(jié)省了不少時(shí)間,但是時(shí)間一長(zhǎng),代碼數(shù)量越來(lái)越多,尋找起來(lái)也耗費(fèi)了不少時(shí)間。因此,本站致力于收集整理一些類似的小知識(shí),并且努力提高文章搜索質(zhì)量,一來(lái)方便大家查閱,二來(lái)也算是支持一下開(kāi)源事業(yè)。
</p>
<p>本站收集的代碼和教程中,有從世界著名開(kāi)源軟件中摘取的函數(shù)、類<span class="footnote">類是對(duì)某個(gè)對(duì)象的定義。它包含有關(guān)對(duì)象動(dòng)作方式的信息,包括它的名稱、方法、屬性和事件。</span>,也有網(wǎng)友提交的原創(chuàng)或翻譯的精彩文章。本站的收錄代碼的標(biāo)準(zhǔn)是:簡(jiǎn)單、精彩、通用。
</p>
</div>
<div id="artnotes1" class="footnoteHolder"></div>
<div id="article2">
<h2>Article 2</h2>
<p>在編程的過(guò)程中,我們通常都會(huì)積累很多簡(jiǎn)單、有效并且可重用的小段代碼,一個(gè)簡(jiǎn)單的字符串處理函數(shù)<em class="footnote2">函數(shù)是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</em>或者一個(gè)驗(yàn)證郵件地址的正則表達(dá)式<em class="footnote2">正則表達(dá)式(Regular Expression)描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。</em>,又或者一個(gè)簡(jiǎn)單的文件上傳類,甚至一個(gè)效果不錯(cuò)的CSS<em class="footnote2">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </em>導(dǎo)航樣式。這些小技巧為我們節(jié)省了不少時(shí)間,但是時(shí)間一長(zhǎng),代碼數(shù)量越來(lái)越多,尋找起來(lái)也耗費(fèi)了不少時(shí)間。因此,本站致力于收集整理一些類似的小知識(shí),并且努力提高文章搜索質(zhì)量,一來(lái)方便大家查閱,二來(lái)也算是支持一下開(kāi)源事業(yè)。
</p>
<p>本站收集的代碼和教程中,有從世界著名開(kāi)源軟件中摘取的函數(shù)、類<em class="footnote2">類是對(duì)某個(gè)對(duì)象的定義。它包含有關(guān)對(duì)象動(dòng)作方式的信息,包括它的名稱、方法、屬性和事件。</em>,也有網(wǎng)友提交的原創(chuàng)或翻譯的精彩文章。本站的收錄代碼的標(biāo)準(zhǔn)是:簡(jiǎn)單、精彩、通用。
</p>
</div>
<div id="artnotes2" class="footnoteHolder"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var footnote = new footNotes();
footnote.format('article1','artnotes1');
var footnote2 = new footNotes();
footnote2.footNoteClassName = "footnote2";
footnote2.footNoteTagName = "em";
footnote2.footNoteBackLink = " [back «]";
footnote2.format('article2','artnotes2');
//]]>
</script>
</div>
<!--************************************* 實(shí)例代碼結(jié)束 *************************************-->
</div>
<div id="back"><a href="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回 『用 Javascript 和 CSS 實(shí)現(xiàn)腳注(Footnote)效果』</a></div>
</div>
<br />
<div class="ad">
</div>
</body>
</html>
相關(guān)文章
js中文逗號(hào)轉(zhuǎn)英文實(shí)現(xiàn)
中文逗號(hào)如何轉(zhuǎn)英文,下面為大家詳細(xì)介紹下,感興趣的朋友不要錯(cuò)過(guò)2014-02-02JavaScript中對(duì)象的不同創(chuàng)建方法
js對(duì)象與一般的面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言有所不同的。js中的對(duì)象是基本原型的。下面給大家介紹js中對(duì)象的不同創(chuàng)建方法,非常不錯(cuò),感興趣的朋友一起學(xué)習(xí)吧2016-08-08js每隔5分鐘執(zhí)行一次ajax請(qǐng)求的實(shí)現(xiàn)方法
每隔5分鐘執(zhí)行一次ajax請(qǐng)求,如何實(shí)現(xiàn)?下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11javascript textContent與innerText的異同分析
因?yàn)榘l(fā)現(xiàn)網(wǎng)絡(luò)上很少有這方面的內(nèi)容,因此就把自己私有blog上的這篇文章搬出來(lái)到Boluor的公開(kāi)blog,方便其它人查閱。2010-10-10javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式匯總
任何一種編程語(yǔ)言的簡(jiǎn)寫(xiě)小技巧都是為了幫助你寫(xiě)出更簡(jiǎn)潔、更完善的代碼,讓你用更少的編碼實(shí)現(xiàn)你的需求,這篇文章主要給大家介紹了關(guān)于javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式,需要的朋友可以參考下2021-08-08jQuery實(shí)現(xiàn)仿百度首頁(yè)滑動(dòng)伸縮展開(kāi)的添加服務(wù)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度首頁(yè)滑動(dòng)伸縮展開(kāi)的添加服務(wù)效果代碼,通過(guò)jQuery相應(yīng)鼠標(biāo)事件控制頁(yè)面元素的動(dòng)態(tài)變換功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09JavaScript中的迭代器和可迭代對(duì)象與生成器
這篇文章主要介紹了JavaScript中的迭代器和可迭代對(duì)象與生成器,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09