注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

仿firefox首页标签切换效果:css+js  

2013-08-07 19:46:58|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图:
仿firefox首页标签切换效果:css+js - 米欧studio - 米欧光影工作室
 
还存在的问题:
1)标签在鼠标离开的时候下方会出现横杠,改进方案:鼠标悬停之后增加一个 class 属性,其他的去掉这个属性;



html部分(和少量js代码):


<!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>仿Firefox首页</title>
<link rel="stylesheet" type="text/css" href="css/index22.css" />

<script language="javascript">
function apr(num){
//alert(obj.attr("data-cur"));
//obj.style.background="#f00";

for(var id =2;id<=5;id++)
{
var myID="node"+id;
if(id==num)
document.getElementById(myID).style.display="block";
else
document.getElementById(myID).style.display="none";
}

}

</script>


</head>

<body>





<!--内容-->
<div class="wrap">



<!--网址大全-->
<div id="parta">
<ul class="tab">
<li track-key="links_huohu123"><a href="http://www.huohu123.com/">网址大全</a></li>
<li data-cur="node2" onmouseover="apr(2)">常用网址</li>
<li data-cur="node3" onmouseover="apr(3)">资讯类</li>
<li data-cur="node4" onmouseover="apr(4)">购物类</li>
<li data-cur="node5" onmouseover="apr(5)">娱乐生活</li>
</ul>

<ul id="node2" style="display:block;">
<li><b>上部</b>
<ul id="node6" track-key="links_hot-upper">
<li><a href="http://www.baidu.com/index.php?tn=monline_5_dg" title="百 度">百 度</a></li>
<li><a href="http://i.firefoxchina.cn/parts/google_rdr.html" title="Google">Google</a></li>

<li id="child37"><a href="http://www.sina.com.cn/" title="新浪">新浪</a>
<ul id="node37">
<li><a href="http://news.sina.com.cn/" title="新闻">新闻</a></li>
<li><a href="http://weibo.com/?c=spr_web_sq_firefox_weibo_t001" title="微博">微博</a></li>
</ul>
</li>

<li><a href="http://www.163.com/" title="网 易">网 易</a></li>
<li id="child39"><a href="http://www.qq.com/" title="腾讯">腾讯</a>
<ul id="node39">
<li><a href="http://qzone.qq.com/" title="空间">空间</a></li>
</ul>
</li>

<li><a href="http://www.ifeng.com/" title="凤 凰 网">凤 凰 网</a></li>
<li><a href="http://cps.youku.com/redirect.html?id=00000292" title="优 酷 网">优 酷 网</a></li>
<li><a href="http://www.tudou.com/?union_id=100362_100001_01_01" title="土 豆 网">土 豆 网</a></li>
<li><a href="http://www.xinhuanet.com/" title="新 华 网">新 华 网</a></li>
<li><a href="http://cn.wsj.com" title="华尔街日报">华尔街日报</a></li>
<li><a href="http://www.cntv.cn/" title="C N T V">C N T V</a></li>
<li><a href="http://www.vogue.com.cn/" title="VOGUE时尚">VOGUE时尚</a></li>
<li><a href="http://www.ctrip.com" title="携程旅行网">携程旅行网</a></li>
<li><a href="http://www.soufun.com" title="搜 房 网">搜 房 网</a></li>
<li><a href="http://www.taobao.com/" title="淘 宝 网">淘 宝 网</a></li>
<li><a href="http://www.self.com.cn/" title="悦己女性网">悦己女性网</a></li>
<li><a href="http://www.4399.com/" title="4 3 9 9">4 3 9 9</a></li>
<li><a href="http://www.qunar.com/?ex_track=auto_50e674e3" title="去哪儿网">去哪儿网</a></li>
<li><a href="http://redirect.simba.taobao.com/" title="淘宝特卖">淘宝特卖</a></li>
<li><a href="http://s.click.taobao.com/" title="淘宝商城">淘宝商城</a></li>
<li><a href="http://www.amazon.cn/?source=Mozilla" title="亚 马 逊">亚 马 逊</a></li>
<li><a href="http://union.dangdang.com/" title="当 当 网">当 当 网</a></li>
<li><a href="http://www.1mall.com/2/?tracker_u=10977119545" title="1号商城">1号商城</a></li>
<li><a href="http://www.gome.com.cn/" title="国美在线">国美在线</a></li>
</ul>
</li><!--end of 上部-->

