1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tabs | unraveled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- CSS Tabs is licensed under Creative Commons Attribution 2.0 - http://creativecommons.org/licenses/by/2.0/ -->
<style type="text/css">
body {
font: 100% verdana, arial, sans-serif;
background-color: #fff;
margin: 50px;
}
ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #fff;
background-color: #fff;
}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: #000;
}
#tabnav a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#tabnav a:hover {
background: #fff;
}
</style>
</head>
<body id="tab1">
<p><a href="/projects/css_tabs/">← Introduction</a></p>
<h1>CSS Tabs</h1>
<ul id="tabnav">
<li class="tab1"><a href="#">Tab One</a></li>
<li class="tab2"><a href="#">Tab Two</a></li>
<li class="tab3"><a href="#">Tab Three</a></li>
<li class="tab4"><a href="#">Tab Four</a></li>
</ul>
<p>CSS Tabs is licensed under <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Creative Commons Attribution 2.0</a>.</p>
<p>Joshua Kaufman, <a href="/">unraveled</a><br />
16 July, 2003</p>
</body>
</html> |
Partager