JavaScript京东左侧控件效果

最新推荐文章于 2022-03-06 02:08:04 发布

刘欢(C#)

最新推荐文章于 2022-03-06 02:08:04 发布

阅读量351

点赞数

本文链接：https://blog.csdn.net/qq_36074218/article/details/70808943

版权

<!DOCTYPE html>
<html>
  <head>
    <title>3l.html</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-color:#F2F2F2;
	background-position:33px 7px;
	background-repeat: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>
  
  <script type="text/javascript" src="../../Day05/WebRoot/js/jquery-1.11.1.js"></script></head>
  <script type="text/javascript">
$(document).ready(function () {
	
});
</script>
  <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>