<li><b>下部</b>
<ul id="node7" track-key="links_hot-lower">
<li><a href="http://www.vancl.com/" title="凡客诚品">凡客诚品</a></li>
<li><a href="http://www.mop.com/" title="猫 扑">猫 扑</a></li>
<li><a href="http://www.kaixin001.com/" title="开 心 网">开 心 网</a></li>
<li><a href="http://www.renren.com/" title="人 人 网">人 人 网</a></li>
<li><a href="http://www.tianya.cn/" title="天涯社区">天涯社区</a></li>
<li><a href="http://tj.ad12345.com/?id=108" title="在线英语">在线英语</a></li>
<li><a href="http://www.jumei.com/?referer=huohu" title="聚美优品">聚美优品</a></li>
<li><a href="http://www.nuomi.com/" title="糯米网团购">糯米网团购</a></li>
<li><a href="http://hotel.elong.com/?banid=firefox" title="艺龙酒店">艺龙酒店</a></li>
<li><a href="http://www.meilele.com/?se=fx!Xa" title="美乐乐家居">美乐乐家居</a></li>
<li><a href="http://www.dianping.com" title="大众点评团">大众点评团</a></li>
<li><a href="http://www.tuniu.com/" title="途牛旅游">途牛旅游</a></li>
<li><a href="http://www.vipshop.com" title="唯 品 会">唯 品 会</a></li>
<li><a href="http://union.moonbasa.com/" title="梦 芭 莎">梦 芭 莎</a></li>
<li><a href="http://www.yihaodian.com?tracker_u=10977119545" title="1 号 店">1 号 店</a></li>
<li><a href="http://outlets.xiu.com/" title="品牌折扣店">品牌折扣店</a></li>
<li><a href="http://chuangshi.qq.com/" title="创世小说">创世小说</a></li>
<li><a href="http://www.zhe800.com/" title="折800">折800</a></li>
<li><a href="http://count.chanet.com.cn/" title="易 迅 网">易 迅 网</a></li>
<li><a href="http://click.lergao.com/" title="苏宁易购">苏宁易购</a></li>
<li><a href="http://shujia.xdf.cn/" title="新东方教育">新东方教育</a></li>
<li><a href="http://cps.yintai.com/">银 泰 网</a></li>
<li><a href="http://www.lefeng.com/" title="乐 蜂 网">乐 蜂 网</a></li>
<li><a href="http://www.meituan.com" title="美 团 网">美 团 网</a></li>
</ul>
</li></ul>


