第一题
<!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 type="text/javascript"> $(document).ready(function () { $(".firstNav").click(function () { $("ul").fadeIn(1000); }) $(".navsBox li").mouseover(function(){ $(this).css("background-color","gray"); }); $(".navsBox li").mouseout(function(){ $(this).css("background-color","#F2F2F2"); }); }) </script> </body> </html>
第二题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第二题</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 type="text/javascript"> $(document).ready(function () { $(".lastone").click(function () { $("li:gt(6)").toggle(1000) $("li:last").toggleClass("up") $("li:last").show(1000) }) }) </script> </body> </html>