打印

仿淘宝网站的导航标签效果！

misshjn [楼主]

中级会员

帖子: 201
体力: 370
威望: 4
离线: 1 天

1^# 大中小发表于 2006-3-27 00:34

努力了一个晚上，效果终于出来了。在ie6与ff1.6a1下测试通过。爽歪了，与大家分享！

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div id="container">
  <div id="title">
    <ul>
      <li id="homepage"><a href="#" class="selectli"><span class="selectspan">首页</span></a></li>
      <li id="download"><a href="#"><span>下载中心</span></a></li>
      <li id="product"><a href="#"><span>产品介绍</span></a></li>
      <li id="login"><a href="#"><span>会员注册与登录</span></a></li>
      <li id="contactus"><a href="#"><span>联系我们</span></a></li>
    </ul>
  </div>
  <div id="content">
    <p>仿淘宝网站的导航效果。此方法有几个优点：</p>
    <ul>
      <li>根据字数自适应项目长度</li>
      <li>不同的项目使用不同的颜色来区分</li>
      <li>无需使用脚本</li>
      <li>背景图片只需要两个图片文件就足够，减少服务器负担<br />
       这是使用到的两个图片：
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
           </tr>
         </table>
      </li>
    </ul>
	
  </div>  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

本帖最近评分记录

hutia 威望 +2 精品文章 2006-7-27 08:58

------ 我的博客 ------
http://www.happyshow.org

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

wangzijia

中级会员

帖子: 130
体力: 456
威望: 0
离线: 107 天

2^# 大中小发表于 2006-3-27 08:55

就是滑动门技术吧

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

welcome58

缘由心生

银牌会员

帖子: 456
体力: 1041
威望: 2
当前: 北京海淀区
离线: 17 天

专长 UI,前端制作,JS

3^# 大中小发表于 2006-3-27 09:01

这不是滑动门技术吧

不懂,学习中

不懂就问
http://www.welcome58.cn

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

flashlizi

银牌会员

帖子: 511
体力: 1251
威望: 124
当前: 上海浦东
离线: 1 天

专长 网页设计,JS,AS

4^# 大中小发表于 2006-3-27 11:53

这种是叫做“滑动门技术”。
不过，这种叫法有点夸大的嫌疑。因为本来就是很简单的一个小技巧而已，算不上什么特别的技术。

说白了，滑动门技术就是：叠加2个背景。
再详细点就是，给<a></a>设置一个左背景，然后在a里面增加一个右浮动的<span>，给它设置一个右背景。这样就可以用a的伪类hover来实现鼠标放上去，菜单背景的替换效果了。

RIAidea.com

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

misshjn [楼主]

中级会员

帖子: 201
体力: 370
威望: 4
离线: 1 天

5^# 大中小发表于 2006-3-27 12:12

唉，早知道这叫滑动门，我昨晚就不用那样折腾了

------ 我的博客 ------
http://www.happyshow.org

TOP

marvellous

金翅擘海

荣誉管理团队

帖子: 11836
体力: 26946
威望: 141
当前: 北京朝阳区

6^# 大中小发表于 2006-3-27 12:14

上面的“滑动门技术”每个门要分别能打开各自的内容才行,即导航栏各项要与其内容有交互作用。所以我做了一个发展如下：
参照:
http://bbs.blueidea.com/viewthread.php?tid=2368870

http://bbs.blueidea.com/viewthread.php?tid=1737991
经典名人语录

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

misshjn [楼主]

中级会员

帖子: 201
体力: 370
威望: 4
离线: 1 天

7^# 大中小发表于 2006-3-28 11:32

修改一下，这下可以切换内容了。

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <6; i++)
	{
		if ("tag"+i==tag)
		{
			document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
			document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
		}else{
			document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
			document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
		}
		if ("content"+i==content)
		{
			document.getElementById(content).className="";
		}else{
			document.getElementById("content"+i).className="hidecontent";
		}
		document.getElementById("content").className=content;
	}
}
</script>
</head>
<body>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>	
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片：
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
           </tr>
         </table>
  </div>
</div>  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

------ 我的博客 ------
http://www.happyshow.org

TOP

cycloned

程让

金牌会员

帖子: 1425
体力: 3310
威望: 0
当前: 上海浦东

专长 网页设计,前端制作,UE

8^# 大中小发表于 2006-3-28 14:58

http://www.299564.com/head

前端开发

TOP

yjpmmm

中级会员

帖子: 182
体力: 425
威望: 0
离线: 31 天

9^# 大中小发表于 2006-4-6 17:54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
	FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
TD {
	FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
SELECT {
	FONT-SIZE: 12px
}
INPUT {
	FONT-SIZE: 12px
}
A:link {
	COLOR: #3d362b
}
A:visited {
	COLOR: #3d362b
}
A:hover {
	COLOR: #f60
}
BODY #search {
	CLEAR: both; WIDTH: 540px; HEIGHT: 50px
}
BODY #search #left {
	FLOAT: left
}
BODY #search #searchleft {
	PADDING-LEFT: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
BODY #search #searchleft1 {
	PADDING-LEFT: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
