<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#goods_category{
width:240px;
margin-top:10px;
margin-left:10px;
border:1px solid #ddd;
position:fixed;
}
h4, ul{
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
h4.all_goods{
background-color:#900;
color:#fff;
padding-left:10px;
}
li{
display:inline-block;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
color:#666;
}
</style>
</head>
<body>
<div id="goods_category">
<h4 class="all_goods">所有商品分类</h4>
<dl class="cate">
<dd>
<h4>服装/内衣/配件</h4>
<ul>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</dd>
<dd>
<h4>鞋/箱包</h4>
<ul>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
</ul>
</dd>
<dd>
<h4>珠宝饰品/手表眼镜</h4>
<ul>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
</ul>
</dd>
<dd>
<h4>化妆品</h4>
<ul>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
</ul>
</dd>
<dd>
<h4>运动户外</h4>
<ul>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
</ul>
</dd>
<dd>
<h4>手机数码</h4>
<ul>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
</ul>
</dd>
<dd>
<h4>家用电器</h4>
<ul>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>
</dd>
<dd>
<h4>家具建材</h4>
<ul>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
</ul>
</dd>
<dd>
<h4>家纺/居家</h4>
<ul>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
</ul>
</dd>
<dd>
<h4>母婴玩具</h4>
<ul>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
</ul>
</dd>
<dd>
<h4>食品</h4>
<ul>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
</ul>
</dd>
<dd>
<h4>医药保健</h4>
<ul>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
</ul>
</dd>
<dd>
<h4>汽车配件</h4>
<ul>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
</ul>
</dd>
<dd>
<h4>图书音像</h4>
<ul>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
</ul>
</dd>
<dd>
<h4>文化娱乐</h4>
<ul>
<li>电子凭证</li>
<li>电子凭证</li>
<li>电子凭证</li>
<li>电子凭证</li>
</ul>
</dd>
<dd>
<h4>手机/网游点卡</h4>
</dd>
</dl>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p style="padding-left:300px">end</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
<script>
/*
* 仿天猫首页-产品分类；
* ie8，ff，opera中测试可用，其余浏览器未测；
* ******made by keimon**********
* ********2013-01-14**********
*/
$(function(){
$('dd:odd').css('backgroundColor','#eee');
var scrollT=0;
$(window).scroll(function(e,scrollT){
var scrollTop = $(document).scrollTop();
var scrolls = Math.floor(scrollTop/50);
if(scrolls>15){
scrolls = 15;
}
$('dd ul:lt('+scrolls+')').slideUp();
$('dd ul:gt('+scrolls+')').slideDown();
if(scrolls==0){
$('dd ul').eq(0).slideDown();
}
})
})
</script>
</html>
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