<ul id="node3" track-key="links_zixun">
<li><a href="http://www.huohu123.com/channel/channel_43.html" title="[综 合]">[综 合]</a>
<ul id="node8">
<li><a href="http://news.sina.com.cn" title="新浪新闻">新浪新闻</a></li>
<li><a href="http://news.163.com/" title="网易新闻">网易新闻</a></li>
<li><a href="http://news.qq.com" title="腾讯新闻">腾讯新闻</a></li>
<li><a href="http://news.ifeng.com/" title="凤凰资讯">凤凰资讯</a></li>
<li><a href="http://www.xinhuanet.com" title="新 华 网">新 华 网</a></li>
<li><a href="http://www.people.com.cn" title="人 民 网">人 民 网</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_37.html" title="[财 经]">[财 经]</a>
<ul id="node9">
<li><a href="http://www.hexun.com/" title="和讯财经">和讯财经</a></li>
<li><a href="http://finance.sina.com.cn/" title="新浪财经">新浪财经</a></li>
<li><a href="http://cn.wsj.com" title="华尔街日报">华尔街日报</a></li>
<li><a href="http://www.eastmoney.com/" title="东方财富">东方财富</a></li>
<li><a href="http://www.jrj.com.cn/?from=91000" title="金 融 界">金 融 界</a></li>
<li><a href="http://www.591hx.com/" title="华讯财经">华讯财经</a></li>
</ul></li><li><a href="http://www.huohu123.com/channel/channel_45.html" title="[社 区]">[社 区]</a>
<ul id="node10">
<li><a href="http://weibo.com/?c=spr_web_sq_firefox_weibo_t001" title="新浪微博">新浪微博</a></li>
<li><a href="http://t.163.com" title="网易微博">网易微博</a></li>
<li><a href="http://t.qq.com/" title="腾讯微博">腾讯微博</a></li>
<li><a href="http://tieba.baidu.com" title="百度贴吧">百度贴吧</a></li>
<li><a href="http://qzone.qq.com/" title="QQ空间">QQ空间</a></li>
<li><a href="http://www.renren.com/" title="人 人 网">人 人 网</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_39.html" title="[体 育]">[体 育]</a>
<ul id="node11">
<li><a href="http://sports.sina.com.cn/" title="新浪体育">新浪体育</a></li>
<li><a href="http://sports.163.com/" title="网易体育">网易体育</a></li>
<li><a href="http://www.hupu.com/" title="虎扑体育">虎扑体育</a></li>
<li><a href="http://china.nba.com/" title="NBA中文网">NBA中文网</a></li>
<li><a href="http://titan24.com/" title="体 坛 网">体 坛 网</a></li>
<li><a href="http://sports.sohu.com/" title="搜狐体育">搜狐体育</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_14.html" title="[汽 车]">[汽 车]</a>
<ul id="node12">
<li><a href="http://auto.sina.com.cn/" title="新浪汽车">新浪汽车</a></li>
<li><a href="http://www.pcauto.com.cn/" title="太平洋汽车">太平洋汽车</a></li>
<li><a href="http://www.autohome.com.cn/" title="汽车之家">汽车之家</a></li>
<li><a href="http://www.yiche.com" title="易 车 网">易 车 网</a></li>
<li><a href="http://www.iautos.cn/" title="第一车网">第一车网</a></li>
<li><a href="http://www.xcar.com.cn/" title="爱卡汽车">爱卡汽车</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_34.html" title="[军 事]">[军 事]</a>
<ul id="node13"><li><a href="http://military.china.com/zh_cn/" title="中华网军事">中华网军事</a></li>
<li><a href="http://mil.news.sina.com.cn/" title="新浪军事">新浪军事</a></li>
<li><a href="http://mil.chinaiiss.com/" title="战 略 网">战 略 网</a></li>
<li><a href="http://www.miercn.com/" title="米尔军情">米尔军情</a></li>
<li><a href="http://www.tiexue.net/" title="铁 血 网">铁 血 网</a></li>
<li><a href="http://war.news.163.com/" title="网易军事">网易军事</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_40.html" title="[数 码]">[数 码]</a>
<ul id="node15"><li><a href="http://www.zol.com.cn/" title="中关村在线">中关村在线</a></li>
<li><a href="http://www.pconline.com.cn/" title="太平洋电脑网">太平洋电脑网</a></li>
<li><a href="http://www.pcpop.com/" title="泡 泡 网">泡 泡 网</a></li>
<li><a href="http://www.skycn.com/" title="天空软件">天空软件</a></li>
<li><a href="http://www.cnmo.com/" title="手机中国">手机中国</a></li>
<li><a href="http://www.imobile.com.cn/" title="手机之家">手机之家</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_41.html" title="[时 尚]">[时 尚]</a>
<ul id="node16"><li><a href="http://www.rayli.com.cn/" title="瑞丽女性网">瑞丽女性网</a></li>
<li><a href="http://www.vogue.com.cn" title="VOGUE时尚">VOGUE时尚</a></li>
<li><a href="http://www.gq.com.cn/" title="GQ男士">GQ男士</a></li>
<li><a href="http://at.yoka.com/" title="Yoka">Yoka</a></li>
<li><a href="http://www.self.com.cn" title="悦己女性网">悦己女性网</a></li>
<li><a href="http://www.27.cn/" title="爱丽女性网">爱丽女性网</a></li>
</ul></li>
</ul>


