CSS tab : tab « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- tab
CSS tab
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite {
border: 1px dashed white;
}
body {
margin: 0 15% 0 15%;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 10px solid black;
padding: 0 0 5em 0;
}
#header {
background-color: white;
border-top: 10px solid #333;
}
#navsite {
background-color: white;
}
#navsite ul {
background-color: white;
padding: 0 0 3px 0;
margin-left: 0;
margin-top: 0;
border-bottom: 1px solid #669;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #669;
border-bottom: none;
background-color: #ccf;
text-decoration: none;
}
#navsite ul li a:link {
color: #339;
}
#navsite ul li a:visited {
color: #666;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #336;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}
#header, #content {
padding: 0 2% 0 2%;
}
#content {
background-color: white;
}
#contentMain {
background-color: white;
}
</style>
</head>
<body>
<div id="navsite">
<ul>
<li><a href="http://www.java2s.com" id="current">Home</a></li>
<li><a href="http://www.java2s.com">Products</a></li>
<li><a href="http://www.java2s.com">Services</a></li>
<li><a href="http://www.java2s.com">About Us</a></li>
<li><a href="http://www.java2s.com">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="contentMain">
<h2><a href="http://www.java2s.com">link</a></h2>
<p>Text <a href="http://www.java2s.com">Link</a></p>
<p>Text.</p>
<p>Text <a href="http://www.java2s.com">Link</a></p>
</div>
</div>
<div id="footer">
<p>Copyright 2003 .</p>
</div>
</body>
</html>
Related examples in the same category