FORM {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY #newsearch {
	WIDTH: 540px; HEIGHT: 30px
}
BODY #newsearchtop {
	WIDTH: 540px; HEIGHT: 25px; TEXT-ALIGN: right
}
BODY #newsearchtop LI {
	FONT-SIZE: 12px; FLOAT: left
}
.newsearchinsidew {	BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300 1px solid; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline}
.newsearchinsider {	BORDER-RIGHT: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff; PADDING-TOP: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center}
.newsearchinsider A:visited {
	COLOR: #ffffff; TEXT-DECORATION: none
}
.newsearchinsidew A:hover {
background-color:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center
}
BODY #newsearchbottom {
	BORDER-RIGHT: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff7300
}
BODY #newsearchbottom #e1 {	Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e2 {	Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e3 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e4 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e5 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e6 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e7 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
</STYLE>
      <SCRIPT>
function doClick(o){
	 o.className="newsearchinsider";
	 var j;
	 var id;
	 var e;
	 for(var i=1;i<=7;i++){
	   id ="v"+i;
	   j = document.getElementById(id);
	   e = document.getElementById("e"+i);
	   if(id != o.id){
	   	 j.className="newsearchinsidew";
	   	 e.style.visibility = "hidden";
	   }else{
			e.style.visibility = "visible";
	   }
	 }
	 
	var id = o.id+""; 
	var dd=id.substring(1,2);
	var curForm = document.getElementById("FormSearch"+dd);
	var inputv ;
	for(var i=1;i<=7;i++){
	var otherForm = document.getElementById("FormSearch"+i);
	}
	
}
function doOut(o){
 
}
      </SCRIPT>
</HEAD>
<BODY>
<br><br>
      <DIV id=search>
        <DIV id=newsearch>
        <DIV id=newsearchtop>
        <UL>
			<LI><DIV class=newsearchinsider id=v1 onClick="javascript:doClick(this)"><A href="#">供应信息</A></DIV></LI>
			<LI><DIV class=newsearchinsidew id=v2 onClick="javascript:doClick(this)"><A href="#">求购信息</A></DIV></LI>
			<LI><DIV class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)"><A href="#">产品目录</A></DIV></LI>
			<LI><DIV class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)"><A href="#">公司库</A></DIV></LI>
			<LI><DIV class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)"><A href="#">商业资讯</A></DIV></LI>
			<LI><DIV class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)"><A href="#">商人论坛</A></DIV></LI>
			<LI><DIV class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)"><A href="#">拍卖信息</A></DIV></LI>
			
		</UL>
		</DIV>
        
		<DIV id=newsearchbottom>
        <DIV id=e1><DIV id=left><DIV id=searchleft1>搜索 供应信息</DIV></DIV></DIV>
        <DIV id=e2><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>
        <DIV id=e3><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>
        <DIV id=e4><DIV id=left><DIV id=searchleft1>请输入产品名或公司名关键字</DIV></DIV></DIV>
        <DIV id=e5><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>
        <DIV id=e6><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>
        <DIV id=e7><DIV id=left><DIV id=searchleft1>请输入拍卖关键字</DIV></DIV></DIV></DIV></DIV>
      </DIV><DIV></DIV>   
</BODY></HTML>

提示：您可以先修改部分代码再运行

TOP

rml

银牌会员

帖子: 349
体力: 1163
威望: 0
离线: 22 天

10^# 大中小发表于 2006-4-10 15:02

基本用CSS+javascript+图片的一般来说兼容性最好！

我是个懒人

TOP

Evance

剑侠狗

金牌会员

帖子: 5931
体力: 3276
威望: 0
当前: 浙江杭州

11^# 大中小发表于 2006-4-10 15:47

晕...说是滑动门的仔细去看看什么是滑动门技术吧!!
郁闷....
这不是！

7楼的才是..
不要看了半点东西就到处跑...　
不过楼主写得不错
支持一下..

我曾经得过精神分裂症，但现在我们已经康复了。

TOP

guza

新手上路

帖子: 9
体力: 37
威望: 0
离线: 482 天

12^# 大中小发表于 2006-4-11 14:41

还有点区别哦，淘宝那个是鼠标移到边框以内就开始变色，这个是要移到链接上才行的。

TOP

独来读网

初级会员

帖子: 19
体力: 77
威望: 0
离线: 20 天

13^# 大中小发表于 2006-4-11 16:13

14楼的效果就很完善了。

My Blog：http://www.51du.cn

TOP

tance

新手上路

帖子: 27
体力: 11
威望: 0
离线: 42 天

14^# 大中小发表于 2006-4-11 16:50

marvellous在上个帖子中说

引用:

上面的“滑动门技术”每个门要分别能打开各自的内容才行,即导航栏各项要与其内容有交互作用。所以我做了一个发展如下：
参照:
http://bbs.blueidea.com/viewthread.php?tid=2368870

