根据spry制作高级网页组件
//（tab.css网页）
@charset "utf-8";
/* CSS Document */
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:0;
padding-bottom:23px;
border-bottom:1px solid #11a3ff;
font:bold 12px verdana, arial;
}
ul#tabnav li{
float:left;
height:22px;
background-color:#a3dbff;
margin:0 3px 0 0;
border:1px solid #11a3ff;
}
body#home ul#tabnav li.home,body#dev ul#tabnav li.dev,body#design ul#tabnav li.design,body#map ul#tabnav li.map{
border-bottom:1px solid #fff;
color:#000;
background-color:#fff;
}
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 ul#tabnav li.home a:link,body#home ul#tabnav li.home a:visited,
body#dev ul#tabnav li.dev a:link,body#dev ul#tabnav li.dev a:visited,
body#design ul#tabnav li.design a:link,body#design ul#tabnav li.design a:visited,
body#map ul#tabnav li.map a:link,body#map ul#tabnav li.map a:visited{
color:#000;
background-color:#fff;
}
body#home ul#tabnav li.home a:hover,body#dev ul#tabnav li.dev a:hover,body#design ul#tabnav li.design a:hover,body#map ul#tabnav li.map a:hover{
color:006eb3;
text-decoration:underline;}
//(home.html网页)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tab.css" type="text/css" rel="stylesheet" />
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="home.html">Home</a>
</li>
<li class="dev"><a href="dev.html">Web Dev</a>
</li>
<li class="design"><a href="design.html">Web Design</a>
</li>
<li class="map"><a href="map.html">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 example.</li>
<li>4.Not only good news.</li>
<li>5.The text here are example.</li>
</ul>
</div>
</body>
</html>
//(dev.html网页)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tab.css" type="text/css" rel="stylesheet" />
</head>
<body id="dev">
<ul id="tabnav">
<li class="home"><a href="home.html">Home</a>
</li>
<li class="dev"><a href="dev.html">Web Dev</a>
</li>
<li class="design"><a href="design.html">Web Design</a>
</li>
<li class="map"><a href="map.html">Map</a>
</li>
</ul>
<div id="content">
这是dev选项卡的内容。
</div>
</body>
</html>
//(design.html网页)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tab.css" type="text/css" rel="stylesheet" />
</head>
<body id="design">
<ul id="tabnav">
<li class="home"><a href="home.html">Home</a>
</li>
<li class="dev"><a href="dev.html">Web Dev</a>
</li>
<li class="design"><a href="design.html">Web Design</a>
</li>
<li class="map"><a href="map.html">Map</a>
</li>
</ul>
<div id="content">
这是design选项卡的内容。
</div>
</body>
</html>
//(map.html网页)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tab.css" type="text/css" rel="stylesheet" />
</head>
<body id="map">
<ul id="tabnav">
<li class="home"><a href="home.html">Home</a>
</li>
<li class="dev"><a href="dev.html">Web Dev</a>
</li>
<li class="design"><a href="design.html">Web Design</a>
</li>
<li class="map"><a href="map.html">Map</a>
</li>
</ul>
<div id="content">
这是map选项卡的内容。
</div>
</body>
</html>