<ul id="node4" track-key="links_gouwu"><li>
<a href="http://www.huohu123.com/channel/shopping.html" title="[综 合]">[综 合]</a>
<ul id="node17"><li><a href="http://www.taobao.com" title="淘宝热卖">淘宝热卖</a></li>
<li><a href="http://mall.taobao.com%2F" title="淘宝商城">淘宝商城</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=135949&u=&e=" title="易 迅 网">易 迅 网</a></li>
<li><a href="http://www.amazon.cn/?source=Mozilla" title="亚 马 逊">亚 马 逊</a></li>
<li><a href="http://union.dangdang.com/" title="当 当 网">当 当 网</a></li>
<li><a href="http://www.1mall.com/2/?tracker_u=10977119545" title="1号商城">1号商城</a></li>
</ul>
</li>

<li><a href="http://www.huohu123.com/channel/shopping.html" title="[名 牌]">[名 牌]</a>
<ul id="node18"><li><a href="http://www.vancl.com/?source=mozilla" title="凡客诚品">凡客诚品</a></li>
<li><a href="http://cps.yintai.com/" title="银 泰 网">银 泰 网</a></li>
<li><a href="http://www.xiu.com/?from=10641236" title="走 秀 网">走 秀 网</a></li>
<li><a href="http://www.vipshop.com" title="唯 品 会">唯 品 会</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=299682&u=&e=" title="Esprit">Esprit</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=299708&u=&e=" title="尚品奥莱">尚品奥莱</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/shopping.html" title="[电 器]">[电 器]</a>
<ul id="node19"><li><a href="http://www.1mall.com/2/?tracker_u=10977119545" title="1号商城">1号商城</a></li>
<li><a href="http://www.gome.com.cn/ec/homeus/?cmpid=dh_huohu_mz" title="国美在线">国美在线</a></li>
<li><a href="http://www.amazon.cn/mn/" title="亚马逊电器">亚马逊电器</a></li>
<li><a href="http://count.chanet.com.cn/" title="库巴电器">库巴电器</a></li>
<li><a href="http://category.dangdang.com/electronic" title="当当电器">当当电器</a></li>
<li><a href="http://www.suning.com/" title="苏宁易购">苏宁易购</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/shopping.html" title="[妆 扮]">[妆 扮]</a>
<ul id="node20"><li><a href="http://www.lefeng.com/" title="乐 蜂 网">乐 蜂 网</a></li>
<li><a href="http://outlets.xiu.com/" title="品牌折扣店">品牌折扣店</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=321716&d=191334&u=&e=" title="趣天麦网">趣天麦网</a></li>
<li><a href="http://count.chanet.com.cn/" title="Gap官网">Gap官网</a></li>
<li><a href="http://count.chanet.com.cn/" title="兰缪内衣">兰缪内衣</a></li>
<li><a href="http://count.chanet.com.cn/" title="No5时尚">No5时尚</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/shopping.html" title="[生 活]">[生 活]</a>
<ul id="node21"><li><a href="http://www.yihaodian.com" title="1 号 店">1 号 店</a></li>
<li><a href="http://www.meilele.com/?se=fx!Xa" title="美乐乐家居">美乐乐家居</a></li>
<li><a href="http://www.youtx.com/" title="游天下短租">游天下短租</a></li>
<li><a href="http://www.111.com.cn/" title="1号药店">1号药店</a></li>
<li><a href="http://click.lergao.com/" title="聚尚折扣">聚尚折扣</a></li>
<li><a href="http://www.womai.com" title="我 买 网">我 买 网</a></li>
</ul></li>

