CHAPTER 17 ■ LAYOUTS
Layout Links
HTML
<h1>Layout Links</h1><div id="preheader"><a class="skiplink" href="#main">Skip to main content</a></div>
<div id="header"><h2>header</h2></div><div id="postheader">
<div class="breadcrumbs"><a href="#">Home</a> » <a href="#">Layout Links</a>
» Breadcrumbs <span class="sequential">
<a href="#">« Previous</a> | <a href="#">Next »</a></span></div></div><div id="body"><h2>body</h2>
<p>Main content goes here. <a class="outlink" href="#">External Link</a></p>
<p class="morelink"><a href="#">» More Info </a></p></div><div id="footer"><h2>footer <a class="toplink" href="#">Topˆ</a></h2>
<ul><li>Last Updated on... </li> <li><a href="#">Copyright © 2007</a></li>
<li><a href="#">License</a> </li> <li><a href="#">Privacy Policy</a></li>
<li><a href="#">About Us</a></li> <li><a href="#">Disclaimers</a></li></ul>
<div class="float-divider"></div></div>CSS
a:link, a:visited, a:active { text-decoration:none; color:maroon; }
a:hover { color:black; text-decoration:underline; }.morelink { font-size:0.8em; font-weight:bold; text-align:right; }
.toplink { font-size:0.7em; font-weight:normal; vertical-align:top; }
.outlink { padding-right:15px; font-style:italic;
background:url("external.gif") no-repeat top right; }/* Nonessential rules are not shown. */