以下是 仿2014新版天猫分类导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.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>仿2014新版天猫分类导航菜单代码</title>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="tmall_box">
<div class="menu">
<ul>
<li><a href="#">品牌街</a></li>
<li><a href="#">喵鲜生</a></li>
<li><a href="#">积分聚乐部</a></li>
<li><a href="#">电器城</a></li>
<li><a href="#">新首发</a></li>
<li><a href="#">天猫超市</a></li>
</ul>
</div>
<div id="tmall_nav">
<!--左侧栏目开始-->
<div class="tmall_cat_nav fl">
<div class="tmall_mod_title">商品服务分类</div>
<ul class="cate_nav">
<li>
<div class="cat_0_nav">
<s class="cat-nav-icon fp-iconfont">㑑</s>
精选市场
</div>
</li>
<li>
<div class="cat_1_nav">
<s class="cat-nav-icon fp-iconfont">㑙</s>
<a href="#">女装</a> / <a href="#">内衣</a>
</div>
</li>
<li>
<div class="cat_2_nav">
<s class="cat-nav-icon fp-iconfont">㑬</s>
<a href="#">男装</a> / <a href="#">运动</a> / <a href="#">户外</a>
</div>
</li>
<li>
<div class="cat_3_nav">
<s class="cat-nav-icon fp-iconfont">㑭</s>
<a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a>
</div>
</li>
<li>
<div class="cat_4_nav">
<s class="cat-nav-icon fp-iconfont">㑜</s>
<a href="#">化妆品</a> / <a href="#">个人护理</a>
</div>
</li>
<li>
<div class="cat_5_nav">
<s class="cat-nav-icon fp-iconfont">㑗</s>
<a href="#">手机数码</a> / <a href="#">电脑办公</a>
</div>
</li>
<li>
<div class="cat_6_nav">
<s class="cat-nav-icon fp-iconfont">㑖</s>
<a href="#">母婴玩具</a>
</div>
</li>
<li>
<div class="cat_7_nav">
<s class="cat-nav-icon fp-iconfont">㑕</s>
<a href="#">食品</a>
</div>
</li>
<li>
<div class="cat_8_nav">
<s class="cat-nav-icon fp-iconfont">㑔</s>
<a href="#">大家电</a> / <a href="#">生活电器</a>
</div>
</li>
<li>
<div class="cat_9_nav">
<s class="cat-nav-icon fp-iconfont">㑞</s>
<a href="#">家具建材</a>
</div>
</li>
<li>
<div class="cat_10_nav">
<s class="cat-nav-icon fp-iconfont">㑒</s>
<a href="#">珠宝饰品</a> / <a href="#">手表眼镜</a>
</div>
</li>
<li>
<div class="cat_11_nav">
<s class="cat-nav-icon fp-iconfont">㑝</s>
<a href="#">全新整车</a> / <a href="#">汽车配件</a>
</div>
</li>
<li>
<div class="cat_12_nav">
<s class="cat-nav-icon fp-iconfont">㑮</s>
<a href="#">家纺</a> / <a href="#">家饰</a>
</div>
</li>
<li>
<div class="cat_13_nav">
<s class="cat-nav-icon fp-iconfont">㑠</s>
<a href="#">医药保健</a>
</div>
</li>
<li>
<div class="cat_14_nav">
<s class="cat-nav-icon fp-iconfont">㑟</s>
<a href="#">居家百货</a>
</div>
</li>
<li>
<div class="cat_15_nav">
<s class="cat-nav-icon fp-iconfont">㑡</s>
<a href="#">图书音像</a>
</div>
</li>
</ul>
</div>
<!--左侧栏目结束-->
<!--右侧内容开始-->
<div class="tmall_cat_content fr">
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_0">
<ul class="cat_label_list market_list clearfix">
<li><a href="#">女装</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">男装</a></li>
<li><a href="#">美妆</a></li>
<li><a href="#">内衣</a></li>
<li><a href="#">母婴</a></li>
<li><a href="#">箱包</a></li>
<li><a href="#">家装</a></li>
<li><a href="#">户外</a></li>
<li><a href="#">医药</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">书城</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">鲜花</a></li>
</ul>
<h3 class="cat_label_title">主题购</h3>
<ul class="cat_label_list">
<li><a href="#">新衣过年</a></li>
<li class="second_label"><a href="#">达人说菜</a></li>
<li><a href="#">科技生活</a></li>
<li class="second_label"><a href="#">春季备孕</a></li>
<li><a href="#">安全守护</a></li>
<li class="second_label"><a href="#">香聚一堂</a></li>
</ul>
<a class="market_banner" href="#"><img src="images/0.png" /></a>
</div>
<div class="fl cat_banner">
<ul class="cat_banner_pic">
<li><a href="#"><img src="images/1.jpg" width="459" height="482" /></a></li>
<li><a href="#"><img src="images/2.jpg" width="459" height="482" /></a></li>
<li><a href="#"><img src="images/3.jpg" width="459" height="482" /></a></li>
</ul>
<a class="prev_pic" href="javascript:void(0)"></a>
<a class="next_pic" href="javascript:void(0)"></a>
<div class="num">
<ul></ul>
</div>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_1">
<h3 class="cat_title">女装/内衣</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">新品频道</a></li>
<li class="second_label"><a href="#">女装频道</a></li>
<li><a href="#">品牌特卖</a></li>
<li class="second_label"><a href="#">T恤</a></li>
<li><a href="#">连衣裙</a></li>
<li class="second_label"><a href="#">半身裙</a></li>
<li><a href="#">衬衫</a></li>
<li class="second_label"><a href="#">针织衫</a></li>
<li><a href="#">毛衣</a></li>
<li class="second_label"><a href="#">羊绒衫</a></li>
<li><a href="#">毛呢外套</a></li>
<li class="second_label"><a href="#">羊绒大衣</a></li>
<li><a href="#">小西装</a></li>
<li class="second_label"><a href="#">风衣</a></li>
<li><a href="#">裤子</a></li>
<li class="second_label"><a href="#">牛仔裤</a></li>
<li><a href="#">短外套</a></li>
<li class="second_label"><a href="#">卫衣</a></li>
<li><a href="#">羽绒服</a></li>
<li class="second_label"><a href="#">棉衣</a></li>
<li><a href="#">大牌文胸</a></li>
<li class="second_label"><a href="#">男士内衣</a></li>
<li><a href="#">睡衣上新</a></li>
<li class="second_label"><a href="#">内衣频道</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/7.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/8.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/9.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_2">
<h3 class="cat_title">男装/运动/户外</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">衬衫</a></li>
<li class="second_label"><a href="#">T恤</a></li>
<li><a href="#">夹克</a></li>
<li class="second_label"><a href="#">牛仔裤</a></li>
<li><a href="#">休闲裤</a></li>
<li class="second_label"><a href="#">针织衫</a></li>
<li><a href="#">西服</a></li>
<li class="second_label"><a href="#">卫衣</a></li>
<li><a href="#">皮衣</a></li>
<li class="second_label"><a href="#">风衣</a></li>
<li><a href="#">棉衣</a></li>
<li class="second_label"><a href="#">羽绒服</a></li>
<li><a href="#">西服套装</a></li>
<li class="second_label"><a href="#">西裤</a></li>
<li><a href="#">运动鞋</a></li>
<li class="second_label"><a href="#">运动服</a></li>
<li><a href="#">篮球鞋</a></li>
<li class="second_label"><a href="#">跑步鞋</a></li>
<li><a href="#">冲锋衣裤</a></li>
<li class="second_label"><a href="#">登山鞋</a></li>
<li><a href="#">登山包</a></li>
<li class="second_label"><a href="#">自行车</a></li>
<li><a href="#">跑步机</a></li>
<li class="second_label"><a href="#">健身用品</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/24.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_3">
<h3 class="cat_title">女鞋/男鞋/箱包</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">时尚女鞋</a></li>
<li class="second_label"><a href="#">流行男鞋</a></li>
<li><a href="#">热卖新品</a></li>
<li class="second_label"><a href="#">男休闲鞋</a></li>
<li><a href="#">深口单鞋</a></li>
<li class="second_label"><a href="#">正装皮鞋</a></li>
<li><a href="#">浅口单鞋</a></li>
<li class="second_label"><a href="#">男士单鞋</a></li>
<li><a href="#">中跟单鞋</a></li>
<li class="second_label"><a href="#">男帆布鞋</a></li>
<li><a href="#">气质短靴</a></li>
<li class="second_label"><a href="#">男士潮鞋</a></li>
<li><a href="#">中筒靴</a></li>
<li class="second_label"><a href="#">高帮鞋</a></li>
<li><a href="#">潮流女包</a></li>
<li class="second_label"><a href="#">双肩包</a></li>
<li><a href="#">女士钱包</a></li>
<li class="second_label"><a href="#">拉杆箱</a></li>
<li><a href="#">真皮女包</a></li>
<li class="second_label"><a href="#">皮带</a></li>
<li><a href="#">斜挎女包</a></li>
<li class="second_label"><a href="#">围巾</a></li>
<li><a href="#">斜挎男包</a></li>
<li class="second_label"><a href="#">大牌底价</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="fl banner-grid-b4" href="#"><img src="images/27.jpg" /></a>
<a class="fl banner-grid-b5" href="#"><img src="images/29.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_4">
<h3 class="cat_title">天猫美妆</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">面部护肤</a></li>
<li class="second_label"><a href="#">护理套装</a></li>
<li><a href="#">面膜</a></li>
<li class="second_label"><a href="#">乳液面霜</a></li>
<li><a href="#">身体护理</a></li>
<li class="second_label"><a href="#">眼部护理</a></li>
<li><a href="#">化妆水</a></li>
<li class="second_label"><a href="#">面部精华</a></li>
<li><a href="#">BB霜</a></li>
<li class="second_label"><a href="#">男士护理</a></li>
<li><a href="#">精油芳疗</a></li>
<li class="second_label"><a href="#">香水</a></li>
<li><a href="#">洁面</a></li>
<li class="second_label"><a href="#">手部保养</a></li>
<li><a href="#">美容工具</a></li>
<li class="second_label"><a href="#">胸部护理</a></li>
<li><a href="#">美甲</a></li>
<li class="second_label"><a href="#">彩妆套装</a></li>
<li><a href="#">卸妆</a></li>
<li class="second_label"><a href="#">隔离</a></li>
<li><a href="#">洗发沐浴</a></li>
<li class="second_label"><a href="#">卫生巾</a></li>
<li><a href="#">假发</a></li>
<li class="second_label"><a href="#">染发烫发</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a href="#"><img src="images/30.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_5">
<h3 class="cat_title">手机数码</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">大屏手机</a></li>
<li class="second_label"><a href="#">笔记本</a></li>
<li><a href="#">双卡双待</a></li>
<li class="second_label"><a href="#">平板电脑</a></li>
<li><a href="#">热卖新机</a></li>
<li class="second_label"><a href="#">台式机</a></li>
<li><a href="#">千元智能</a></li>
<li class="second_label"><a href="#">DIY电脑</a></li>
<li><a href="#">合约购机</a></li>
<li class="second_label"><a href="#">显示器</a></li>
<li><a href="#">云os手机</a></li>
<li class="second_label"><a href="#">打印机</a></li>
<li><a href="#">旗舰手机</a></li>
<li class="second_label"><a href="#">路由器</a></li>
<li><a href="#">拍照手机</a></li>
<li class="second_label"><a href="#">电子词典</a></li>
<li><a href="#">单反</a></li>
<li class="second_label"><a href="#">拍立得</a></li>
<li><a href="#">移动电源</a></li>
<li class="second_label"><a href="#">苹果配件</a></li>
<li><a href="#">U盘</a></li>
<li class="second_label"><a href="#">移动硬盘</a></li>
<li><a href="#">耳机耳麦</a></li>
<li class="second_label"><a href="#">高清盒子</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/31.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_6">
<h3 class="cat_title">天猫母婴</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">牛奶粉</a></li>
<li class="second_label"><a href="#">羊奶粉</a></li>
<li><a href="#">婴儿钙</a></li>
<li class="second_label"><a href="#">DHA</a></li>
<li><a href="#">纸尿裤</a></li>
<li class="second_label"><a href="#">奶瓶</a></li>
<li><a href="#">宝宝洗护</a></li>
<li class="second_label"><a href="#">推车</a></li>
<li><a href="#">婴儿床</a></li>
<li class="second_label"><a href="#">睡袋抱被</a></li>
<li><a href="#">裤子</a></li>
<li class="second_label"><a href="#">衬衫</a></li>
<li><a href="#">裙子</a></li>
<li class="second_label"><a href="#">儿童内衣</a></li>
<li><a href="#">童装</a></li>
<li class="second_label"><a href="#">童鞋</a></li>
<li><a href="#">婴幼玩具</a></li>
<li class="second_label"><a href="#">早教</a></li>
<li><a href="#">电动遥控</a></li>
<li class="second_label"><a href="#">毛绒布艺</a></li>
<li><a href="#">孕妇装</a></li>
<li class="second_label"><a href="#">托腹裤</a></li>
<li><a href="#">防辐射</a></li>
<li class="second_label"><a href="#">内衣内裤</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a href="#"><img src="images/32.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_7">
<h3 class="cat_title">食品</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">美国馆</a></li>
<li class="second_label"><a href="#">澳洲馆</a></li>
<li><a href="#">台湾馆</a></li>
<li class="second_label"><a href="#">泰国馆</a></li>
<li><a href="#">进口美食</a></li>
<li class="second_label"><a href="#">大枣</a></li>
<li><a href="#">坚果</a></li>
<li class="second_label"><a href="#">牛肉干</a></li>
<li><a href="#">糖果</a></li>
<li class="second_label"><a href="#">巧克力</a></li>
<li><a href="#">饼干</a></li>
<li class="second_label"><a href="#">开心果</a></li>
<li><a href="#">碧根果</a></li>
<li class="second_label"><a href="#">干果</a></li>
<li><a href="#">普洱</a></li>
<li class="second_label"><a href="#">罐头</a></li>
<li><a href="#">茶叶</a></li>
<li class="second_label"><a href="#">铁观音</a></li>
<li><a href="#">水果</a></li>
<li class="second_label"><a href="#">海鲜</a></li>
<li><a href="#">白酒</a></li>
<li class="second_label"><a href="#">葡萄酒</a></li>
<li><a href="#">黄酒</a></li>
<li class="second_label"><a href="#">洋酒</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a href="#"><img src="images/33.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_8">
<h3 class="cat_title">家用电器</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">电视机</a></li>
<li class="second_label"><a href="#">电饭煲</a></li>
<li><a href="#">热水器</a></li>
<li class="second_label"><a href="#">电热水壶</a></li>
<li><a href="#">洗衣机</a></li>
<li class="second_label"><a href="#">净水器</a></li>
<li><a href="#">冰箱</a></li>
<li class="second_label"><a href="#">榨汁机</a></li>
<li><a href="#">烟灶套装</a></li>
<li class="second_label"><a href="#">吸尘器</a></li>
<li><a href="#">电热水器</a></li>
<li class="second_label"><a href="#">扫地机</a></li>
<li><a href="#">空调</a></li>
<li class="second_label"><a href="#">空净氧吧</a></li>
<li><a href="#">家庭影院</a></li>
<li class="second_label"><a href="#">暖风取暖</a></li>
<li><a href="#">油烟机</a></li>
<li class="second_label"><a href="#">剃须刀</a></li>
<li><a href="#">燃气灶</a></li>
<li class="second_label"><a href="#">电吹风</a></li>
<li><a href="#">消毒柜</a></li>
<li class="second_label"><a href="#">足浴器</a></li>
<li><a href="#">4K高清</a></li>
<li class="second_label"><a href="#">卷直发器</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/34.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_9">
<h3 class="cat_title">天猫家装</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">灯具</a></li>
<li class="second_label"><a href="#">柜类</a></li>
<li><a href="#">卫浴</a></li>
<li class="second_label"><a href="#">沙发</a></li>
<li><a href="#">开关插座</a></li>
<li class="second_label"><a href="#">床类</a></li>
<li><a href="#">壁纸</a></li>
<li class="second_label"><a href="#">桌类</a></li>
<li><a href="#">地板</a></li>
<li class="second_label"><a href="#">坐具</a></li>
<li><a href="#">厨房</a></li>
<li class="second_label"><a href="#">床垫</a></li>
<li><a href="#">涂料</a></li>
<li class="second_label"><a href="#">架类</a></li>
<li><a href="#">门类</a></li>
<li class="second_label"><a href="#">书房</a></li>
<li><a href="#">浴霸</a></li>
<li class="second_label"><a href="#">几类</a></li>
<li><a href="#">安防监控</a></li>
<li class="second_label"><a href="#">案台</a></li>
<li><a href="#">五金工具</a></li>
<li class="second_label"><a href="#">玄关</a></li>
<li><a href="#">装修</a></li>
<li class="second_label"><a href="#">设计</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/35.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_10">
<h3 class="cat_title">珠宝配饰</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">珠宝</a></li>
<li class="second_label"><a href="#">黄金</a></li>
<li><a href="#">钻石</a></li>
<li class="second_label"><a href="#">珍珠</a></li>
<li><a href="#">翡翠</a></li>
<li class="second_label"><a href="#">彩宝</a></li>
<li><a href="#">玉石</a></li>
<li class="second_label"><a href="#">铂金</a></li>
<li><a href="#">饰品</a></li>
<li class="second_label"><a href="#">手链</a></li>
<li><a href="#">项链</a></li>
<li class="second_label"><a href="#">手镯</a></li>
<li><a href="#">发饰</a></li>
<li class="second_label"><a href="#">项坠</a></li>
<li><a href="#">戒指</a></li>
<li class="second_label"><a href="#">耳饰</a></li>
<li><a href="#">男表</a></li>
<li class="second_label"><a href="#">银条</a></li>
<li><a href="#">女表</a></li>
<li class="second_label"><a href="#">男士配饰</a></li>
<li><a href="#">太阳镜</a></li>
<li class="second_label"><a href="#">ZIPPO</a></li>
<li><a href="#">眼镜</a></li>
<li class="second_label"><a href="#">瑞士军刀</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/36.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_11">
<h3 class="cat_title">汽车/用品</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">自主品牌</a></li>
<li class="second_label"><a href="#">美系品牌</a></li>
<li><a href="#">欧系品牌</a></li>
<li class="second_label"><a href="#">日系品牌</a></li>
<li><a href="#">座垫</a></li>
<li class="second_label"><a href="#">空气净化</a></li>
<li><a href="#">脚垫</a></li>
<li class="second_label"><a href="#">车衣</a></li>
<li><a href="#">座套</a></li>
<li class="second_label"><a href="#">装饰条</a></li>
<li><a href="#">安全座椅</a></li>
<li class="second_label"><a href="#">雨刮器</a></li>
<li><a href="#">后备箱垫</a></li>
<li class="second_label"><a href="#">轮胎</a></li>
<li><a href="#">方向盘套</a></li>
<li class="second_label"><a href="#">车灯</a></li>
<li><a href="#">DVD导航</a></li>
<li class="second_label"><a href="#">洗车机</a></li>
<li><a href="#">GPS</a></li>
<li class="second_label"><a href="#">机油</a></li>
<li><a href="#">记录仪</a></li>
<li class="second_label"><a href="#">车蜡</a></li>
<li><a href="#">充气泵</a></li>
<li class="second_label"><a href="#">摩托装备</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/37.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_12">
<h3 class="cat_title">家纺家饰</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">床上用品</a></li>
<li class="second_label"><a href="#">四件套</a></li>
<li><a href="#">厚冬被</a></li>
<li class="second_label"><a href="#">羽绒被</a></li>
<li><a href="#">蚕丝被</a></li>
<li class="second_label"><a href="#">枕头</a></li>
<li><a href="#">记忆枕</a></li>
<li class="second_label"><a href="#">床垫</a></li>
<li><a href="#">毛毯</a></li>
<li class="second_label"><a href="#">儿童床品</a></li>
<li><a href="#">婚庆床品</a></li>
<li class="second_label"><a href="#">三件套</a></li>
<li><a href="#">被套</a></li>
<li class="second_label"><a href="#">毛浴巾</a></li>
<li><a href="#">棉拖鞋</a></li>
<li class="second_label"><a href="#">沙发垫</a></li>
<li><a href="#">十字绣</a></li>
<li class="second_label"><a href="#">窗帘</a></li>
<li><a href="#">地毯</a></li>
<li class="second_label"><a href="#">抱枕</a></li>
<li><a href="#">防尘罩</a></li>
<li class="second_label"><a href="#">装饰画</a></li>
<li><a href="#">装饰摆件</a></li>
<li class="second_label"><a href="#">喵喵花园</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/38.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_13">
<h3 class="cat_title">天猫医药</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">左旋肉碱</a></li>
<li class="second_label"><a href="#">蜂蜜</a></li>
<li><a href="#">酵素</a></li>
<li class="second_label"><a href="#">枸杞</a></li>
<li><a href="#">维生素E</a></li>
<li class="second_label"><a href="#">阿胶</a></li>
<li><a href="#">维生素C</a></li>
<li class="second_label"><a href="#">燕窝</a></li>
<li><a href="#">葡萄籽</a></li>
<li class="second_label"><a href="#">冬虫夏草</a></li>
<li><a href="#">蛋白质粉</a></li>
<li class="second_label"><a href="#">人参</a></li>
<li><a href="#">胶原蛋白</a></li>
<li class="second_label"><a href="#">石斛枫斗</a></li>
<li><a href="#">鱼油</a></li>
<li class="second_label"><a href="#">养生茶</a></li>
<li><a href="#">螺旋藻</a></li>
<li class="second_label"><a href="#">补益安神</a></li>
<li><a href="#">肠胃用药</a></li>
<li class="second_label"><a href="#">鸿茅药酒</a></li>
<li><a href="#">血压仪</a></li>
<li class="second_label"><a href="#">隐形眼镜</a></li>
<li><a href="#">避孕套</a></li>
<li class="second_label"><a href="#">情趣玩具</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/39.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_14">
<h3 class="cat_title">居家百货</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">保温杯</a></li>
<li class="second_label"><a href="#">锅具</a></li>
<li><a href="#">瓷器餐具</a></li>
<li class="second_label"><a href="#">茶具</a></li>
<li><a href="#">保鲜用品</a></li>
<li class="second_label"><a href="#">酒具</a></li>
<li><a href="#">厨房工具</a></li>
<li class="second_label"><a href="#">咖啡器具</a></li>
<li><a href="#">拖把</a></li>
<li class="second_label"><a href="#">收纳</a></li>
<li><a href="#">晾衣架</a></li>
<li class="second_label"><a href="#">足浴桶</a></li>
<li><a href="#">置物架</a></li>
<li class="second_label"><a href="#">垃圾桶</a></li>
<li><a href="#">婚庆用品</a></li>
<li class="second_label"><a href="#">创意礼品</a></li>
<li><a href="#">晴雨伞</a></li>
<li class="second_label"><a href="#">缝纫机</a></li>
<li><a href="#">防护用品</a></li>
<li class="second_label"><a href="#">纸品</a></li>
<li><a href="#">清洁剂</a></li>
<li class="second_label"><a href="#">香薰除臭</a></li>
<li><a href="#">狗狗主粮</a></li>
<li class="second_label"><a href="#">宠物用品</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/16.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/17.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/18.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/19.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/20.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/21.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a href="#"><img src="images/40.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/21jpg.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/22.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/23.jpg" width="190" height="160" /></a></li>
</ul>
</div>
<div class="cat_pannel clearfix">
<div class="fl cat_detail grid_col_15">
<h3 class="cat_title">天猫图书</h3>
<ul class="cat_label_list clearfix">
<li><a href="#">小说</a></li>
<li class="second_label"><a href="#">生活</a></li>
<li><a href="#">言情</a></li>
<li class="second_label"><a href="#">旅行</a></li>
<li><a href="#">悬疑</a></li>
<li class="second_label"><a href="#">美食</a></li>
<li><a href="#">历史</a></li>
<li class="second_label"><a href="#">人文社科</a></li>
<li><a href="#">科幻</a></li>
<li class="second_label"><a href="#">哲学宗教</a></li>
<li><a href="#">文学</a></li>
<li class="second_label"><a href="#">财经励志</a></li>
<li><a href="#">传记</a></li>
<li class="second_label"><a href="#">经济</a></li>
<li><a href="#">动漫</a></li>
<li class="second_label"><a href="#">管理</a></li>
<li><a href="#">童书</a></li>
<li class="second_label"><a href="#">励志</a></li>
<li><a href="#">育儿</a></li>
<li class="second_label"><a href="#">考试</a></li>
<li><a href="#">绘本</a></li>
<li class="second_label"><a href="#">音像</a></li>
<li><a href="#">孕期</a></li>
<li class="second_label"><a href="#">杂志</a></li>
</ul>
<div class="cat_brand">
<ul class="cat_slide_brand">
<li>
<a href="#"><img src="images/10.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/11.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/12.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/13.jpg" width="90" height="40" /></a>
</li>
<li>
<a href="#"><img src="images/14.jpg" width="90" height="40" /></a>
<a href="#"><img src="images/15.jpg" width="90" height="40" /></a>
</li>
</ul>
<ul class="cat_slide_nav">
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
</div>
<div class="fl cat_banner">
<a class="banner-grid-b1" href="#"><img src="images/41.jpg" /></a>
<a class="fl banner-grid-b2" href="#"><img src="images/25.jpg" /></a>
<a class="fl banner-grid-b3" href="#"><img src="images/26.jpg" /></a>
</div>
<ul class="fl cat_small_banner">
<li><a href="#"><img src="images/4.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="190" height="160" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="190" height="160" /></a></li>
</ul>
</div>
</div>
<!--右侧内容结束-->
</div>
</div>
<script type="text/javascript">
$(".cat_banner").hover(function(){
$(this).find(".prev_pic,.next_pic").fadeTo("show",0.2);
},function(){
$(this).find(".prev_pic,.next_pic").hide();
})
$(".prev_pic,.next_pic").hover(function(){
$(this).fadeTo("show",0.5);
},function(){
$(this).fadeTo("show",0.2);
})
$(".cat_banner").slide({
titCell:".num ul" ,
mainCell:".cat_banner_pic" ,
effect:"left",
prevCell:".prev_pic",
nextCell:".next_pic",
autoPlay:true,
interTime:3000,
delayTime:500,
autoPage:true
});
$(".cat_small_banner li").hover(function(){
$(this).animate({"left":-5},200);
},function(){
$(this).animate({"left":0},200);
});
$(".cat_brand").slide({
titCell:".cat_slide_nav li",
mainCell:".cat_slide_brand",
effect:"left",
autoPlay:true,
interTime:3000,
delayTime:700
});
$("#tmall_nav").slide({
titCell:".cate_nav li",
mainCell:".tmall_cat_content",
autoPlay:true,
interTime:7400,
delayTime:0
});
</script>
</body>
</html>
JS代码(jquery.SuperSlide.2.1.1.js):
/*! * SuperSlide v2.1.1 * 轻松解决网站大部分特效展示问题 * 详尽信息请看官网：http://www.SuperSlide2.com/ * * Copyright 2011-2013,大话主席 * * 请尊重原创，保留头部版权 * 在保留版权的前提下可应用于个人或商业用途 * v2.1.1：修复当调用多个SuperSlide，并设置returnDefault:true 时返回defaultIndex索引错误 */
!function(a){
a.fn.slide=function(b){
return a.fn.slide.defaults={
type:"slide",effect:"fade",autoPlay:!1,delayTime:500,interTime:2500,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"swing",startFun:null,endFun:null,switchLoad:null,playStateCell:".playState",mouseOverStop:!0,defaultPlay:!0,returnDefault:!1}
,this.each(function(){
var c=a.extend({
}
,a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevCell,d),g=a(c.nextCell,d),h=a(c.pageStateCell,d),i=a(c.playStateCell,d),j=a(c.titCell,d),k=j.size(),l=a(c.mainCell,d),m=l.children().size(),n=c.switchLoad,o=a(c.targetCell,d),p=parseInt(c.defaultIndex),q=parseInt(c.delayTime),r=parseInt(c.interTime);
parseInt(c.triggerTime);
var Q,t=parseInt(c.scroll),u=parseInt(c.vis),v="false"==c.autoPlay||0==c.autoPlay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autoPage||0==c.autoPage?!1:!0,y="false"==c.pnLoop||0==c.pnLoop?!1:!0,z="false"==c.mouseOverStop||0==c.mouseOverStop?!1:!0,A="false"==c.defaultPlay||0==c.defaultPlay?!1:!0,B="false"==c.returnDefault||0==c.returnDefault?!1:!0,C=0,D=0,E=0,F=0,G=c.easing,H=null,I=null,J=null,K=c.titOnClassName,L=j.index(d.find("."+K)),M=p=-1==L?p:L,N=p,O=p,P=m>=u?0!=m%t?m%t:t:0,R="leftMarquee"==e||"topMarquee"==e?!0:!1,S=function(){
a.isFunction(c.startFun)&&c.startFun(p,k,d,a(c.titCell,d),l,o,f,g)}
,T=function(){
a.isFunction(c.endFun)&&c.endFun(p,k,d,a(c.titCell,d),l,o,f,g)}
,U=function(){
j.removeClass(K),A&&j.eq(N).addClass(K)}
;
if("menu"==c.type)return A&&j.removeClass(K).eq(p).addClass(K),j.hover(function(){
Q=a(this).find(c.targetCell);
var b=j.index(a(this));
I=setTimeout(function(){
switch(p=b,j.removeClass(K).eq(p).addClass(K),S(),e){
case"fade":Q.stop(!0,!0).animate({
opacity:"show"}
,q,G,T);
break;
case"slideDown":Q.stop(!0,!0).animate({
height:"show"}
,q,G,T)}
}
,c.triggerTime)}
,function(){
switch(clearTimeout(I),e){
case"fade":Q.animate({
opacity:"hide"}
,q,G);
break;
case"slideDown":Q.animate({
height:"hide"}
,q,G)}
}
),B&&d.hover(function(){
clearTimeout(J)}
,function(){
J=setTimeout(U,q)}
),void 0;
if(0==k&&(k=m),R&&(k=2),x){
if(m>=u)if("leftLoop"==e||"topLoop"==e)k=0!=m%t?(0^m/t)+1:m/t;
else{
var V=m-u;
k=1+parseInt(0!=V%t?V/t+1:V/t),0>=k&&(k=1)}
else k=1;
j.html("");
var W="";
if(1==c.autoPage||"true"==c.autoPage)for(var X=0;
k>X;
X++)W+="<li>"+(X+1)+"</li>";
else for(var X=0;
k>X;
X++)W+=c.autoPage.replace("$",X+1);
j.html(W);
var j=j.children()}
if(m>=u){
l.children().each(function(){
a(this).width()>E&&(E=a(this).width(),D=a(this).outerWidth(!0)),a(this).height()>F&&(F=a(this).height(),C=a(this).outerHeight(!0))}
);
var Y=l.children(),Z=function(){
for(var a=0;
u>a;
a++)Y.eq(a).clone().addClass("clone").appendTo(l);
for(var a=0;
P>a;
a++)Y.eq(m-a-1).clone().addClass("clone").prependTo(l)}
;
switch(e){
case"fold":l.css({
position:"relative",width:D,height:C}
).children().css({
position:"absolute",width:E,left:0,top:0,display:"none"}
);
break;
case"top":l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
height:'+u*C+'px"></div>').css({
top:-(p*t)*C,position:"relative",padding:"0",margin:"0"}
).children().css({
height:F}
);
break;
case"left":l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
width:'+u*D+'px"></div>').css({
width:m*D,left:-(p*t)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0"}
).children().css({
"float":"left",width:E}
);
break;
case"leftLoop":case"leftMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
width:'+u*D+'px"></div>').css({
width:(m+u+P)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(P+p*t)*D}
).children().css({
"float":"left",width:E}
);
break;
case"topLoop":case"topMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
height:'+u*C+'px"></div>').css({
height:(m+u+P)*C,position:"relative",padding:"0",margin:"0",top:-(P+p*t)*C}
).children().css({
height:F}
)}
}
var $=function(a){
var b=a*t;
return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b}
,_=function(b){
var c=function(c){
for(var d=c;
u+c>d;
d++)b.eq(d).find("img["+n+"]").each(function(){
var b=a(this);
if(b.attr("src",b.attr(n)).removeAttr(n),l.find(".clone")[0])for(var c=l.children(),d=0;
d<c.size();
d++)c.eq(d).find("img["+n+"]").each(function(){
a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeAttr(n)}
)}
)}
;
switch(e){
case"fade":case"fold":case"top":case"left":case"slideDown":c(p*t);
break;
case"leftLoop":case"topLoop":c(P+$(O));
break;
case"leftMarquee":case"topMarquee":var d="leftMarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftMarquee"==e?D:C,g=P;
if(0!=d%f){
var h=Math.abs(0^d/f);
g=1==p?P+h:P+h-1}
c(g)}
}
,ab=function(a){
if(!A||M!=p||a||R){
if(R?p>=1?p=1:0>=p&&(p=0):(O=p,p>=k?p=0:0>p&&(p=k-1)),S(),null!=n&&_(l.children()),o[0]&&(Q=o.eq(p),null!=n&&_(o),"slideDown"==e?(o.not(Q).stop(!0,!0).slideUp(q),Q.slideDown(q,G,function(){
l[0]||T()}
)):(o.not(Q).stop(!0,!0).hide(),Q.animate({
opacity:"show"}
,q,function(){
l[0]||T()}
))),m>=u)switch(e){
case"fade":l.children().stop(!0,!0).eq(p).animate({
opacity:"show"}
,q,G,function(){
T()}
).siblings().hide();
break;
case"fold":l.children().stop(!0,!0).eq(p).animate({
opacity:"show"}
,q,G,function(){
T()}
).siblings().animate({
opacity:"hide"}
,q,G);
break;
case"top":l.stop(!0,!1).animate({
top:-p*t*C}
,q,G,function(){
T()}
);
break;
case"left":l.stop(!0,!1).animate({
left:-p*t*D}
,q,G,function(){
T()}
);
break;
case"leftLoop":var b=O;
l.stop(!0,!0).animate({
left:-($(O)+P)*D}
,q,G,function(){
-1>=b?l.css("left",-(P+(k-1)*t)*D):b>=k&&l.css("left",-P*D),T()}
);
break;
case"topLoop":var b=O;
l.stop(!0,!0).animate({
top:-($(O)+P)*C}
,q,G,function(){
-1>=b?l.css("top",-(P+(k-1)*t)*C):b>=k&&l.css("top",-P*C),T()}
);
break;
case"leftMarquee":var c=l.css("left").replace("px","");
0==p?l.animate({
left:++c}
,0,function(){
l.css("left").replace("px","")>=0&&l.css("left",-m*D)}
):l.animate({
left:--c}
,0,function(){
l.css("left").replace("px","")<=-(m+P)*D&&l.css("left",-P*D)}
);
break;
case"topMarquee":var d=l.css("top").replace("px","");
0==p?l.animate({
top:++d}
,0,function(){
l.css("top").replace("px","")>=0&&l.css("top",-m*C)}
):l.animate({
top:--d}
,0,function(){
l.css("top").replace("px","")<=-(m+P)*C&&l.css("top",-P*C)}
)}
j.removeClass(K).eq(p).addClass(K),M=p,y||(g.removeClass("nextStop"),f.removeClass("prevStop"),0==p&&f.addClass("prevStop"),p==k-1&&g.addClass("nextStop")),h.html("<span>"+(p+1)+"</span>/"+k)}
}
;
A&&ab(!0),B&&d.hover(function(){
clearTimeout(J)}
,function(){
J=setTimeout(function(){
p=N,A?ab():"slideDown"==e?Q.slideUp(q,U):Q.animate({
opacity:"hide"}
,q,U),M=p}
,300)}
);
var bb=function(a){
H=setInterval(function(){
w?p--:p++,ab()}
,a?a:r)}
,cb=function(a){
H=setInterval(ab,a?a:r)}
,db=function(){
z||(clearInterval(H),bb())}
,eb=function(){
(y||p!=k-1)&&(p++,ab(),R||db())}
,fb=function(){
(y||0!=p)&&(p--,ab(),R||db())}
,gb=function(){
clearInterval(H),R?cb():bb(),i.removeClass("pauseState")}
,hb=function(){
clearInterval(H),i.addClass("pauseState")}
;
if(v?R?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(R&&(w?p--:p++),i.addClass("pauseState")),i.click(function(){
i.hasClass("pauseState")?gb():hb()}
),"mouseover"==c.trigger?j.hover(function(){
var a=j.index(this);
I=setTimeout(function(){
p=a,ab(),db()}
,c.triggerTime)}
,function(){
clearTimeout(I)}
):j.click(function(){
p=j.index(this),ab(),db()}
),R){
if(g.mousedown(eb),f.mousedown(fb),y){
var ib,jb=function(){
ib=setTimeout(function(){
clearInterval(H),cb(0^r/10)}
,150)}
,kb=function(){
clearTimeout(ib),clearInterval(H),cb()}
;
g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}
"mouseover"==c.trigger&&(g.hover(eb,function(){
}
),f.hover(fb,function(){
}
))}
else g.click(eb),f.click(fb)}
)}
}
(jQuery),jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{
def:"easeOutQuad",swing:function(a,b,c,d,e){
return jQuery.easing[jQuery.easing.def](a,b,c,d,e)}
,easeInQuad:function(a,b,c,d,e){
return d*(b/=e)*b+c}
,easeOutQuad:function(a,b,c,d,e){
return-d*(b/=e)*(b-2)+c}
,easeInOutQuad:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c}
,easeInCubic:function(a,b,c,d,e){
return d*(b/=e)*b*b+c}
,easeOutCubic:function(a,b,c,d,e){
return d*((b=b/e-1)*b*b+1)+c}
,easeInOutCubic:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c}
,easeInQuart:function(a,b,c,d,e){
return d*(b/=e)*b*b*b+c}
,easeOutQuart:function(a,b,c,d,e){
return-d*((b=b/e-1)*b*b*b-1)+c}
,easeInOutQuart:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c}
,easeInQuint:function(a,b,c,d,e){
return d*(b/=e)*b*b*b*b+c}
,easeOutQuint:function(a,b,c,d,e){
return d*((b=b/e-1)*b*b*b*b+1)+c}
,easeInOutQuint:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c}
,easeInSine:function(a,b,c,d,e){
return-d*Math.cos(b/e*(Math.PI/2))+d+c}
,easeOutSine:function(a,b,c,d,e){
return d*Math.sin(b/e*(Math.PI/2))+c}
,easeInOutSine:function(a,b,c,d,e){
return-d/2*(Math.cos(Math.PI*b/e)-1)+c}
,easeInExpo:function(a,b,c,d,e){
return 0==b?c:d*Math.pow(2,10*(b/e-1))+c}
,easeOutExpo:function(a,b,c,d,e){
return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c}
,easeInOutExpo:function(a,b,c,d,e){
return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c}
,easeInCirc:function(a,b,c,d,e){
return-d*(Math.sqrt(1-(b/=e)*b)-1)+c}
,easeOutCirc:function(a,b,c,d,e){
return d*Math.sqrt(1-(b=b/e-1)*b)+c}
,easeInOutCirc:function(a,b,c,d,e){
return(b/=e/2)<1?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c}
,easeInElastic:function(a,b,c,d,e){
var f=1.70158,g=0,h=d;
if(0==b)return c;
if(1==(b/=e))return c+d;
if(g||(g=.3*e),h<Math.abs(d)){
h=d;
var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c}
,easeOutElastic:function(a,b,c,d,e){
var f=1.70158,g=0,h=d;
if(0==b)return c;
if(1==(b/=e))return c+d;
if(g||(g=.3*e),h<Math.abs(d)){
h=d;
var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c}
,easeInOutElastic:function(a,b,c,d,e){
var f=1.70158,g=0,h=d;
if(0==b)return c;
if(2==(b/=e/2))return c+d;
if(g||(g=e*.3*1.5),h<Math.abs(d)){
h=d;
var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
return 1>b?-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c:.5*h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+d+c}
,easeInBack:function(a,b,c,d,e,f){
return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c}
,easeOutBack:function(a,b,c,d,e,f){
return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c}
,easeInOutBack:function(a,b,c,d,e,f){
return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c}
,easeInBounce:function(a,b,c,d,e){
return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c}
,easeOutBounce:function(a,b,c,d,e){
return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}
,easeInOutBounce:function(a,b,c,d,e){
return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}
}
);
CSS代码(style.css):
/*css重置*/
*{padding:0;margin:0;}
ul{list-style:none;}
img{border:0 none;}
a{blr:expression(this.onFocus=this.blur());outline:none;}
.clearfix:after{content:" ";clear:both;height:0;visibility:hidden;display:block;}
.clearfix{*zoom:1;}
.fl{float:left;}
.fr{float:right;}
/*字体图标*/
@font-face{font-family:fp-font;src:url(../fonts/font_1.eot);src:url(../fonts/font_1.eot?#iefix) format('embedded-opentype'),url(../fonts/font_2.woff) format('woff'),url(../fonts/font_3.ttf) format('truetype'),url(../fonts/font_4.svg#svgFontName) format('svg')}
.fp-iconfont{font-family:fp-font;}
.cat-nav-icon{display:inline-block;*display:inline;*zoom:1;width:40px;margin-right:3px;text-align:right;text-decoration:none;font-size:16px;}
.tmall_box{width:991px;margin:25px auto;}
.tmall_box .menu ul{height:29px;line-height:29px;border-bottom:1px #CCCCCC solid;padding-left:190px;}
.tmall_box .menu ul li{float:left;}
.tmall_box .menu ul li a{color:#000000;font-size:14px;font-weight:bold;text-decoration:none;padding:0 20px 0 20px;}
.tmall_cat_nav{width:190px;height:537px;position:relative;top:-30px;}
.tmall_cat_nav .tmall_mod_title{width:190px;height:30px;line-height:30px;color:#fff;text-align:center;font-weight:bold;background:#000000;}
.cate_nav{font-size:12px;color:#000000;}
.cate_nav li{height:30px;line-height:30px;font-family:'宋体';}
.cate_nav li a{color:#000000;font-size:12px;text-decoration:none;}
.cate_nav li a:hover{text-decoration:underline;}
.tmall_cat_content{width:800px;height:483px;}
.tmall_cat_content,.cat_pannel .cat_banner{border-right:1px #E5E5E5 solid;}
.cat_pannel .cat_detail{width:130px;height:461px;padding:10px;position:relative;}
.cat_pannel .market_banner{display:block;width:170px;height:140px;position:absolute;bottom:-21px;left:-30px;}
.cat_pannel .cat_label_list{padding-left:10px;}
.cat_pannel .cat_label_list li{width:50px;height:25px;line-height:25px;float:left;}
.cat_pannel .cat_label_list li.second_label{padding-left:12px;}
.cat_pannel .cat_label_list li a{color:#FFFFFF;font-size:12px;text-decoration:none;}
.cat_pannel .cat_label_list li a:hover{text-decoration:underline;}
.cat_pannel .market_list{width:140px;padding-left:10px;}
.cat_pannel .market_list li{width:50px;height:34px;line-height:34px;text-align:center;margin-right:10px;border-bottom:1px #CE3132 solid;}
.cat_pannel .market_list li a,.cat_pannel h3.cat_title{font-weight:bold;font-size:14px;}
.cat_pannel h3.cat_label_title{font-size:12px;color:#E4A8A3;text-align:center;padding:15px 0 8px 0;}
.cat_pannel h3.cat_title{color:#FFFFFF;text-align:center;height:30px;line-height:23px;}
.cat_pannel .cat_title{margin-bottom:10px;}
.cat_pannel .grid_col_1 .cat_title{border-bottom:1px #D64F74 solid;}
.cat_pannel .grid_col_2 .cat_title{border-bottom:1px #66B0D2 solid;}
.cat_pannel .grid_col_3 .cat_title{border-bottom:1px #9F6EA1 solid;}
.cat_pannel .grid_col_4 .cat_title{border-bottom:1px #D14F88 solid;}
.cat_pannel .grid_col_5 .cat_title{border-bottom:1px #4E81D5 solid;}
.cat_pannel .grid_col_6 .cat_title{border-bottom:1px #F15A6A solid;}
.cat_pannel .grid_col_7 .cat_title{border-bottom:1px #F88F44 solid;}
.cat_pannel .grid_col_8 .cat_title{border-bottom:1px #6998E6 solid;}
.cat_pannel .grid_col_9 .cat_title{border-bottom:1px #DA6542 solid;}
.cat_pannel .grid_col_10 .cat_title{border-bottom:1px #CFB8A1 solid;}
.cat_pannel .grid_col_11 .cat_title{border-bottom:1px #9EA6C2 solid;}
.cat_pannel .grid_col_12 .cat_title{border-bottom:1px #C1CA5F solid;}
.cat_pannel .grid_col_13 .cat_title{border-bottom:1px #58CA9D solid;}
.cat_pannel .grid_col_14 .cat_title{border-bottom:1px #88B463 solid;}
.cat_pannel .grid_col_15 .cat_title{border-bottom:1px #54A9BD solid;}
.cat_pannel .cat_brand{position:relative;height:101px;width:120px;padding-top:13px;margin:10px 0 0 5px;overflow:hidden;}
.cat_pannel .grid_col_1 .cat_brand{border-top:1px #D64F74 dotted;}
.cat_pannel .grid_col_2 .cat_brand{border-top:1px #66B0D2 dotted;}
.cat_pannel .grid_col_3 .cat_brand{border-top:1px #9F6EA1 dotted;}
.cat_pannel .grid_col_4 .cat_brand{border-top:1px #D14F88 dotted;}
.cat_pannel .grid_col_5 .cat_brand{border-top:1px #4E81D5 dotted;}
.cat_pannel .grid_col_6 .cat_brand{border-top:1px #F15A6A dotted;}
.cat_pannel .grid_col_7 .cat_brand{border-top:1px #F88F44 dotted;}
.cat_pannel .grid_col_8 .cat_brand{border-top:1px #6998E6 dotted;}
.cat_pannel .grid_col_9 .cat_brand{border-top:1px #DA6542 dotted;}
.cat_pannel .grid_col_10 .cat_brand{border-top:1px #CFB8A1 dotted;}
.cat_pannel .grid_col_11 .cat_brand{border-top:1px #9EA6C2 dotted;}
.cat_pannel .grid_col_12 .cat_brand{border-top:1px #C1CA5F dotted;}
.cat_pannel .grid_col_13 .cat_brand{border-top:1px #58CA9D dotted;}
.cat_pannel .grid_col_14 .cat_brand{border-top:1px #88B463 dotted;}
.cat_pannel .grid_col_15 .cat_brand{border-top:1px #54A9BD dotted;}
.cat_brand .cat_slide_brand li{width:130px;}
.cat_brand .cat_slide_brand a{display:block;width:120px;height:40px;background:#FFFFFF;text-align:center;margin-bottom:2px;}
.cat_brand .cat_slide_nav{height:18px;line-height:18px;position:absolute;bottom:0;left:45px;}
.cat_brand .cat_slide_nav li{float:left;width:5px;font-family:Tahoma,Helvetica;font-size:15px;_font-size:25px;color:#B2B2B2;margin-right:7px;cursor:pointer;}
.cat_brand .cat_slide_nav li.on{color:#FFFFFF;}
.cat_pannel .cat_banner{width:459px;height:482px;position:relative;}
.cat_pannel .cat_banner .num{overflow:hidden;height:20px;position:absolute;bottom:6px;right:0;zoom:1;z-index:3}
.cat_pannel .cat_banner .num li{width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;font-weight:400;font-family:"微软雅黑",Arial;color:#FFFFFF;background:#000000;margin-right:6px;border-radius:50%;cursor:pointer;float:left;}
.cat_pannel .cat_banner .num li.on{background:#C40000;}
.cat_pannel .cat_banner .prev_pic,.cat_pannel .cat_banner .next_pic{display:none;width:39px;height:50px;background:url(../images/btn.png) no-repeat;position:absolute;top:216px;}
.cat_pannel .cat_banner .prev_pic{left:5px;}
.cat_pannel .cat_banner .next_pic{right:5px;background-position:right;}
.banner-grid-b1,.banner-grid-b2,.banner-grid-b4{display:block;border-right:1px #e5e5e5 solid;}
.cat_pannel .cat_banner .banner-grid-b1{height:321px;border-bottom:1px #e5e5e5 solid;}
.cat_pannel .cat_banner .banner-grid-b2{width:229px;height:160px;}
.cat_pannel .cat_small_banner{width:190px;background:#F2F2F2;overflow:hidden;}
.cat_pannel .cat_small_banner li{height:160px;border-bottom:1px #E5E5E5 solid;position:relative;}
/*当前栏目*/
.cate_nav li.on,.cate_nav li.on a{color:#FFFFFF;}
.cate_nav li.on .cat_0_nav,.grid_col_0{background:#C10000;}
.cate_nav li.on .cat_1_nav,.grid_col_1{background:#CD1B49;}
.cate_nav li.on .cat_2_nav,.grid_col_2{background:#1F94CC;}
.cate_nav li.on .cat_3_nav,.grid_col_3{background:#8A4C8A;}
.cate_nav li.on .cat_4_nav,.grid_col_4{background:#C62173;}
.cate_nav li.on .cat_5_nav,.cate_nav li.on .cat_8_nav,.grid_col_5,.grid_col_8{background:#2766D0;}
.cate_nav li.on .cat_6_nav,.grid_col_6{background:#DF4050;}
.cate_nav li.on .cat_7_nav,.grid_col_7{background:#F36B18;}
.cate_nav li.on .cat_9_nav,.grid_col_9{background:#C93C1B;}
.cate_nav li.on .cat_10_nav,.grid_col_10{background:#BFA588;}
.cate_nav li.on .cat_11_nav,.grid_col_11{background:#7A83A5;}
.cate_nav li.on .cat_12_nav,.grid_col_12{background:#A0AF00;}
.cate_nav li.on .cat_13_nav,.grid_col_13{background:#10B68C;}
.cate_nav li.on .cat_14_nav,.grid_col_14{background:#6DA43D;}
.cate_nav li.on .cat_15_nav,.grid_col_15{background:#0090B0;}
分享到QQ
分享到微博
微信扫一扫