<li><a href="http://pindao.huoban.taobao.com/" title="[淘 宝]">[淘 宝]</a>
<ul id="node22"><li><a href="http://s.click.taobao.com/t_9?p=mm_28347190_2425761_9313996&l=http%3A%2F%2Fmall.taobao.com%2F" title="淘宝商城">淘宝商城</a></li>
<li><a href="http://pindao.huoban.taobao.com/channel/huangguan.htm?pid=mm_28347190_2425761_9313996" title="皇冠店铺">皇冠店铺</a></li>
<li><a href="http://www.taobao.com/go/chn/tbk_channel/man.php?pid=mm_45206115_4162006_13506570&eventid=101330" title="男人热卖">男人热卖</a></li>
<li><a href="http://www.taobao.com/go/chn/tbk_channel/lady.php?pid=mm_28347190_2425761_9313996&mode=86" title="热卖女装">热卖女装</a></li>
<li><a href="http://pindao.huoban.taobao.com/channel/beauty.htm?pid=mm_28347190_2425761_9313996" title="美容护肤">美容护肤</a></li>
<li><a href="http://pindao.huoban.taobao.com/channel/jewelry.htm?pid=mm_28347190_2425761_9313996" title="饰品鞋包">饰品鞋包</a></li>
</ul></li>

<li><a href="http://tg.huohu123.com/" title="[团 购]">[团 购]</a>
<ul id="node23"><li><a href="http://r.union.meituan.com/url/visit/?a=1&key=yKmOefsJ5QiYS98RvpLzMN2qxT7BFhr4&url=http://www.meituan.com" title="美 团 网">美 团 网</a></li>
<li><a href="http://www.jumei.com/?referer=huohu" title="聚美优品">聚美优品</a></li>
<li><a href="http://www.nuomi.com/?utm_source=Firefox&utm_medium=Total&utm_campaign=daohang&cid=003401" title="糯 米 网">糯 米 网</a></li>
<li><a href="http://www.lashou.com/?union_pid=627821738&union_sign=55" title="拉 手 网">拉 手 网</a></li>
<li><a href="http://uni.out.tuan800.com/jump?url=http://t.dianping.com&us=huohu123kz" title="大众点评团">大众点评团</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=289635&u=&e=" title="NALA团">NALA团</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/shopping.html" title="[其 他]">[其 他]</a>
<ul id="node24"><li><a href="http://union.moonbasa.com/rd/rd.aspx?e=-999&adtype=0&unionid=mozilla&subunionid=&other=&url=http%3a%2f%2fwww.moonbasa.com%2f%3ftype%3d0%26cn%3d13960%26other%3dunionid%3amozilla%7cadtype%3a0%7cadid%3a-999%7cadwords%3a%26adsiteid%3d10000007" title="梦 芭 莎">梦 芭 莎</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=92051&u=&e=" title="新华书店">新华书店</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=347614&u=&e=&url=http%3A%2F%2Fwww.masamaso.com" title="玛萨玛索">玛萨玛索</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=133156&u=&e=" title="凡客V+">凡客V+</a></li>
<li><a href="http://count.chanet.com.cn/click.cgi?a=433588&d=216816&u=&e=" title="红 孩 子">红 孩 子</a></li>
<li><a href="http://www.fangtx.com/" title="房 天 下">房 天 下</a></li>
</ul></li>
</ul>


<ul id="node5" track-key="links_ylsh"><li>
<a href="http://www.huohu123.com/channel/channel_33.html" title="[视 频]">[视 频]</a>
<ul id="node26"><li><a href="http://cps.youku.com/redirect.html?id=00000292" title="优 酷 网">优 酷 网</a></li>
<li><a href="http://www.tudou.com/?union_id=100362_100001_01_01" title="土 豆 网">土 豆 网</a></li>
<li><a href="http://www.iqiyi.com" title="爱 奇 艺">爱 奇 艺</a></li>
<li><a href="http://v.ifeng.com/" title="凤凰视频">凤凰视频</a></li>
<li><a href="http://video.sina.com.cn/" title="新浪视频">新浪视频</a></li>
<li><a href="http://www.ku6.com?from=firefox" title="酷 6 网">酷 6 网</a></li>
</ul></li>

