第七章——颗后作业

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
<title>导航特效</title>
<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>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
      $(".firstNav").click(function () {
         $("ul").toggle();
        })
      $("ul li").hover(function () {
         $(this).css("background-color","#F9DBD1");
        },
         function () {
                $(this).css("background-color","#F2F2F2");
            }
        )
    })
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
<title>FAQ列表</title>
<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>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".lastone").click(function () {
             $("ul li:nth-child(7)~li").toggle();
             $("ul li:nth-child(12)").toggleClass("up");
                $("ul li:nth-child(12)").show();
            })
        })
    </script>
</body>
</html>

第七章——颗后作业

猜你喜欢