http://bbs.blueidea.com/viewthread.php?tid=1737991
经典名人语录
<style> body {font-size:12px;font-family:宋体} ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif); } ul.TabBarLevel1 li{ float:left; padding:0; height:29px; margin-right:1px; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a{ display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{ color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{ color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{ color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{ color:#F30; text-decoration:none; } div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; display:none; } </style> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li> <li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li> <li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li> <li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li> </ul> <div id="cnt"> <div id="dTab1" class="HackBox">我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。 </div> <div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】 </div> <div id="dTab3" class="HackBox">学习是件头疼的事，为了能活下去我不得不学习 </div> <div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇微带着后悔寂寞沙洲我该思念谁 </div> </div> </div> <script language="JavaScript"> //Switch Tab Effect function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++){ var x = oItem.children(i); x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; var dvs=document.getElementById("cnt").getElementsByTagName("div"); for (var i=0;i<dvs.length;i++){ if (dvs[i].id==('d'+tabid)) dvs[i].style.display='block'; else dvs[i].style.display='none'; } } </script>
提示：您可以先修改部分代码再运行

8错8错，但好想再firefox下通不过！
我的版本是Firefox/1.5.0.1

TOP

guza

新手上路

帖子: 9
体力: 37
威望: 0
离线: 482 天

15^# 大中小发表于 2006-4-13 16:46

<html>
<head>
<title>study</title>
<style type="text/css">

</style>
</head>
<body class="C">
				
<div id="Head">
    <div id="DHL">
		<ul id="DHLItems">
			<li id="A"><a href="#"><span>A</span></a></li>
			<li id="B"><a href="#"><span>B</span></a></li>
			<li id="C"><a href="#"><span>C</span></a></li>
			<li id="D"><a href="#"><span>D</span></a></li>
			<li id="E"><a href="#"><span>E</span></a></li>
			<li id="F"><a href="#"><span>F</span></a></li>
			<li id="G"><a href="#"><span>G</span></a></li>
			<li id="H"><a href="#"><span>H</span></a></li>
			<li id="I"><a href="#"><span>I</span></a></li>
			<li id="J"><a href="#"><span>J</span></a></li>
		</ul>
	</div>
</div> 
</body>
</html>

提示：您可以先修改部分代码再运行

偶初学者，直接抄淘宝的CSS改了下名字，背景图片定位方面的CSS还是没完全弄明白。

TOP

freejanker

高级会员

帖子: 332
体力: 990
威望: 0
离线: 2 天

16^# 大中小发表于 2006-5-12 14:50

不知道你们发现没有，当刷新你们的页面时，交果就会回到初始状态。

这个问题又应该怎么解决呢？

http://www.fo128.com/blog/

TOP

ghost210

新手上路

帖子: 8
体力: 32
威望: 0
离线: 933 天

17^# 大中小发表于 2006-5-14 15:26

俺也贴一下,凑凑热闹!

提示：您可以先修改部分代码再运行

俺的ajax留言板:http://ly210.zzyz.com

TOP

wzdqy

高级会员

帖子: 376
体力: 826
威望: 0
离线: 116 天

18^# 大中小发表于 2006-5-14 19:22

顶一下29楼的，刷新的问题没得到解决啊

TOP

bjhaoyun

中级会员

帖子: 124
体力: 480
威望: 10
离线: 224 天

19^# 大中小发表于 2006-5-14 19:33

freejanker在上个帖子中说

引用:

不知道你们发现没有，当刷新你们的页面时，交果就会回到初始状态。

这个问题又应该怎么解决呢？

为什么要刷新呢？这正是ajax的优点之一——无刷新
刷新就复位：可以想看主页的时候，只要刷新一下
顺便说下ajax是不怕刷新得，具体解决方案请参看
http://bbs.blueidea.com/viewthread.php?tid=2573266

天下之大，无棋不有

TOP

ghost210

新手上路

帖子: 8
体力: 32
威望: 0
离线: 933 天

20^# 大中小发表于 2006-5-15 18:25

刷新问题已经解决,俺用的cookie

提示：您可以先修改部分代码再运行

俺的ajax留言板:http://ly210.zzyz.com

TOP

wcp521

初级会员

帖子: 42
体力: 76
威望: 0
离线: 28 天

21^# 大中小发表于 2006-8-2 16:54

经典酷

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
	margin: 0; padding:0
}
body {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	text-align: center;
	height: auto;
	width: auto;
	background-color: #666666;
	font-size: 12px;
	color: #000000;
}
#container {
	text-align: left;
	width: 760px;
	height: 400px;
	background-color: #FFFFFF;
	padding: 20px;
}
#container #title {
	height: 28px;
}
#container #title li {
	float: left;
	list-style-type: none;
	height: 28px;
	line-height: 28px;
	text-align: center;
	margin-right: 1px;
}
#container #title ul {
	background-color: #FFFFFF;
	height: 28px;
}
#container #title a {
	text-decoration: none;
	color: #000000;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px;
	padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
	padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
	padding: 0 15px 0 15px;	
}
#container #title #tag3 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
	padding: 0 15px 0 15px;	
}
#container #title #tag4 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
	padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
	padding: 0 15px 0 15px;
}
#container #title .selectli1 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli2 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli3 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli4 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli5 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; 
	padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
	height: 300px;
	padding: 10px;
}
.content1 {
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #3A81C8;
	border-right-color: #3A81C8;
	border-bottom-c