<li><a href="http://web.4399.com/?cid=3117" title="[游 戏]">[游 戏]</a>
<ul id="node27"><li><a href="http://new.adtools.cn/clickcrecord.action?code=OTIyOQ==&url=6037" title="TOUCH炫舞">TOUCH炫舞</a></li>
<li><a href="http://www.17173.com/" title="17173">17173</a></li>
<li><a href="http://www.4399.com/" title="4 3 9 9">4 3 9 9</a></li>
<li><a href="http://web.4399.com/?cid=3117" title="网页游戏">网页游戏</a></li>
<li><a href="http://xzt.ztgame.com/index.shtml" title="新 征 途">新 征 途</a></li>
<li><a href="http://www.chinagames.net/open/dpqk/20130502_4/2911.htm" title="斗破乾坤">斗破乾坤</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_35.html" title="[音 乐]">[音 乐]</a>
<ul id="node28"><li><a href="http://music.baidu.com" title="百度音乐">百度音乐</a></li>
<li><a href="http://www.top100.cn/" title="巨鲸音乐">巨鲸音乐</a></li>
<li><a href="http://www.koowo.com" title="酷我音乐">酷我音乐</a></li>
<li><a href="http://www.1ting.com/" title="一听音乐">一听音乐</a></li>
<li><a href="http://www.omusic.cc" title="海洋音乐">海洋音乐</a></li>
<li><a href="http://yue.sina.com.cn/" title="新浪音乐">新浪音乐</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_36.html" title="[小 说]">[小 说]</a>
<ul id="node29"><li><a href="http://www.qidian.com/" title="起点中文网">起点中文网</a></li>
<li><a href="http://www.jjwxc.net/" title="晋江文学城">晋江文学城</a></li>
<li><a href="http://www.zongheng.com" title="纵横中文网">纵横中文网</a></li>
<li><a href="http://chuangshi.qq.com/" title="创世小说">创世小说</a></li>
<li><a href="http://www.douban.com/" title="豆 瓣 网">豆 瓣 网</a></li>
<li><a href="http://www.readnovel.com/" title="小说阅读网">小说阅读网</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_27.html" title="[笑 话]">[笑 话]</a>
<ul id="node30"><li><a href="http://www.qiushibaike.com/" title="糗事百科">糗事百科</a></li>
<li><a href="http://joke.qq.com/" title="腾讯-笑话">腾讯-笑话</a></li>
<li><a href="http://www.u148.net/" title="有意思吧">有意思吧</a></li>
<li><a href="http://www.pengfu.com/" title="捧腹网">捧腹网</a></li>
<li><a href="http://www.xxhh.net/" title="嘻嘻哈哈">嘻嘻哈哈</a></li>
<li><a href="http://list.mp3.baidu.com/top/xiangshengquyi.html" title="相声小品荟萃">相声小品荟萃</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_50.html" title="[生 活]">[生 活]</a>
<ul id="node31"><li><a href="http://www.soufun.com" title="搜 房 网">搜 房 网</a></li>
<li><a href="http://u.ctrip.com/union/CtripRedirect.aspx?TypeID=2&Allianceid=1381&sid=1625&OUID=&jumpUrl=http://www.ctrip.com" title="携程旅游">携程旅游</a></li>
<li><a href="http://www.tuniu.com/?p=13895&cmpid=mkt_03028301&utm_campaign=Lifestyle&utm_source=firefoxchina&utm_medium=referral" title="途牛旅游">途牛旅游</a></li>
<li><a href="http://www.17u.cn/FlightQuery.aspx?refid=22146371" title="同程机票">同程机票</a></li>
<li><a href="http://www.elong.com/?banid=firefox" title="艺龙酒店">艺龙酒店</a></li>
<li><a href="http://jipiao.kuxun.cn/?fromid=Kwqm-S1133381-T1071231" title="酷讯旅游">酷讯旅游</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_42.html" title="[交 友]">[交 友]</a>
<ul id="node32"><li><a href="http://reg.jiayuan.com/st/?id=354419&url=http://reg.jiayuan.com" title="世纪佳缘">世纪佳缘</a></li>
<li><a href="http://www.baihe.com/?policy=1&Channel=fox&Code=140113" title="百 合 网">百 合 网</a></li>
<li><a href="http://www.zhenai.com/901943.html" title="珍爱婚恋网">珍爱婚恋网</a></li>
<li><a href="http://www.7651.com/reg.html?st=ck&wf=bb&sid=firefox" title="红 娘 网">红 娘 网</a></li>
<li><a href="http://p.yiqifa.com/c?s=c9609b47&w=87791&c=248&i=422&l=0&d=7622&e=&t=http://www.juedui100.com/" title="绝对100婚恋">绝对100婚恋</a></li>
<li><a href="http://www.51taonan.com" title="淘 男 网">淘 男 网</a></li>
</ul></li>

