Win8 Metro风格网址导航页面js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Win8 Metro风格网址导航页面js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#?w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="#?w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Win8 Metro风格网址导航页面</title>
<link rel="stylesheet" href="css/metro.css">
<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var box_h=$("#metro_box").height();
	var box_w=$("#metro_box").width();
	$("#metro_box").css("margin-top",(($(window).height()-box_h)/2)-10+"px");
	//var img_h=$(".arr_left img").height();
	//var img_w=$(".arr_left img").width();
	//$(".prev").css("position","absolute").css("left","10px").css("top",($(window).height()-img_h)/2);
	//$(".next").css("position","absolute").css("right","10px").css("top",($(window).height()-img_h)/2);
	//链接在新窗口打开
	$(".a_link dd a").attr("target","_blank");
	$(".a_link ul li>a").hover(function(){
		var a_href=$(this).attr("href");			
		$(this).siblings().find("a").attr("href",a_href);
	});
	
	//切屏-----------------------------------------------------------------
	$("#top dl dd a").click(function(){
		var now_class=$(this).attr("class");	
		$("#top dl dd a.a_index").attr("class","a_index");
		$("#top dl dd a.a_mzdw").attr("class","a_mzdw");
		$("#top dl dd a.a_spyy").attr("class","a_spyy");
		$("#top dl dd a.a_xwzx").attr("class","a_xwzx");
		$("#top dl dd a.a_gwtb").attr("class","a_gwtb");
		$("#top dl dd a.a_yxyl").attr("class","a_yxyl");
		$("#top dl dd a.a_sygj").attr("class","a_sygj");
		$("#top dl dd a.a_yszy").attr("class","a_yszy");
		$(this).attr("class",now_class).addClass(now_class+"_h");			
		var index=$(this).index();
		$("#metro_box dd").hide();
		$("#metro_box dd").eq(index).toggle(100);
		if(index==1){
			$("body").attr("class","bg0");	
		}
		switch (index){
			case 0:
				$("body").attr("class","bg");						
				break;
			case 1:
				$("body").attr("class","bg0");					
				break;
			case 2:
				$("body").attr("class","bg1");						
				break;
			case 3:
				$("body").attr("class","bg2");					
				break;
			case 4:
				$("body").attr("class","bg3");					
				break;
			case 5:
				$("body").attr("class","bg4");						
				break;	
			case 6:
				$("body").attr("class","bg5");						
				break;	
			default :
				$("body").attr("class","bg6");						
		}
		
		<!--[if IE 6]>$("#metro_box dd").eq(index).show(300);<![endif]-->			
	});
});
</script>
</head>
<body>
<!--头部导航开始-->
<div id="top">
	<dl>
		<dt><a href="#" target="_blank">Win8网址导航</a></dt>
		<dd>
			<a class="a_index" href="/" target="_self">首页</a>
			<a class="a_mzdw a_mzdw_h">名站导航</a>
			<a class="a_spyy">视频音乐</a>
			<a class="a_xwzx">新闻资讯</a>
			<a class="a_gwtb">购物淘宝</a>
			<a class="a_yxyl">游戏娱乐</a>
			<a class="a_sygj">实用工具</a>
			<a class="a_yszy">影视资源</a>
			<a class="a_more" href="#" target="_blank">更多</a>
		</dd>
	</dl>
