topical media & game development
basic-css-06-Exercises-exercise6-2.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
* {
font-family: sans-serif;
color: white;
}
h1, h2 {
margin: 0;
background: gray;
}
h1 {
font-size: 18pt;
padding: 5px;
border-bottom: 5px solid black;
letter-spacing: -2px;
width: 510px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
}
div {
background: lightgrey;
padding: 10px;
width: 500px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
clear: left;
}
h2 {
font-size: 11pt;
-moz-border-radius: 10px;
padding: 3px;
}
ul#navigation {
list-style: none;
background: gray;
margin: 2px;
padding: 0;
}
ul#navigation li {
float: left;
margin: 5px;
}
ul#navigation li a {
padding: 5px;
}
ul#navigation li a:link {
background: gray;
}
ul#navigation li a:active {
background: orange;
}
ul#navigation li a:visited {
background: black;
}
ul#navigation li a:hover, li a:focus {
background: white;
color: black;
}
ul#top {
color: black;
}
h3, p {
color: black;
}
p {
border: 1px solid black;
padding: 10px;
}
h3:target {
color: yellow;
background: red;
}
ul#top li a {
color: black;
}
</style>
<title>FAQ - Widgets and What's-its</title>
</head>
<body>
<h1>Widgets and What's-its</h1>
<ul id='navigation'>
<li><a href=''>home</a></li>
<li><a href=''>contact us</a></li>
<li><a href=''>products</a></li>
<li><a href=''>services</a></li>
<li><a href=''>faq</a></li>
</ul>
<div>
<h2>faq</h2>
<ul id='top'>
<li><a href='#widgets'>Q. What are widgets?</a></li>
<li><a href='#why'>Q. Why should I buy a widget?</a></li>
<li><a href='#where'>Q. Where do widgets come from?</a></li>
<li><a href='#what'>Q. What are widgets made of?</a></li>
<li><a href='#how'>Q. How do I use my widget?</a></li>
<li><a href='#who'>Q. Who uses widgets?</a></li>
</ul>
<h3 id='widgets'>Q. What are widgets? <a href='#top'>top</a></h3>
<p>
A. Widgets are a smaller, more compact version of what's its.
</p>
<h3 id='why'>Q. Why should I buy a widget? <a href='#top'>top</a></h3>
<p>
A. Because widgets will solve all of you problems.
</p>
<h3 id='where'>Q. Where do widgets come from? <a href='#top'>top</a></h3>
<p>
A. Widgets are harvested from the Amazon rain forest by
little green gnomes.
</p>
<h3 id='what'>Q. What are widgets made of? <a href='#top'>top</a></h3>
<p>
A. Widgets are made of primordial, esoteric matter, and as
such could cause your head to explode into one of seven
fun-filled colors.
</p>
<h3 id='how'>Q. How do I use my widget? <a href='#top'>top</a></h3>
<p>
A. You must summon a troll using our proprietary magic wand and
book of spells who will teach you everything you need to know
about your widget.
</p>
<h3 id='who'>Q. Who uses widgets? <a href='#top'>top</a></h3>
<p>
A. Day traders and postal workers, primarily.
</p>
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.