<li><a href="http://www.huohu123.com/channel/channel_49.html" title="[其 他]">[其 他]</a>
<ul id="node33"><li><a href="https://www.alipay.com/" title="支 付 宝">支 付 宝</a></li>
<li><a href="http://tj.ad12345.com/?id=113" title="英语天天练">英语天天练</a></li>
<li><a href="http://shujia.xdf.cn/?utm_campaign=jituan_shujia_daohanghuohu&utm_medium=jituan_shujia&utm_source=daohanghuohu_cpm&utm_content=&utm_term=" title="新东方教育">新东方教育</a></li>
<li><a href="http://www.ccb.com/" title="建设银行">建设银行</a></li>
<li><a href="http://www.ea3w.com/" title="万维家电网">万维家电网</a></li>
<li><a href="http://flight.qunar.com/?ex_track=auto_50e7d953" title="特价机票">特价机票</a></li>
</ul></li>
</ul>

</div>

</div>

</body>
</html>




css部分


@charset "utf-8";
/* CSS Document */

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
ul,ol{list-style:none;}

body{color:#777;font:14px Arial; background:#eee;}

a{text-decoration:none;}
a:link,a:visited{color:#07519A;}
a:hover,a:active{color:#ff0000;}


.wrap{width:960px;margin:0px auto;}
.wrap:after{clear:both;content:".";display:block;height:0;visibility:hidden;}



#parta{padding:0px 2px 2px 2px;margin-bottom:10px;border:1px solid #cde6fe;width:694px;height:278px;background-color:#deeefd;}
#parta,.right{border:1px solid #9ccefd;}



.tab{height:26px;display:block;clear:both;background-color:#EFF7FE;padding:0px 0px 1px 0px;font-size:12px;border-bottom:1px solid #deeefd;}

.tab li{float:left;clear:none;height:26px;line-height:26px;text-align:center;border-right:1px solid #deeefd;padding:1px 15px 0px 15px;}

.tab li:hover{background-color:#fff;}

.tab li:hover, .tab li:after{background-color:#fff;border-bottom:0px;padding-bottom:1px;color:#999;cursor:default;}


#node2,#node3,#node4,#node5{float:left;clear:both;width:684px;height:240px;overflow:hidden;display:none;background-color:#fff;line-height:30px;padding:5px;} /*重要*/

#node2{display:block;}
#node2 li b{display:none;height:0px;margin:0px;padding:0px;font-size:0px;}
#node6,#node7{height:112px;}
#node6{border-bottom:1px dotted #CDE6FE;padding-bottom:8px;}
#node7{padding-top:8px;}
#node6 li,#node7 li,#mylinks li{float:left;clear:none;width:114px;text-align:center;height:28px;line-height:28px;}
#node3 ul,#node4 ul,#node5 ul{float:right;*float:left;clear:none;}
#node3 ul li,#node4 ul li,#node5 ul li{float:left;clear:none;width:104px;*width:101px;text-align:center;}
#node3 > li:nth-child(even),#node4 > li:nth-child(even),#node5 > li:nth-child(even){background-color:#F9F9F9;}
#child37 a{float:left;}

#node37{float:right;clear:none;}
#node37 li{float:left;clear:none;width:32px;background-position:-116px -224px;padding-left:10px;}
#node3 > li,#node4 > li,#node5 > li{float:left;clear:both;padding-left:15px;width:669px;}




.tab{background-color:#deeefd;border-bottom:1px solid #9ccefd;padding-left:8px;font-size:14px;}

.tab li{border:1px solid #9ccefd;background-color:#eff7fe;border-radius:3px 3px 0px 0px;margin:2px 4px 0px 0px;height:23px;line-height:22px;}







refer:
  评论这张
 
阅读(2144)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017