</div>
<!--头部导航结束--> 
<!--logo区开始-->
<div id="metro_box" class="a_link">
	<dl>
		<dd style="display:none;">
			<!--购物淘宝-->
			<ul>
				<li class="one" id="logo_001"><a href="#"><img src="images/logo_001a.png" width="240" height="120" alt="taobao"></a><span><a href="#">淘宝网</a></span></li>
				<li id="logo_002"><a href="#"><img src="images/logo_002a.png" width="240" height="120" alt="京东商城"></a><span><a href="#">京东商城</a></span></li>
				<li id="logo_003"><a href="#?p.yiqifa/c?s=090d5719&w=253302&c=255&i=150&l=0&e=win8&t=#?vancl"><img src="images/logo_003a.png" width="240" height="120" alt=""></a><span><a href="#">凡客诚品</a></span></li>
				<li class="four" id="logo_004"><a href="#?p.yiqifa/c?s=ea58a335&w=253302&c=139&i=802&l=0&e=win8&t=#?yihaodian/"><img src="images/logo_004a.png" width="240" height="120" alt=""></a><span><a href="#">1号店超市</a></span></li>
				<li class="one" id="logo_005"><a href="#?p.yiqifa/c?s=3870c892&w=253302&c=7069&i=26922&l=0&d=180&e=win8&t=#?amazon.cn"><img src="images/logo_005a.png" width="240" height="120" alt=""></a><span><a href="#">亚马逊</a></span></li>
				<li id="logo_006"><a href="#?p.yiqifa/c?s=e5aca906&w=253302&c=280&i=240&l=0&e=win8&t=#?newegg.cn"><img src="images/logo_006a.png" width="240" height="120" alt=""></a><span><a href="#">新蛋商城</a></span></li>
				<li id="logo_007"><a href="#?p.yiqifa/c?s=17e2ac8b&w=253302&c=4275&i=4662&l=0&e=win8&t=#?m18"><img src="images/logo_007a.png" width="240" height="120" alt=""></a><span><a href="#">麦考林</a></span></li>
				<li class="four" id="logo_008"><a href="#?p.yiqifa/c?s=a2a2a463&w=253302&c=247&i=159&l=0&e=win8&t=#?dangdang"><img src="images/logo_008a.png" width="240" height="120" alt=""></a><span><a href="#">当当网</a></span></li>
				<li class="one" id="logo_009"><a href="#?p.yiqifa/c?s=25ffbe45&w=253302&c=4459&i=5662&l=0&e=win8&t=#?suning/"><img src="images/logo_009a.png" width="240" height="120" alt=""></a><span><a href="#">苏宁易购</a></span></li>
				<li id="logo_010"><a href="#?p.yiqifa/c?s=ea3b031c&w=253302&c=4018&i=2882&l=0&e=win8&t=#?vipshop/"><img src="images/logo_010a.png" width="240" height="120" alt=""></a><span><a href="#">唯品会</a></span></li>
				<li id="logo_011"><a href="#?s.click.taobao/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGKas1PIKp0U37pZuBotzOg7OjeU9mIWS5%2B5UROBz6sq4fiHePnGhf6UrWuOtfD2G6QGcAHIXpjhEtESpuqsRo0a&pid=mm_10054659_0_0"><img src="images/logo_011a.png" width="240" height="120" alt=""></a><span><a href="#">淘宝聚划算</a></span></li>
				<li class="four" id="logo_012"><a href="#?p.yiqifa/c?s=fab51d3d&w=253302&c=5579&i=14922&l=0&e=win8&t=#?gome.cn/"><img src="images/logo_012a.png" width="240" height="120" alt=""></a><span><a href="#">国美电器</a></span></li>
				<li class="one" id="logo_013a"><a href="#?p.yiqifa/c?s=3c1c7cd0&w=253302&c=5402&i=11642&l=0&e=win8&t=#?bj.meituan/"><img src="images/logo_013a.png" width="240" height="120" alt=""></a><span><a href="#">美团网</a></span></li>
				<li id="logo_003"><a href="#?p.yiqifa/c?s=4f5f315d&w=253302&c=298&i=323&l=0&e=win8&t=#?moonbasa/"><img src="images/logo_014a.png" width="240" height="120" alt=""></a><span><a href="#">梦芭莎</a></span></li>
				<li id="logo_015a"><a href="#?s.click.taobao/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRcrAgcZzgJmTRAYw2B9ey%2FQ3KJPxcp3%2BvBC%2FFzh7mzpBsjMcR7YLndgk5kgk3iDIb4vdXtkoO07degg%3D%3D"><img src="images/logo_015a.png" width="240" height="120" alt=""></a><span><a href="#">淘宝商城</a></span></li>
				<li class="four" id="logo_016"><a href="#?alipay"><img src="images/logo_016a.png" width="240" height="120" alt=""></a><span><a href="#">支付宝</a></span></li>
			</ul>
		</dd>
		<dd style="display:bolck;">
			<!--名站导航-->
			<ul>
				<li class="one" id="logo_001"><a href="#?google.hk"><img src="images/logo_001.png" width="240" height="120" alt="google"></a><span><a href="#">谷歌</a></span></li>
				<li id="logo_002"><a href="#?baidu/index.php?tn=divencheng_pg"><img src="images/logo_baidu.png" width="240" height="120" alt=""></a><span><a href="#">百度</a></span></li>
				<li id="logo_003"><a href="#?youku"><img src="images/logo_003.png" width="240" height="120" alt=""></a><span><a href="#">优酷</a></span></li>
				<li class="four" id="logo_004"><a href="#?weibo"><img src="images/logo_004.png" width="240" height="120" alt=""></a><span><a href="#">新浪微博</a></span></li>
				<li class="one" id="logo_005"><a href="#?taobao/go/chn/tbk_channel/onsale.php?pid=mm_10054659_3403176_13200135&eventid=101329"><img src="images/logo_005.png" width="240" height="120" alt=""></a><span><a href="#">淘宝网</a></span></li>
				<li id="logo_006"><a href="#?p.yiqifa/c?s=5308bddc&w=253302&c=254&i=160&l=0&e=win8&t=#?jd"><img src="images/logo_006.png" width="239" height="120" alt=""></a><span><a href="#">京东商城</a></span></li>
				<li id="logo_007"><a href="#?p.yiqifa/c?s=3870c892&w=253302&c=7069&i=26922&l=0&d=180&e=win8&t=#?amazon.cn"><img src="images/logo_007.png" width="240" height="120" alt=""></a><span><a href="#">亚马逊</a></span></li>
				<li class="four" id="logo_008"><a href="#?p.yiqifa/c?s=a2a2a463&w=253302&c=247&i=159&l=0&e=win8&t=#?dangdang"><img src="images/logo_008.png" width="240" height="120" alt=""></a><span><a href="#">当当网</a></span></li>
				<li class="one" id="logo_009"><a href="#?3399/?fr=10009-1"><img src="images/logo_004d.png" width="240" height="120" alt="3399小游戏"></a><span><a href="#">3399小游戏</a></span></li>
				<li id="logo_010"><a href="#?iqiyi"><img src="images/logo_009.png" width="240" height="120" alt=""></a><span><a href="#">奇艺网</a></span></li>
				<li id="logo_011"><a href="#?renren"><img src="images/logo_011.png" width="240" height="120" alt=""></a><span><a href="#">人人网</a></span></li>
				<li class="four" id="logo_012"><a href="#?p.yiqifa/c?s=090d5719&w=253302&c=255&i=150&l=0&e=win8&t=#?vancl"><img src="images/logo_012.png" width="240" height="120" alt=""></a><span><a href="#">凡客诚品</a></span></li>
				<li class="one" id="logo_013"><a href="#?sina.cn"><img src="images/logo_012c.png" width="240" height="120" alt=""></a><span><a href="#">新浪网</a></span></li>
				<li id="logo_014"><a href="#?qq"><img src="images/logo_qq.png" width="240" height="120" alt=""></a><span><a href="#">腾讯网</a></span></li>
				<li id="logo_015"><a href="#?sohu"><img src="images/logo_015.png" width="240" height="120" alt=""></a><span><a href="#">搜狐网</a></span></li>
				<li class="four" id="logo_016"><a href="#?163"><img src="images/logo_016.png" width="240" height="120" alt=""></a><span><a href="#">网易</a></span></li>
			</ul>
		</dd>
		<dd style="display:none;">
			<!--视频音乐-->
			<ul>
				<li class="one" id="logo_001"><a href="#?youku"><img src="images/logo_001b.png" width="240" height="120" alt="youku"></a><span><a href="#">优酷视频</a></span></li>
				<li id="logo_002"><a href="#?iqiyi"><img src="images/logo_002b.png" width="240" height="120" alt="qiyi"></a><span><a href="#">奇艺网</a></span></li>
				<li id="logo_003"><a href="#?tudou"><img src="images/logo_003b.png" width="240" height="120" alt=""></a><span><a href="#">土豆网</a></span></li>
				<li class="four" id="logo_004"><a href="#?cntv.cn"><img src="images/logo_004b.png" width="240" height="120" alt=""></a><span><a href="#">中国网络电视台</a></span></li>
				<li class="one" id="logo_005"><a href="#?tv.sohu"><img src="images/logo_005b.png" width="240" height="120" alt=""></a><span><a href="#">搜狐高清</a></span></li>
				<li id="logo_006"><a href="#?ku6"><img src="images/logo_006b.png" width="240" height="120" alt=""></a><span><a href="#">酷六视频</a></span></li>
				<li id="logo_007"><a href="#?56"><img src="images/logo_007b.png" width="240" height="120" alt=""></a><span><a href="#">56视频</a></span></li>
				<li class="four" id="logo_008"><a href="#?v.qq"><img src="images/logo_008b.png" width="240" height="120" alt=""></a><span><a href="#">腾讯视频</a></span></li>
				<li class="one" id="logo_009"><a href="#?kankan/"><img src="images/logo_009b.png" width="240" height="120" alt=""></a><span><a href="#">迅雷看看</a></span></li>
				<li id="logo_010"><a href="#?pptv"><img src="images/logo_010b.png" width="240" height="120" alt=""></a><span><a href="#">PPTV</a></span></li>
				<li id="logo_011"><a href="#?v.ifeng"><img src="images/logo_011b.png" width="240" height="120" alt=""></a><span><a href="#">凤凰视频</a></span></li>
				<li class="four" id="logo_012"><a href="#?video.sina.cn"><img src="images/logo_012b.png" width="240" height="120" alt=""></a><span><a href="#">新浪视频</a></span></li>
				<li class="one" id="logo_013"><a href="#?baofeng"><img src="images/logo_013b.png" width="240" height="120" alt=""></a><span><a href="#">暴风影音</a></span></li>
				<li id="logo_014"><a href="#?kugou"><img src="images/logo_014b.png" width="240" height="120" alt=""></a><span><a href="#">酷狗音乐</a></span></li>
				<li id="logo_015"><a href="#?funshion"><img src="images/logo_015b.png" width="240" height="120" alt=""></a><span><a href="#">风行电影</a></span></li>
				<li class="four" id="logo_016"><a href="#?letv"><img src="images/logo_016b.png" width="240" height="120" alt=""></a><span><a href="#">乐视网</a></span></li>
			</ul>
		</dd>
		<dd style="display:none;">
			<!--新闻资讯-->
			<ul>
				<li class="one" id="logo_001"><a href="#?news.baidu"><img src="images/logo_001c.png" width="240" height="120" alt="baidu"></a><span><a href="#">百度新闻</a></span></li>
				<li id="logo_002"><a href="#?news.sohu"><img src="images/logo_002c.png" width="240" height="120" alt="sohu"></a><span><a href="#">搜狐新闻</a></span></li>
				<li id="logo_003"><a href="#?people.cn"><img src="images/logo_003c.png" width="240" height="120" alt=""></a><span><a href="#">人民网</a></span></li>
				<li class="four" id="logo_004"><a href="#?cntv.cn"><img src="images/logo_004c.png" width="240" height="120" alt=""></a><span><a href="#">中国网络电视台</a></span></li>
				<li class="one" id="logo_005"><a href="#?yahoo.cn"><img src="images/logo_005c.png" width="240" height="120" alt=""></a><span><a href="#">雅虎中国</a></span></li>
				<li id="logo_006"><a href="#?ifeng"><img src="images/logo_ifeng.png" width="240" height="120" alt=""></a><span><a href="#">凤凰网</a></span></li>
				<li id="logo_007"><a href="#?huanqiu"><img src="images/logo_007c.png" width="240" height="120" alt=""></a><span><a href="#">环球网</a></span></li>
				<li class="four" id="logo_008"><a href="#?news.qq"><img src="images/logo_008c.png" width="240" height="120" alt=""></a><span><a href="#">腾讯新闻</a></span></li>
				<li class="one" id="logo_009"><a href="#?21cn"><img src="images/logo_009c.png" width="240" height="120" alt=""></a><span><a href="#">21cn新闻</a></span></li>
				<li id="logo_010"><a href="#?china"><img src="images/logo_010c.png" width="240" height="120" alt=""></a><span><a href="#">中华网</a></span></li>
				<li id="logo_011"><a href="#?bjnews.cn"><img src="images/logo_011c.png" width="240" height="120" alt=""></a><span><a href="#">新京报网</a></span></li>
				<li class="four" id="logo_012"><a href="#?news.sina"><img src="images/logo_012c.png" width="240" height="120" alt=""></a><span><a href="#">新浪新闻</a></span></li>
				<li class="one" id="logo_013"><a href="#?zaobao"><img src="images/logo_013c.png" width="240" height="120" alt=""></a><span><a href="#">联合早报</a></span></li>
				<li id="logo_014"><a href="#?xinhuanet"><img src="images/logo_014c.png" width="240" height="120" alt=""></a><span><a href="#">新华网</a></span></li>
				<li id="logo_015"><a href="#?chinanews/"><img src="images/logo_015c.png" width="240" height="120" alt=""></a><span><a href="#">中国新闻网</a></span></li>
				<li class="four" id="logo_016"><a href="#?hexun"><img src="images/logo_016c.png" width="240" height="120" alt=""></a><span><a href="#">和讯网</a></span></li>
			</ul>
		</dd>
		<dd style="display:none;">
			<!--购物淘宝-->
			<ul>
				<li class="one" id="logo_001"><a href="#?taobao/go/chn/tbk_channel/onsale.php?pid=mm_10054659_3403176_13200135&eventid=101329"><img src="images/logo_001a.png" width="240" height="120" alt="taobao"></a><span><a href="#">淘宝网</a></span></li>
				<li id="logo_002"><a href="#?p.yiqifa/c?s=5308bddc&w=253302&c=254&i=160&l=0&e=win8&t=#?jd"><img src="images/logo_002a.png" width="240" height="120" alt="京东商城"></a><span><a href="#">京东商城</a></span></li>
				<li id="logo_003"><a href="#?p.yiqifa/c?s=090d5719&w=253302&c=255&i=150&l=0&e=win8&t=#?vancl"><img src="images/logo_003a.png" width="240" height="120" alt=""></a><span><a href="#">凡客诚品</a></span></li>
				<li class="four" id="logo_004"><a href="#?p.yiqifa/c?s=ea58a335&w=253302&c=139&i=802&l=0&e=win8&t=#?yihaodian/"><img src="images/logo_004a.png" width="240" height="120" alt=""></a><span><a href="#">1号店超市</a></span></li>
				<li class="one" id="logo_005"><a href="#?p.yiqifa/c?s=3870c892&w=253302&c=7069&i=26922&l=0&d=180&e=win8&t=#?amazon.cn"><img src="images/logo_005a.png" width="240" height="120" alt=""></a><span><a href="#">亚马逊</a></span></li>
				<li id="logo_006"><a href="#?p.yiqifa/c?s=e5aca906&w=253302&c=280&i=240&l=0&e=win8&t=#?newegg.cn"><img src="images/logo_006a.png" width="240" height="120" alt=""></a><span><a href="#">新蛋商城</a></span></li>
				<li id="logo_007"><a href="#?p.yiqifa/c?s=17e2ac8b&w=253302&c=4275&i=4662&l=0&e=win8&t=#?m18"><img src="images/logo_007a.png" width="240" height="120" alt=""></a><span><a href="#">麦考林</a></span></li>
				<li class="four" id="logo_008"><a href="#?p.yiqifa/c?s=a2a2a463&w=253302&c=247&i=159&l=0&e=win8&t=#?dangdang"><img src="images/logo_008a.png" width="240" height="120" alt=""></a><span><a href="#">当当网</a></span></li>
				<li class="one" id="logo_009"><a href="#?p.yiqifa/c?s=25ffbe45&w=253302&c=4459&i=5662&l=0&e=win8&t=#?suning/"><img src="images/logo_009a.png" width="240" height="120" alt=""></a><span><a href="#">苏宁易购</a></span></li>
				<li id="logo_010"><a href="#?p.yiqifa/c?s=ea3b031c&w=253302&c=4018&i=2882&l=0&e=win8&t=#?vipshop/"><img src="images/logo_010a.png" width="240" height="120" alt=""></a><span><a href="#">唯品会</a></span></li>
				<li id="logo_011"><a href="#?s.click.taobao/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGKas1PIKp0U37pZuBotzOg7OjeU9mIWS5%2B5UROBz6sq4fiHePnGhf6UrWuOtfD2G6QGcAHIXpjhEtESpuqsRo0a&pid=mm_10054659_0_0"><img src="images/logo_011a.png" width="240" height="120" alt=""></a><span><a href="#">淘宝聚划算</a></span></li>
				<li class="four" id="logo_012"><a href="#?p.yiqifa/c?s=fab51d3d&w=253302&c=5579&i=14922&l=0&e=win8&t=#?gome.cn/"><img src="images/logo_012a.png" width="240" height="120" alt=""></a><span><a href="#">国美电器</a></span></li>
				<li class="one" id="logo_013a"><a href="#?p.yiqifa/c?s=3c1c7cd0&w=253302&c=5402&i=11642&l=0&e=win8&t=#?bj.meituan/"><img src="images/logo_013a.png" width="240" height="120" alt=""></a><span><a href="#">美团网</a></span></li>
				<li id="logo_003"><a href="#?p.yiqifa/c?s=4f5f315d&w=253302&c=298&i=323&l=0&e=win8&t=#?moonbasa/"><img src="images/logo_014a.png" width="240" height="120" alt=""></a><span><a href="#">梦芭莎</a></span></li>
				<li id="logo_015a"><a href="#?s.click.taobao/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRcrAgcZzgJmTRAYw2B9ey%2FQ3KJPxcp3%2BvBC%2FFzh7mzpBsjMcR7YLndgk5kgk3iDIb4vdXtkoO07degg%3D%3D"><img src="images/logo_015a.png" width="240" height="120" alt=""></a><span><a href="#">淘宝商城</a></span></li>
				<li class="four" id="logo_016"><a href="#?alipay"><img src="images/logo_016a.png" width="240" height="120" alt=""></a><span><a href="#">支付宝</a></span></li>
			</ul>
		</dd>
		<dd style="display:none;">
			<!--游戏娱乐-->
			<ul>
				<li class="one" id="logo_001"><a href="#?3399/?fr=10009-1"><img src="images/logo_004d.png" width="240" height="120" alt=""></a><span><a href="#">3399小游戏</a></span></li>
				<li id="logo_002"><a href="#?oreg.jj.cn/othersite/sitereg_comm.html?siteId=12802"><img src="images/logo_002d.png" width="240" height="120" alt="JJ比赛"></a><span><a href="#">JJ比赛</a></span></li>
				<li id="logo_003"><a href="#?17173/"><img src="images/logo_003d.png" width="240" height="120" alt=""></a><span><a href="#">17173游戏</a></span></li>
				<li class="four" id="logo_004"><a href="#?4399/"><img src="images/logo_001d.png" width="240" height="120" alt="4399小游戏"></a><span><a href="#">4399小游戏</a></span></li>
				<li class="one" id="logo_005"><a href="#?hd.51wan/33288p14003q116j0.html"><img src="images/logo_005d.png" width="240" height="120" alt=""></a><span><a href="#">神仙道</a></span></li>
				<li id="logo_006"><a href="#?shandagames/web/"><img src="images/logo_006d.png" width="240" height="120" alt=""></a><span><a href="#">盛大游戏</a></span></li>
				<li id="logo_007"><a href="#?game.qq/"><img src="images/logo_007d.png" width="240" height="120" alt=""></a><span><a href="#">腾讯游戏</a></span></li>
				<li class="four" id="logo_008"><a href="#?nie.163/"><img src="images/logo_008d.png" width="240" height="120" alt=""></a><span><a href="#">网易游戏</a></span></li>
				<li class="one" id="logo_009"><a href="#?yinyuetai"><img src="images/logo_009d.png" width="240" height="120" alt=""></a><span><a href="#">音悦台mtv</a></span></li>
				<li id="logo_010"><a href="#?huaban"><img src="images/logo_010d.png" width="240" height="120" alt=""></a><span><a href="#">花瓣网</a></span></li>
				<li id="logo_011"><a href="#?v.6164/"><img src="images/logo_011d.png" width="240" height="120" alt=""></a><span><a href="#">V电影</a></span></li>
				<li class="four" id="logo_012"><a href="#?mtime"><img src="images/logo_012d.png" width="240" height="120" alt=""></a><span><a href="#">时光网</a></span></li>
				<li class="one" id="logo_013"><a href="#?book.6164/"><img src="images/logo_013d.png" width="240" height="120" alt=""></a><span><a href="#">言情小说网</a></span></li>
				<li id="logo_014"><a href="#?zongheng"><img src="images/logo_014d.png" width="240" height="120" alt=""></a><span><a href="#">纵横中文网</a></span></li>
				<li id="logo_015"><a href="#?douban.fm/"><img src="images/logo_015d.png" width="240" height="120" alt=""></a><span><a href="#">豆瓣FM</a></span></li>
				<li class="four" id="logo_016"><a href="#?qidian/"><img src="images/logo_016d.png" width="240" height="120" alt=""></a><span><a href="#">起点中文网</a></span></li>
			</ul>
		</dd>
		<dd style="display:none;">
			<!--实用工具-->
			<ul>
				<li class="one" id="logo_001"><a href="#?kuaidi100/"><img src="images/logo_016f.png" width="240" height="120" alt=""></a><span><a href="#">快递查询</a></span></li>
				<li id="logo_002"><a href="#?115/union/1054417"><img src="images/logo_002e.png" width="240" height="120" alt="115网盘"></a><span><a href="#">115网盘</a></span></li>
				<li id="logo_003"><a href="#?translate.google.hk/"><img src="images/logo_003e.png" width="240" height="120" alt=""></a><span><a href="">谷歌翻译</a></span></li>
				<li class="four" id="logo_004"><a href="#?weather.news.sina.cn/"><img src="images/logo_001e.png" width="240" height="120" alt="天气预报"></a><span><a href="#">天气预报</a></span></li>
				<li class="one" id="logo_005"><a href="#?p.yiqifa/c?s=72ab52bc&w=253302&c=297&i=19323&l=0&d=2756&e=win8&t=#?u.ctrip/union/redirect.aspx"><img src="images/logo_005e.png" width="240" height="120" alt=""></a><span><a href="#">机票酒店</a></span></li>
				<li id="logo_006"><a href="#?web.qq"><img src="images/logo_006e.png" width="240" height="120" alt=""></a><span><a href="#">Web QQ</a></span></li>
				<li id="logo_007"><a href="#?mail.163"><img src="images/logo_007e.png" width="240" height="120" alt=""></a><span><a href="#">网易邮箱</a></span></li>
				<li class="four" id="logo_008"><a href="#?9188/user/from.go?comeFrom=765h&backurl=#?9188/kaijiang/"><img src="images/logo_008e.png" width="240" height="120" alt=""></a><span><a href="#">彩票开奖</a></span></li>
				<li class="one" id="logo_009"><a href="#?p.yiqifa/c?s=26390d3a&w=253302&c=6451&i=19382&l=0&e=win8&t=#?tj.tieyou/gw.php"><img src="images/logo_009e.png" width="240" height="120" alt=""></a><span><a href="#">火车票订购</a></span></li>
				<li id="logo_010"><a href="#?map.baidu"><img src="images/logo_010e.png" width="240" height="120" alt=""></a><span><a href="#">百度地图</a></span></li>
				<li id="logo_011"><a href="#?10086.cn/"><img src="images/logo_011e.png" width="240" height="120" alt=""></a><span><a href="#">中国移动网上营业厅</a></span></li>
				<li class="four" id="logo_012"><a href="#?weizhangwang/"><img src="images/logo_012e.png" width="240" height="120" alt=""></a><span><a href="#">交通违章</a></span></li>
				<li class="one" id="logo_013"><a href="#?j.union.ijinshan/jump.php?u_key=552"><img src="images/logo_013e.png" width="240" height="120" alt=""></a><span><a href="#">金山毒霸</a></span></li>
				<li id="logo_014"><a href="#?8684.cn"><img src="images/logo_014e.png" width="240" height="120" alt=""></a><span><a href="#">公交火车查询</a></span></li>
				<li id="logo_015"><a href="#?maps.google.hk/"><img src="images/logo_015e.png" width="240" height="120" alt=""></a><span><a href="#">谷歌地图</a></span></li>
				<li class="four" id="logo_016"><a href="#?qq.ip138/day/"><img src="images/logo_016e.png" width="240" height="120" alt=""></a><span><a href="#">万年历</a></span></li>
			</ul>
		</dd>
		<dd style="display:none;">
			<!--影视资源-->
			<ul>
			<li class="one" id="logo_001"><a href="#?81baobao/"><img src="images/logo_baobao.png" width="240" height="120" alt=""></a><span><a href="#">八一宝宝儿歌下载</a></span></li>
			<li id="logo_002"><a href="#?verycd"><img src="images/logo_002f.png" width="240" height="120" alt="电驴"></a><span><a href="#">电驴资源</a></span></li>
			<li id="logo_003"><a href="#?ishare.iask.sina.cn/"><img src="images/logo_003f.png" width="240" height="120" alt=""></a><span><a href="#">新浪共享资料</a></span></li>
			<li class="four" id="logo_004"><a href="#?piaohua"><img src="images/logo_004f.png" width="240" height="120" alt=""></a><span><a href="#">飘花资源网</a></span></li>
			<li class="one" id="logo_005"><a href="#?dy2018"><img src="images/logo_005f.png" width="240" height="120" alt=""></a><span><a href="#">电影天堂</a></span></li>
			<li id="logo_006"><a href="#?daquan.xunlei"><img src="images/logo_006f.png" width="240" height="120" alt=""></a><span><a href="#">迅雷大全</a></span></li>
			<li id="logo_007"><a href="#?v.6164"><img src="images/logo_007f.png" width="240" height="120" alt=""></a><span><a href="#">好看的电影</a></span></li>
			<li class="four" id="logo_008"><a href="#?ffdy.cc"><img src="images/logo_008f.png" width="240" height="120" alt=""></a><span><a href="#">放放电影</a></span></li>
			<li class="one" id="logo_009"><a href="#?skycn"><img src="images/logo_009f.png" width="240" height="120" alt=""></a><span><a href="#">天空软件站</a></span></li>
			<li id="logo_010"><a href="#?newhua"><img src="images/logo_010f.png" width="240" height="120" alt=""></a><span><a href="#">华军软件园</a></span></li>
			<li id="logo_011"><a href="#?xiazaiba"><img src="images/logo_011f.png" width="240" height="120" alt=""></a><span><a href="#">下载吧</a></span></li>
			<li class="four" id="logo_012"><a href="#?7060"><img src="images/logo_012f.png" width="240" height="120" alt=""></a><span><a href="#">7060手机电影</a></span></li>
			<li class="one" id="logo_013"><a href="#?a67"><img src="images/logo_013f.png" width="240" height="120" alt=""></a><span>a67手机电影网</span></li>
			<li id="logo_014"><a href="#?y80s.net/"><img src="images/logo_014f.png" width="240" height="120" alt=""></a><span><a href="#">80s手机电影网</a></span></li>
			<li id="logo_015"><a href="#?txt99/"><img src="images/logo_015f.png" width="240" height="120" alt=""></a><span><a href="#">久久小说下载</a></span></li>
			<li class="four" id="logo_016"><a href="#?ziyuanhai/"><img src="images/logo_001f.png" width="240" height="120" alt="google"></a><span><a href="#">唐老鼠</a></span></li>
			</ul>
		</dd>
	</dl>
