HTML5期末大作业：蛋糕团购商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作 简单静态HTML网页作品 商城网页作业成品
一、作品展示
二、文件目录
三、代码实现
<!doctype html><html><head><meta charset="utf-8"><title>商品咨询</title><link rel="stylesheet" type="text/css" href="css/vipcenter.css"><script src="js/jquery-1.8.3.min.js"></script><script src="js/public.js"></script></head><body><!--个人中心首页 --><div class="thetoubu"><!--头部--><div class="thetoubu1"><b><img src="img/touxiang.png"/></b><em>czz1994612</em><em>欢迎来到会员中心</em><a href="#">地址管理</a><a href="#">修改资料</a><h5>账户安全</h5><strong>低</strong><span><p style=" width:27%"></p></span><a href="#">安全等级提升</a><em style=" padding-right:2px">手机</em><a href="#" style=" padding-left:2px; float:left; display:block; color:#f00" title="点击绑定">未绑定</a></div><!--详细列表--><div class="xiangxilbnm"><!--left--><div class="liefyu"><h2>交易管理</h2><div class="conb"><a href="#">我的购物车</a><a href="#">虚拟兑换订单</a><a href="#">我的收藏</a><a href="#">交易评价/晒单</a><a href="#">账户余额</a><a href="#">我的积分</a><a href="#">我的代金卷</a></div><h2>客户服务</h2><div class="conb"><a href="#">退款及退货</a><a href="#">交易投诉</a><a href="#">商品咨询</a><a href="#">违规举报</a><a href="#">平台客服</a><a href="#">商家入驻</a></div><h2>资料管理</h2><div class="conb"><a href="#">账户信息</a><a href="#">账户安全</a><a href="#">收货地址</a><a href="#">我的消息</a><a href="#">我的好友</a><a href="#">我的足迹</a><a href="#">第三方账号登录</a><a href="#">分享绑定</a></div></div><script type="text/javascript">$(function(){//第一步都得写这个$(".liefyu h2").click(function(){//获取title，并且让他执行下面的函数$(this)/*点哪个就是哪个*/.next(".conb")/*哪个标题下面的con*/.slideToggle()/*打开/折叠*/.siblings/*锁定同级元素*/(".con").slideUp()/*同级元素折叠起来*/})})</script><!--right--><div class="zuirifip"><!--账户余额滴干活--><div class="locfre"><a href="#" class="zuliyesi">全部资讯</a><a href="#">未回复咨询</a><a href="#">已回复资讯</a></div><script>$(function(){$(".locfre a").click(function(){$(this).addClass("zuliyesi").siblings().removeClass("zuliyesi")})$(".feifeidg").mouseenter(function(){$(this).css({background:"#0059a7"})})$(".feifeidg").mouseleave(function(){$(this).css({background:"#006DCC"})})$(".tutudg").mouseenter(function(){$(this).css({background:"#3a9d3a"})})$(".tutudg").mouseleave(function(){$(this).css({background:"#5BB75B"})})$(".paopaodg").mouseenter(function(){$(this).css({background:"#dd7200"})})$(".paopaodg").mouseleave(function(){$(this).css({background:"#fe8300"})})})</script><!--列表导航滴干活--><div class="zhuzhuxia"><span>商品</span><span>咨询时间</span><span>咨询内容</span><span>回复时间</span><span>状态</span></div><!--一条列表开始--><div class="zhuzhuxia"><a href="#"><span>连衣裙</span></a><span>-6-6 14:08</span><span>真的还是假的</span><span>空</span><span>未回复</span></div><!--一条列表结束--><!--一条列表开始--><div class="zhuzhuxia"><a href="#"><span>连衣裙</span></a><span>-6-6 14:08</span><span>真的还是假的</span><span>-6-6 14:09</span><span>已回复</span></div><!--一条列表结束--></div><!--right结束--></div><!--详细列表结束--></div><!--个人中心结束--></body></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作 简单静态HTML网页作品 商城网页作业成品 网购网站模板
如果觉得《HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作 简单静》对你有帮助，请点赞、收藏，并留下你的观点哦！
