tab.css
body{
margin: 10px;
}
#content{
border-left: 1px solid #11a3ff;
border-right: 1px solid #11a3ff;
border-bottom: 1px solid #11a3ff;
padding: 5px;
font-size: 12px;
}
ul#tabnav{
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-bottom: 23px;
border-bottom: 1px solid #11a3ff;
font: 12px verdana, arial;
}
ul#tabnav li{
float: left;
height: 22px;
background-color: #a3dbff;
margin: 0px 3px 0px 0px;
border: 1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
display: block;
color: #006eb3;
text-decoration: none;
padding: 5px 10px 3px 10px;
}
ul#tabnav a:hover{
background-color: #006eb3;
color: #fff;
}
body#home li.home, body#dev li.dev, body#design li.design, body#map li.map{
border-bottom: 1px solid #fff;
color: #000;
background-color: #fff;
} home.htm
<!DOCTYPE html>
<html>
<head>
<title>Tab菜单</title>
<link href="tab.css" type="text/css" rel="stylesheet">
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="home.htm">Home</a></li>
<li class="dev"><a href="dev.htm">Web Dev</a></li>
<li class="design"><a href="design.htm">Web Design</a></li>
<li class="map"><a href="map.htm">Map</a></li>
</ul>
<div id="content">
<ul id="list">
<li>1. There are some good news.</li>
<li>2. Not only good news.</li>
<li>3. The text here are examples.</li>
<li>4. Not only good news.</li>
<li>5. The text here are examples</li>
</ul>
</div>
</body>
</html>
dev.htm
<!DOCTYPE html>
<html>
<head>
<title>Tab菜单</title>
<link href="tab.css" type="text/css" rel="stylesheet">
</head>
<body id="dev">
<ul id="tabnav">
<li class="home"><a href="home.htm">Home</a></li>
<li class="dev"><a href="dev.htm">Web Dev</a></li>
<li class="design"><a href="design.htm">Web Design</a></li>
<li class="map"><a href="map.htm">Map</a></li>
</ul>
<div id="content">
<ul id="list">
<li>1. There are some good news.</li>
<li>2. Not only good news.</li>
</ul>
</div>
</body>
</html>design.htm
<!DOCTYPE html>
<html>
<head>
<title>Tab菜单</title>
<link href="tab.css" type="text/css" rel="stylesheet">
</head>
<body id="design">
<ul id="tabnav">
<li class="home"><a href="home.htm">Home</a></li>
<li class="dev"><a href="dev.htm">Web Dev</a></li>
<li class="design"><a href="design.htm">Web Design</a></li>
<li class="map"><a href="map.htm">Map</a></li>
</ul>
<div id="content">
<ul id="list">
<li>1. There some good news.</li>
<li>2. Not only good news.</li>
<li>3. The text here are examples</li>
<li>4. Not only good news.</li>
</ul>
</div>
</body>
</html>map.htm
<!DOCTYPE html>
<html>
<head>
<title>Tab菜单</title>
<link href="tab.css" type="text/css" rel="stylesheet">
</head>
<body id="map">
<ul id="tabnav">
<li class="home"><a href="home.htm">Home</a></li>
<li class="dev"><a href="dev.htm">Web Dev</a></li>
<li class="design"><a href="design.htm">Web Design</a></li>
<li class="map"><a href="map.htm">Map</a></li>
</ul>
<div id="content">
<ul id="list">
<li>1. There some good news.</li>
<li>2. Not only good news.</li>
</ul>
</div>
</body>
</html>
5825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
