仿淘宝首页商品分类列表效果

15 篇文章 0 订阅

<!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>仿淘宝首页商品分类列表效果-网站制作教程-www.web2bar.cn</title>
<style type="text/css">
<!--
body {
font-size: 12px;
}
#shone1,#shtwo1 {
text-align: center;
padding: 9px;
}
.huixuxian {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
.huixuxian ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.huixuxian li {
padding-top: 2px;
padding-bottom: 2px;
margin-top: 2px;
margin-bottom: 2px;
background-color: #F3F3F3;
}
.huixuxian li.hover {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 2px;
margin-bottom: 2px;
border-top-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-left-color: #FF0000;
background-color: #FFFFFF;
}
#apDiv1,#apDiv4 {
position:absolute;
z-index:3;
visibility: hidden;
}
#apDiv3,#apDiv6 {
position:absolute;
z-index:2;
border: 2px solid #FF0000;
visibility: hidden;
background-color: #FFFFFF;
margin-top: 2px;
margin-left: 0px;
}
-->
</style>
<script type="text/javascript">
<!--
function setOver(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
menu.className=i==cursel?"hover":"";
}
}
function setOut(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
menu.className=i==cursel?"":"hover";
}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64" class="huixuxian">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7%">
<div id="apDiv1">
<ul>
<li id="shone1" οnmοuseοver="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" οnmοuseοut="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
数<br />码<br /><br /></li>
</ul>
</div>
<ul>
<li id="shone1" οnmοuseοver="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" οnmοuseοut="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
数<br />码<br /><br /></li>
</ul>
</td>
<td width="93%" valign="top">
<div id="apDiv3" οnmοuseοver="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" οnmοuseοut="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
<table width="674" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="651">sss新浪基金为全球用户24小时提供全面及时的基金中文资讯,内容涵盖基金行业动态、基金 净值、基金排名、基金数据、基金评级、基金知识、基金论坛、基金超市和基金联盟等</td>
</tr>
<tr>
<td>拥有丰富的新闻资讯及评论,详实的数据资料,专业的评级系统,活跃的基金经理沙龙, 火爆的论坛和博客,为您提供最优质的服务平台,是您贴心的理财参谋</td>
</tr>
<tr>
<td width="651">新浪基金为全球用户24小时提供全面及时的基金中文资讯,内容涵盖基金行业动态、基金 净值、基金排名、基金数据、基金评级、基金知识、基金论坛、基金超市和基金联盟等</td>
</tr>
<tr>
<td>拥有丰富的新闻资讯及评论,详实的数据资料,专业的评级系统,活跃的基金经理沙龙, 火爆的论坛和博客,为您提供最优质的服务平台,是您贴心的理财参谋</td>
</tr>
</table>
</div>
<div id="apDiv2">
<table width="674" border="0" cellspacing="0" cellpadding="3" οnmοuseοver="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" οnmοuseοut="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
<tr>
<td width="651">新浪基金为全球用户24小时提供全面及时的基金中文资讯,内容涵盖基金行业动态、基金 净值、基金排名、基金数据、基金评级、基金知识、基金论坛、基金超市和基金联盟等</td>
</tr>
<tr>
<td>拥有丰富的新闻资讯及评论,详实的数据资料,专业的评级系统,活跃的基金经理沙龙, 火爆的论坛和博客,为您提供最优质的服务平台,是您贴心的理财参谋</td>
</tr>
</table>
</div>
</td>
</tr>
</table>  </td>
</tr>
<tr>
<td class="huixuxian">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7%">
<div id="apDiv4">
<ul>
<li id="shtwo1" οnmοuseοver="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" οnmοuseοut="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
服<br />装<br /><br /></li>
</ul>
</div>
<ul>
<li id="shtwo1" οnmοuseοver="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" οnmοuseοut="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
服<br />装<br /><br /></li>
</ul>
</td>
<td width="93%" valign="top">
<div id="apDiv6" οnmοuseοver="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" οnmοuseοut="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
<table width="674" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材,完美身材</td>
</tr>
<tr>
<td>服装品牌,服装品牌排行榜,服装品牌大全,服装品牌排行榜__买服装先上品牌世家网. ... 戴菲菲为代言安踏女子时尚系列服装拍摄写真精美图</td>
</tr>
<tr>
<td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材,完美身材</td>
</tr>
<tr>
<td>服装品牌,服装品牌排行榜,服装品牌大全,服装品牌排行榜__买服装先上品牌世家网. ... 戴菲菲为代言安踏女子时尚系列服装拍摄写真精美图</td>
</tr>
<tr>
<td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材,完美身材</td>
</tr>
</table>
</div>
<div id="apDiv5">
<table width="674" border="0" cellspacing="0" cellpadding="3" οnmοuseοver="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" οnmοuseοut="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
<tr>
<td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材,完美身材</td>
</tr>
<tr>
<td>服装品牌,服装品牌排行榜,服装品牌大全,服装品牌排行榜__买服装先上品牌世家网. ... 戴菲菲为代言安踏女子时尚系列服装拍摄写真精美图</td>
</tr>
</table>
</div>    </td>
</tr>
</table>  </td>
</tr>
</table>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值