<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Mini-Tab Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
background: #fff;
}
/* rounded */
#nav {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(rounded.gif) no-repeat bottom center;
}
-->
</style>
<style type="text/css">
<!--
/* code for presentation purpose (CSS preview) */
body {
font-family: verdana, sans-serif;
font-size: 11px;
background: #eeeeee;
}
h4 {
font-size: 100%;
color: #999;
margin: 0;
}
-->
</style>
</head>
<body>
<h4>Rounded Tabs</h4>
<div class="container">
<ul id="nav">
<!-- CSS Tabs -->
<li><a href="Home.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a class="active" href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
</body>
</html> |
