一、
任务：左导航特效
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
("#nav .navsBox .firstNav").click(function(){
list =
list.toggle();
**/
})
(this).addClass("onbg");
}).mouseout(function(){
$(this).removeClass("onbg");
});
})
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-size: 12px;
}
nav .navsBox{
width: 160px;
}
nav .navsBox .firstNav{
height:45px;
line-height:45px;
background-color:#EBEBEB;
border-left:10px solid #FE705C;
padding-left:20px;
width:130px;
font-weight:bold;
cursor: pointer;
}
nav .navsBox ul{
display:none;
list-style:none;
}
nav .navsBox ul li{
display:block;
height:45px;
line-height:45px;
padding-left:70px;
width:90px;
background:#F2F2F2 33px 7px no-repeat;
}
nav .navsBox ul li.jedh{
background-image:url("./images/huan.gif");
}
nav .navsBox ul li.jlbbyk{
background-image:url("./images/you.gif");
}
nav .navsBox ul li.jwljb{
background-image:url("./images/gouwu.gif");
}
nav .navsBox ul li.mrljb{
background-image:url("./images/meiri.gif");
}
nav .navsBox ul li.vipjtj{
background-image:url("./images/zhe.gif");
}
nav .navsBox ul li.onbg{
background-color:#F9DBD1;
}
nav .navsBox ul li a{
color:#000;
text-decoration:none;
}
</style>
</head>
<body>
<div id="nav">
<div class="navsBox">
<div class="firstNav">购物特权</div>
<ul>
<li class="jedh"><a href="#">全额兑换</a></li>
<li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
<li class="jwljb"><a href="#">购物领金币</a></li>
<li class="mrljb"><a href="#">每日领金币</a></li>
<li class="vipjtj"><a href="#">VIP阶梯价</a></li>
</ul>
</div>
</div>
</body>
</html>
二、
任务：FAQ列表
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
("#menu li.lastone").click(function(){
//切换菜单
(this).toggleClass("up");
})
})
</script>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
menu{
margin:30px;
width:188px;
background-color:#EFFDFA;
}
menu .top{
height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid #93D6C5;
border-bottom:none;
}
menu ul.nav{
list-style:none;
}
menu ul.nav li{
display:block;
height:30px;
line-height:30px;
border:1px solid #93D6C5;
border-top:none;
padding-left:30px;
background:url(images/point.jpg) no-repeat 15px center;
}
menu ul.nav li.lastone{
border:none;
cursor:pointer;
background:#fff url(images/up.jpg) no-repeat center top;
}
menu ul.nav li.up{
background:#fff url(images/down.jpg) no-repeat center top;
}
span.icon{
float:right;
margin-right:10px;
margin-top:10px;
}
</style>
</head>
<body>
<div id="menu">
<div class="top">全部商品详细分类</div>
<ul class="nav">
<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 class="lastone"></li>
</ul>
</div>
</body>
</html>