</div>
<!--logo区结束--> 
<!--左右箭头开始-->
<div class="prev"><img src="images/arr_left.png" width="31" height="67"></div>
<div class="next"><img src="images/arr_right.png" width="31" height="67"></div>
<!--左右箭头结束-->
</body>
</html>

CSS代码(metro.css):

@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;}
body{background:#0C6D37 url(../images/metro_bg.png) repeat center top;overflow:hidden;}
#top{height:39px;line-height:39px;width:100%;background:url(../images/top_bg.png) repeat-x left top;overflow:hidden;padding:15px 0;}
#top dl{width:990px;margin:0 auto;}
#top dl dt{float:left;background:url(../images/img_split.png) no-repeat 0 0;width:250px;height:40px;}
#top dl dt a{text-indent:-9999px;display:block;width:250px;height:40px;}
#top dl a{color:#ccc;font-size:12px;text-decoration:none;}
#top dl span{padding:0 10px;color:#ddd;font-size:12px;}
#top dl dd{float:right;}
#top dl dd a{display:block;float:left;text-indent:-9999px;margin:0 5px;_dispaly:inline;overflow:hidden;cursor:pointer;}
.a_index{width:53px;height:39px;background:url(../images/img_split.png) no-repeat -1px -96px;}
.a_index_h{width:53px;height:39px;background:url(../images/img_split.png) no-repeat -1px -175px;}
.a_mzdw{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -65px -96px;}
.a_mzdw_h{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -65px -175px;}
.a_spyy{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -162px -96px;}
.a_spyy_h{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -162px -175px;}
.a_xwzx{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -256px -96px;}
.a_xwzx_h{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -256px -175px;}
.a_gwtb{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -352px -96px;}
.a_gwtb_h{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -352px -175px;}
.a_yxyl{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -447px -96px;}
.a_yxyl_h{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -447px -175px;}
.a_sygj{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -541px -96px;}
.a_sygj_h{width:78px;height:39px;background:url(../images/img_split.png) no-repeat -541px -175px;}
.a_yszy{width:79px;height:39px;background:url(../images/img_split.png) no-repeat -636px -96px;}
.a_yszy_h{width:79px;height:39px;background:url(../images/img_split.png) no-repeat -636px -175px;}
.a_more{width:33px;height:39px;background:url(../images/img_split.png) no-repeat -740px -96px;}
#metro_box{width:990px;height:565px;overflow:hidden;margin:0 auto;}
.bg0{background:#93C5EA url(../images/metro_bg.png) repeat center top;}
.bg1{background:#93C5EA url(../images/bg1.jpg) repeat-x center top;}
.bg2{background:#bdbac5 url(../images/bg2.jpg) no-repeat center top;}
.bg3{background:#bdbac5 url(../images/bg3.jpg) no-repeat center top;}
.bg4{background:#bdbac5 url(../images/bg4.jpg) no-repeat center top;}
.bg5{background:#bdbac5 url(../images/bg5.jpg) repeat center top;}
.bg6{background:#bdbac5 url(../images/bg6.jpg) no-repeat center top;}
#metro_box dl dt{height:35px;line-height:35px;margin-bottom:20px;}
#metro_box dl dt h1{font-size:32px;font-family:"微软雅黑","黑体";color:#fff;font-weight:normal;float:left;}
#metro_box dl dt div{float:right;font-size:12px;}
.nav a{border-top:3px solid #fff;text-decoration:none;padding:3px;color:#000;font-family:"微软雅黑";cursor:pointer;}
.nav a:hover,#a_hover{border-top:3px solid #f60;color:#F60;font-weight:bold;}
#metro_box dl dd ul{width:990px;height:510px;overflow:hidden;}
#metro_box dl dd ul li{width:240px;height:120px;overflow:hidden;float:left;margin:3px;_margin:2px;_display:inline;padding:1px;opacity:0.9;filter:alpha(opacity=90);position:relative;}
#metro_box dl dd ul li span{display:none;}
#metro_box dl dd ul li span a{color:#fff;font-family:"微软雅黑";font-size:12px;text-decoration:none;}
#metro_box dl dd ul li:hover span{text-align:center;background:#000;height:20px;line-height:20px;opacity:0.4;filter:alpha(opacity=40);display:block;position:absolute;bottom:0;left:0;width:100%;}
#metro_box dl dd ul li a img{width:240px;height:120px;overflow:hidden;margin:0;padding:0;border:none;}
#metro_box dl dd ul li:hover{opacity:1;filter:alpha(opacity=100);padding:0px;border:1px dashed #fcfcfc;}
#metro_box dl dd ul li[class="one"]{margin-left:0;}
#metro_box dl dd ul li[class="four"]{margin-right:0}
#logo_001{background:#da562f;}
#logo_002{background:#00a6d0;}
#logo_003{background:#8ea300;}
#logo_004{background:#6db91b;}
#logo_005{background:#2a82ec;}
#logo_006{background:#00a21b;}
#logo_007{background:#5434af;}
#logo_008{background:#bc1c48;}
#logo_009{background:#6db91b;}
#logo_010{background:#623dc0;}
#logo_011{background:#d44a26;}
#logo_012{background:#019317;}
#logo_013{background:#00c47d;}
#logo_014{background:#00a6d0;}
#logo_015{background:#33a700;}
#logo_016{background:#00a6d0;}
#logo_013a{background:#343434;}
#logo_014a{background:#ffffff;}
#logo_015a{background:#B1002E;}
.prev,.next{width:31px;height:auto;cursor:pointer;}
.prev{float:left;}
.next{float:right;}

附件:下载该文件资源,减少时间成本(增值服务)