css http://krijnhoetmer.nl/stuff/javascript/footnotes/
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css http://krijnhoetmer.nl/stuff/javascript/footnotes/相关的知识，希望对你有一定的参考价值。
var DOMsupport = document.getElementsByTagName && document.createElement;
window.onload = function() {
if (!DOMsupport) return;
var footNoteHolder = document.getElementById('footnotes');
var allNotes = footNoteHolder.getElementsByTagName('small');
var notesList = document.createElement('ol');
notesList.className = 'notesList';
for (var i = 0; i < allNotes.length; i++) {
var newA = document.createElement('a');
newA.id = 'text-' + (i + 1);
newA.setAttribute('href', '#footnote-' + (i + 1));
newA.setAttribute('title', 'Jump to footnote');
newA.appendChild(document.createTextNode('[' + (i + 1) + ']'));
newBackLink = document.createElement('a');
newBackLink.id = 'footnote-' + (i + 1);
newBackLink.setAttribute('href', '#text-' + (i + 1));
newBackLink.setAttribute('title', 'Back to text');
newBackLink.appendChild(document.createTextNode('[ ↑ ]'));
newNote = document.createElement('li');
newNote.appendChild(document.createTextNode(allNotes[i].firstChild.nodeValue + ' '));
newNote.appendChild(newBackLink);
notesList.appendChild(newNote);
allNotes[i].replaceChild(newA, allNotes[i].firstChild);
}
footNoteHolder.appendChild(document.createElement('hr'));
footNoteHolder.appendChild(notesList);
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JavaScript: footnotes</title>
<meta name="Author" content="Krijn Hoetmer ~ http://ktk.xs4all.nl/">
<link charset="utf-8" href="js-footnotes.css" media="screen,print" rel="stylesheet" type="text/css">
<script charset="utf-8" src="js-footnotes.js" type="text/javascript"></script>
</head>
<body id="footnotes">
<h1>A simple footnote script</h1>
<h2>External links with some information.</h2>
<ul>
<li><a href="http://blog.fawny.org/2005/07/24/footnote/">There’s no such thing as a footnote</a> & <a href="http://blog.fawny.org/2005/08/02/footnote/">Footnotes are like unicorns</a></li>
<li><a href="http://www.clagnut.com/blog/1528/">Gruber’s footnotes</a></li>
<li><a href="http://daringfireball.net/2005/07/footnotes">About the footnotes</a></li>
<li><a href="http://www.quirksmode.org/blog/archives/2005/07/footnotes_on_th.html">Footnotes on the Web</a></li>
<li><a href="http://web-graphics.com/mtarchive/001626.php">Footnotes and sidenotes with JavaScript and CSS</a></li>
<li><a href="http://www.brandspankingnew.net/archive/2005/07/format_footnote.html">Format Footnotes with Javascript & CSS</a></li>
<li><a href="http://hartshorne.ca/2005/07/27/footnotes_v_sidenotes/">Footnotes v Sidenotes</a></li>
</ul>
<h2>My version. Source for details. And <a href="/stuff/css/sidenotes/">sidenotes</a> are perhaps handier on the web :-). More later.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque fringilla nisl ac mi. Aenean egestas gravida magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sit amet lacus. <small>Depends on how you look at it of course.</small> Fusce nulla. Phasellus ligula leo, dictum et, molestie molestie, consectetuer et, lacus. Aenean tincidunt, pede non pharetra bibendum, turpis lacus venenatis est, nec lobortis augue felis quis eros. Donec elementum tempus turpis. Etiam diam velit, elementum et, mattis ac, eleifend et, turpis. Praesent malesuada augue id nunc. Suspendisse eget felis. Aliquam nec magna. Aliquam ac nibh eu eros cursus tristique. Proin suscipit sagittis lorem. In tempor purus ut eros.</p>
<p>Fusce lectus. Proin adipiscing elementum ante. Phasellus consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus pede nec pede. Ut sodales. Praesent sagittis. Aliquam dui magna, lobortis eu, adipiscing sed, sollicitudin eget, justo. Integer faucibus, libero et blandit luctus, libero nibh ultrices lectus, nec mollis mi mi sed quam. Mauris rhoncus ultrices enim. Aliquam ipsum quam, tempus sed, dapibus in, consequat et, orci.</p>
<p>Duis urna velit, dapibus id, semper eget, posuere non, justo. Nunc ipsum. Praesent lobortis. Nulla aliquet. Donec bibendum pellentesque tellus. Phasellus urna neque, elementum at, condimentum eget, auctor ut, quam. <small>That's probably just not true.</small> Phasellus dapibus interdum nunc. Duis a odio. In ut leo. In vel nisl. Donec leo. Mauris in leo. Integer gravida. Donec pretium nonummy pede. Proin in purus bibendum justo congue ultrices.</p>
<p>Donec sit amet leo interdum nisl scelerisque euismod. Pellentesque adipiscing bibendum ligula. Nam at nibh. In tempus mi eu urna. Duis faucibus semper ipsum. Nulla malesuada adipiscing metus. Ut eu pede. Integer vitae tellus. Nulla nec lorem eget purus auctor aliquam. Etiam lobortis. Donec sit amet purus. Aenean dui purus, viverra ut, lobortis eu, consequat sit amet, orci. Sed posuere felis vitae odio. <small>Which is obvious.</small> Quisque augue. Integer at nunc. Duis turpis ante, congue viverra, scelerisque sit amet, ornare ut, mauris. Phasellus gravida ullamcorper odio. Nunc tellus. Sed ligula erat, venenatis at, fringilla ut, mattis mollis, lorem.</p>
<p>Etiam ultricies. Etiam at nisl id ante auctor pretium. Proin vel erat a arcu luctus ultricies. Integer dignissim. Sed nonummy malesuada sapien. Quisque commodo ante at nisl. Sed accumsan enim non metus. Proin dignissim, leo ultrices rutrum laoreet, justo turpis interdum metus, nec elementum ligula nulla porta turpis. Maecenas mauris lorem, consectetuer sed, aliquam non, laoreet a, felis. Morbi egestas. Suspendisse at pede. Nullam at urna posuere est vulputate suscipit. Ut eu tellus. Donec bibendum turpis ac mi. <small>Not always.</small> Suspendisse imperdiet condimentum ante.</p>
<p>Fusce erat mi, rhoncus eget, dignissim a, consequat vitae, ligula. <small>No.</small> In pellentesque mauris id augue. <small>Sure, that's what they all say.</small> Vestibulum mi massa, accumsan eget, semper non, viverra at, risus. Mauris vulputate, tellus imperdiet malesuada vulputate, justo wisi posuere neque, quis luctus augue ligula ac lectus. Fusce egestas. Proin dui diam, commodo eu, gravida vel, condimentum non, dui. Morbi varius, eros eget dictum placerat, neque neque suscipit quam, eu rhoncus odio nunc blandit augue. Maecenas ac justo. Proin semper malesuada risus. Aenean felis.</p>
<p>Morbi mattis accumsan neque. Maecenas tempus gravida leo. Nullam vitae est porta nibh fringilla porttitor. Praesent luctus. Duis quis purus vitae velit vehicula sollicitudin. Etiam ornare tortor hendrerit magna. Sed sed dui vitae turpis mollis auctor. Sed sed ligula vel erat aliquam mattis. Fusce vehicula nibh non est. Donec nec augue. Cras ultricies, mauris id fermentum adipiscing, erat arcu blandit augue, non ornare nibh libero tempus ligula. Vivamus nec eros. Maecenas ultrices neque sed risus. Sed consectetuer dignissim elit. <small>For this I used a nice book.</small> In viverra volutpat libero. In cursus augue vitae eros. Nam purus lectus, fringilla sed, volutpat id, tempus id, turpis. Curabitur nunc augue, ultricies nec, volutpat id, feugiat a, augue.</p>
<p>Mauris volutpat, mauris et venenatis tempus, arcu ligula consequat tellus, eu dapibus metus wisi quis nunc. Vestibulum lobortis neque eget risus. Sed suscipit, urna et ultricies scelerisque, metus sem lobortis magna, a sodales tortor est id pede. Proin vehicula lorem auctor wisi. Mauris pharetra malesuada purus. Cras vel leo. Sed enim velit, sagittis non, sollicitudin vel, pulvinar commodo, pede. Nullam eu diam. Maecenas vitae sapien. Sed nec libero ut sem molestie faucibus. Donec lacus. Donec sed felis eget quam tincidunt posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Ut et mi. Pellentesque tincidunt. Aliquam in odio. Cras id purus. <small>Well, maybe?</small> Nunc vel nunc fringilla mauris congue pulvinar. Nulla odio ante, tristique eget, laoreet sed, auctor eget, augue. Suspendisse eu dui. Donec consectetuer bibendum massa. Curabitur feugiat mi vitae orci. Sed viverra. Nam imperdiet ipsum nec lorem. Phasellus viverra. Ut consequat leo. Aliquam nulla augue, tincidunt sed, adipiscing a, iaculis a, odio.</p>
<p>Ut sollicitudin facilisis lacus. Aenean eget lorem et tortor blandit rutrum. Quisque luctus, metus ac lacinia porta, lorem eros malesuada mauris, ac rhoncus tortor ligula non ipsum. Donec luctus iaculis sapien. Sed fermentum placerat nisl. Aliquam erat volutpat. Vivamus in erat. In hac habitasse platea dictumst. Proin placerat turpis ac felis. Nulla ornare augue quis tellus. Sed sit amet metus.</p>
<p>Nulla fermentum, enim vitae volutpat suscipit, eros risus posuere pede, vitae semper wisi purus id wisi. Mauris purus ante, nonummy eu, dapibus sed, facilisis et, mauris. Aenean dapibus lectus. Sed quam mauris, suscipit ac, faucibus vitae, ornare non, eros. Phasellus commodo velit pellentesque lacus. Phasellus tortor tellus, cursus elementum, sagittis et, mattis vel, ipsum. In pharetra, lectus sed auctor vulputate, mauris eros eleifend nulla, ut aliquam quam massa nec nibh. Curabitur aliquet. <small>Haha, well, that's just plain silly!</small> Mauris consequat orci eget neque. Vestibulum elementum malesuada justo.</p>
<p>Maecenas vulputate massa et leo. Praesent justo. Mauris ac elit. Duis pede quam, volutpat et, pulvinar vel, accumsan in, tortor. Morbi sed massa. Sed iaculis egestas est. Mauris quis arcu. Praesent sem nunc, sollicitudin eu, pulvinar sit amet, lacinia ac, purus. Donec placerat, risus sed rutrum sagittis, diam nibh rhoncus odio, et condimentum sem ipsum at lacus. Etiam fringilla. Mauris condimentum erat sit amet eros. Vivamus neque ipsum, consectetuer eu, nonummy sit amet, fringilla ac, dolor. Proin nunc turpis, pharetra id, iaculis in, consequat a, ligula. Nam et nisl. Quisque urna magna, fermentum in, euismod vitae, varius in, sem. Pellentesque et diam. Sed volutpat varius ligula. Curabitur luctus, wisi eget ullamcorper volutpat, urna metus interdum dui, at pellentesque neque velit vitae augue. Cras et pede. Nullam tempor.</p>
<hr>
<p><a href="/">Home</a> - <a href="/stuff/">More stuff</a></p>
</body>
</html>html { background: #ccc; }
h2 { text-align: justify; }
a:hover { background: yellow; }
#footnotes { width: 30em; margin: 0 auto; background: #fff; padding: 1em; border-left: 2px solid #000; border-right: 2px solid #000; }
#footnotes p { line-height: 150%; text-align: justify; }
#footnotes small { color: #666; }
#footnotes small a { color: #666; }
.notesList { text-align: right; color: #666; }
.notesList li { line-height: 160%; }
.notesList a { color: #666; }以上是关于css http://krijnhoetmer.nl/stuff/javascript/footnotes/的主要内容，如果未能解决你的问题，请参考以下文章
css [css：fadeout / fadein] css示例。 #css
css 深度提示#css中的css base builder CSS