Web前端设计与开发-课后任务-漫步时尚广场任务第五章源码
前台模块shoppingShow_goods.htmlshoppingShow_goods_byScript.html后台模块css文件top.csslist.cssleft.csslayout.csshtml文件top.htmlshoplist.htmlshop_search.htmlmain.htmlleft.html注: 素材图片路径需要根据实际情况修改
前台模块
shoppingShow_goods.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>漫步时尚广场-购物列表-商品展示</title><style type="text/css">*{padding:0;margin:0}li,ul{list-style:none}body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}/*中间部分*/.middle{float:left;width:690px}.pic_list{float:left}.pic_list dl{float:left;width:152px;margin:0 10px 10px}.price{font-size:15px;font-weight:700;color:red;float:left}.price2{font-size:12px;font-weight:700;color:red;text-align:center}.font12{font-size:12px;color:#ccc;float:right}.pic_list dl img{padding:5px;border:1px solid #ccc;margin-bottom:10px}.pic_list dl dd{float:left}.pic_title{background:#ff9c01;line-height:40px;font-size:16px;text-indent:20px;text-align:left;width:680px;float:left;color:#fff;margin:0 10px 10px}.pic_list2 li{float:left}.pic_list2{margin:0 6px 0 12px}.pic_list2 li{width:160px;float:left;margin:5px 4px}</style></head><body><!--中间区 start--><div class="middle"><h1 class="pic_title">最新上架</h1><div class="pic_list"><dl><div><a href="shoppingDetail.html" target="_blank"><img src="images/shopshow/yifu1.jpg" /></a></div><dt><span class="price">￥198.00元</span><span class="font12">324人购买</span></dt><dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd></dl><dl><div><img src="images/shopshow/yifu2.jpg" /></div><dt><span class="price">￥69.00元</span><span class="font12">534人购买</span></dt><dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd></dl><dl><div><img src="images/shopshow/yifu3.jpg" /></div><dt><span class="price">￥160.00元</span><span class="font12">643人购买</span></dt><dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤</dd></dl><dl><div><img src="images/shopshow/yifu4.jpg" /></div><dt><span class="price">￥210.00元</span><span class="font12">678人购买</span></dt><dd>款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd></dl><dl><div><img src="images/shopshow/yifu5.jpg" /></div><dt><span class="price">￥70.00元</span><span class="font12">567人购买</span></dt><dd>款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd></dl><dl><div><img src="images/shopshow/yifu6.jpg" /></div><dt><span class="price">￥146.00元</span><span class="font12">4567人购买</span></dt><dd>大码女装胖mm夏装新款韩版显瘦露肩镂空连衣裙</dd></dl><dl><div><img src="images/shopshow/yifu7.jpg" /></div><dt><span class="price">￥69.00元</span><span class="font12">1345人购买</span></dt><dd>v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣</dd></dl><dl><div><img src="images/shopshow/yifu8.jpg" /></div><dt><span class="price">￥239.00元</span><span class="font12">789人购买</span></dt><dd>韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季 </dd></dl></div><!--品牌活动--><h1 class="pic_title">品牌活动</h1><ul class="pic_list2"><li><img src="images/shopshow/dress1.jpg" /><p>独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙</p></li><li><img src="images/shopshow/dress2.jpg" /><p>夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙</p></li><li><img src="images/shopshow/dress3.jpg" /><p>爱美斯 夏季优雅显瘦大摆长裙 中长款复古印花淑女裙 </p></li><li><img src="images/shopshow/dress4.jpg" /><p>亿婷夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p></li><div style="display:none"><li><img src="images/shopshow/dress5.jpg" /><p>欧美v领内搭背心吊带短款露背性感优雅纯色打底上衣</p></li><li><img src="images/shopshow/dress6.jpg" /><p>胖mm夏装刺绣蕾丝宽松A字显瘦连衣裙</p></li><li><img src="images/shopshow/dress7.jpg" /><p>欧美大牌收腰显瘦弹力提花波点印花上衣</p></li><li><img src="images/shopshow/dress8.jpg" /><p>欧美高端修身显瘦中长款刺绣蕾丝复古小黑裙A字连衣裙</p></li></div></ul></div><!--中间区 end--> </body></html>
shoppingShow_goods_byScript.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>漫步时尚广场-购物列表-商品展示</title><style type="text/css">*{padding:0;margin:0}li,ul{list-style:none}body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}/*中间部分*/.middle{float:left;width:690px}.pic_list{float:left}.pic_list dl{float:left;width:152px;margin:0 10px 10px}.price{font-size:15px;font-weight:700;color:red;float:left}.price2{font-size:12px;font-weight:700;color:red;text-align:center}.font12{font-size:12px;color:#ccc;float:right}.pic_list dl img{padding:5px;border:1px solid #ccc;margin-bottom:10px}.pic_list dl dd{float:left}.pic_title{background:#ff9c01;line-height:40px;font-size:16px;text-indent:20px;text-align:left;width:680px;float:left;color:#fff;margin:0 10px 10px}.pic_list2 li{float:left}.pic_list2{margin:0 6px 0 12px}.pic_list2 li{width:160px;float:left;margin:5px 4px}</style></head><body><!--中间区 start--><div class="middle"><h1 class="pic_title">最新上架</h1><div class="pic_list"><script type="text/javascript">var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg","yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];var prices=["198.00","69.00","160.00","210.00","70.00","146.00","69.00","239.00"];var buyers=[324,534,643,678,567,4567,1345,789];var contents=["冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣","夏新款韩版 透气舒适简约半截袖T恤衫","韩版甜美气质亮片热气球字母中长款圆领短袖T恤","款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","大码女装胖mm夏装新款韩版显瘦露肩镂空连衣裙","v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣","韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季"];for(var i=0;i<images.length;i++){var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]+"' /></div><dt><span class='price'>￥"+prices[i]+"元</span><span class='font12'>"+buyers[i]+"人购买</span></dt><dd>"+contents[i]+"</dd></dl>";document.write(goodsInfo);}</script></div><!--品牌活动--><h1 class="pic_title">品牌活动</h1><ul class="pic_list2"><script type="text/javascript">var images=["dress1.jpg","dress2.jpg","dress3.jpg","dress4.jpg"];var contents=["独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙","夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙","爱美斯 夏季优雅显瘦大摆长裙 中长款复古印花淑女裙","亿婷夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙"];for(var i in images){var goodsInfo="<li><img src='images/shopshow/"+images[i]+"' /><p>"+contents[i]+"</p></li>";document.write(goodsInfo);}</script><!--中间区 end-->...<!-- 省略后面HTML部分--></body></html>
后台模块
css文件
top.css
@charset "utf-8";/* CSS Document */.header{height:88px;}.topleft{height:88px;background:url(../images/topleft.jpg) no-repeat;float:left; width:300px;}.topleft img{margin-top:12px;margin-left:10px;}.topright{height:88px;background:url(../images/topright.jpg) no-repeat right;float:right;}.nav{float:left;}.nav li{float:left;width:87px;height:88px; text-align:center;}.nav li a{display:block;width:87px;height:88px;-moz-transition: none; transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; }.nav li a.selected{background:url(../images/navbg.png) no-repeat;}.nav li a:hover{display:block;background:#000;color:#fff;background: none repeat scroll 0% 0% rgb(43, 127, 181);}.nav li img{margin-top:10px;}.nav li a{display:block;}.nav a h2{font-size:14px;color:#d6e8f1;}.nav a:hover h2{color:#fff;}.topright ul{padding-top:15px; float:right; padding-right:12px;}.topright ul li{float:left; padding-left:9px; padding-right:9px; background:url(../images/line.gif) no-repeat right;}.topright ul li:last-child{background:none;}.topright ul li a{font-size:13px; color:#e9f2f7;}.topright ul li a:hover{color:#fff;}.topright ul li span{margin-top:2px;float:left;padding-right:3px;}.user{height:30px;background:url(../images/ub1.png) repeat-x;clear:both;margin-top:10px;float:right; margin-right:12px;border-radius:30px; white-space:nowrap;position:relative;}.user span{display:inline-block;padding-right:10px; background:url(../images/user.png) no-repeat 15px 10px; line-height:30px; font-size:14px;color:#b8ceda; padding-left:20px; padding-left:35px;}.user b{display:inline-block;width:20px;height:18px; background:url(../images/msg.png);text-align:center; font-weight:normal; color:#fff;font-size:14px;margin-right:13px; margin-top:7px; line-height:18px;}.user i{display:inline-block;margin-right:5px;font-style:normal;line-height:30px; font-size:14px;color:#b8ceda;}
list.css
@charset "utf-8";/* CSS Document */.place{height:40px; background:url(../images/righttop.gif) repeat-x;}.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(../images/rlist.gif) no-repeat right;}.placeul li:last-child{background:none;}.rightinfo{padding:8px;}.tools{clear:both; height:35px; margin-bottom:8px;}.toolbar{float:right;}.toolbar li{background:url(../images/toolbg.gif) repeat-x; line-height:33px; height:33px; border:solid 1px #d3dbde; float:left; padding-right:10px; margin-right:5px;border-radius: 3px; cursor:pointer;}.toolbar li span{float:left; margin-left:10px; margin-right:5px; margin-top:5px;}.toolbar1{float:right;}.toolbar1 li{background:url(../images/toolbg.gif) repeat-x; line-height:33px; height:33px; border:solid 1px #d3dbde; float:left; padding-right:10px; margin-left:5px;border-radius: 3px; }.toolbar1 li span{float:left; margin-left:10px; margin-right:5px; margin-top:5px;}.imgtable{width:100%;border:solid 1px #cbcbcb; }.imgtable th{background:url(../images/th.gif) repeat-x; height:34px; line-height:34px; border-bottom:solid 1px #b6cad2; text-indent:21px; text-align:left;}.imgtable td{line-height:20px; text-indent:21px; border-right: dotted 1px #c7c7c7;}.imgtable td img{margin:10px 20px 10px 0;}.imgtable td p{color:#919191;}.imgtable td i{font-style:normal; color:#ea;}.imgtd{text-indent:0;}.imgtable tbody tr.odd{background:#f5f8fa;}.imgtable tbody tr:hover{background:#e5ebee;}.intro_width{width:300px;word-wrap:break-word; overflow:hidden;}/*seachform*/.seachform{ height:42px; }.seachform li{float:left; margin-right:15px;}.seachform li label{padding-right:10px; float:left; line-height:32px;}.scinput{width:180px; height:32px; line-height:32px; border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df; background:url(../images/inputbg.gif) repeat-x; text-indent:10px; color:#999;}.scbtn{width:85px;height:35px; background:url(../images/btnbg.png) no-repeat center; font-size:14px;font-weight:bold;color:#fff; cursor:pointer;border-radius:3px; }select{background:url(../images/inputbg.gif) repeat-x;_background:none;_border:none;height:32px; border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df;padding:5px;}.tablelist{border:solid 1px #cbcbcb; width:100%; clear:both;}.tablelist th{background:url(../images/th.gif) repeat-x; height:34px; line-height:34px; border-bottom:solid 1px #b6cad2; text-indent:11px; text-align:left;}.tablelist td{line-height:35px; text-indent:11px; border-right: dotted 1px #c7c7c7;}.tablelink{color:#056dae;}.tablelist tbody tr.odd{background:#f5f8fa;}.tablelist tbody tr:hover{background:#e5ebee;}/*page分页*/.pagin{position:relative;margin-top:10px;padding:0 12px;}.pagin .blue{color:#056dae;font-style:normal;}.pagin .paginList{position:absolute;right:12px;top:0;}.pagin .paginList .paginItem{float:left;}.pagin .paginList .paginItem a{float:left;width:31px;height:28px;border:1px solid #DDD; text-align:center;line-height:30px;border-left:none;color:#3399d5;}.pagin .paginList .paginItem:first-child a{border-left:1px solid #DDD;}.pagin .paginList .paginItem:first-child a{border-bottom-left-radius:5px;border-top-left-radius:5px;}.pagin .paginList .paginItem:last-child a{border-bottom-right-radius:5px;border-top-right-radius:5px;}.pagin .paginList .paginItem.current,.pagin .paginList .paginItem.current a{background:#f5f5f5; cursor:default;color:#737373;}.pagin .paginList .paginItem:hover{background:#f5f5f5;}.pagin .paginList .paginItem.more,.pagin .paginList .paginItem.more a:hover{ cursor:default;}.pagin .paginList .paginItem.more:hover{background:#FFF;}.pagin .paginList .paginItem.more a{color:#737373;}.pagepre{background:url(../images/pre.gif) no-repeat center center; width:31px; height:28px;}.pagenxt{background:url(../images/next.gif) no-repeat center center; width:31px; height:28px;}
left.css
@charset "utf-8";/* CSS Document */*{font-size:9pt;border:0;margin:0;padding:0;}body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}ul{display:block;margin:0;padding:0;list-style:none;}li{display:block;margin:0;padding:0;list-style: none;}dl,dt,dd{margin:0;padding:0;display:block;}a,a:focus{text-decoration:none;color:#000;outline:none;}a:hover{color:#00a4ac;text-decoration:none;}/*left.html*/.lefttop{background:url(../images/lefttop.gif) repeat-x;height:40px;color:#fff;font-size:14px;line-height:40px;}.lefttop span{margin-left:8px; margin-top:10px;margin-right:8px; background:url(../images/leftico.png) no-repeat; width:20px; height:21px;float:left;}.leftmenu{width:187px;padding-bottom: 9999px;margin-bottom: -9999px; overflow:hidden; background:url(../images/leftline.gif) repeat-y right;}.leftmenu dd{background:url(../images/leftmenubg.gif) repeat-x;line-height:35px;font-weight:bold;font-size:14px;border-right:solid 1px #b7d5df;}.leftmenu dd span{float:left;margin:10px 8px 0 12px;}.leftmenu dd .menuson{display:none;}.leftmenu dd:first-child .menuson{display:block;}.menuson {line-height:30px; font-weight:normal; }.menuson li a{cursor:pointer;}.menuson li.active{position:relative; background:url(../images/libg.png) repeat-x; line-height:30px; color:#fff;}.menuson li cite{display:block; float:left; margin-left:32px; background:url(../images/list.gif) no-repeat; width:16px; height:16px; margin-top:7px;}.menuson li.active cite{background:url(../images/list1.gif) no-repeat;}.menuson li.active i{display:block; background:url(../images/sj.png) no-repeat; width:6px; height:11px; position:absolute; right:0;z-index:10000; top:9px; right:-1px;}.menuson li a{ display:block; *display:inline; *padding-top:5px;}.menuson li.active a{color:#fff;}.title{cursor:pointer;}
layout.css
@charset "utf-8";/* CSS Document */*{font-size:9pt;border:0;margin:0;padding:0;}body{font-family:'微软雅黑'; margin:0 auto;}ul,li{display:block;margin:0;padding:0;list-style:none;}img{border:0;}.date_text{font-size:12px; float:right;line-height:45px; padding-right:20px;}dl,dt,dd{margin:0;padding:0;display:block;}a,a:focus{text-decoration:none;color:#000;outline:none;}a:hover{color:#00a4ac;text-decoration:none;}table{border-collapse:collapse;border-spacing: 0;}cite{font-style:normal;}h2{font-weight:normal;}.floatl{float:left;}.floatr{float:right;}input{font-family:Tahoma,'微软雅黑','宋体';}.orange14{font-size:14px;font-weight:bold; color:orange;}textarea{border:1px solid #a7b5bc;width:500px;height:60px;}
html文件
top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="css/layout.css" rel="stylesheet" type="text/css" /><link href="css/top.css" rel="stylesheet" type="text/css" /></head><body style="background:url(images/topbg.gif) repeat-x;"><div class="topleft"> <a href="../index.html" target="_parent"><img src="images/logo.png" title="系统首页" /></a> </div><ul class="nav"><li><a href="../index.html" target="_parent" class="selected"><img src="images/globe.png"title="网站前台" /><h2>网站前台</h2></a></li><li><a href="index.html" target="rightFrame"><img src="images/home.png" title="后台首页" /><h2>后台首页</h2></a></li><li><a href="addgoods.html" target="rightFrame"><img src="images/shop.png" title="添加商品" /><h2>添加商品</h2></a></li><li><a href="addmovie.html" target="rightFrame"><img src="images/movie.png" title="添加影视" /><h2>添加影视</h2></a></li><li><a href="addfood.html" target="rightFrame"><img src="images/food.png" title="添加餐饮" /><h2>添加餐饮</h2></a></li></ul><div class="topright"><ul><li><span><img src="images/help.png" title="帮助" class="helpimg"/></span><a href="#">帮助</a></li><li><a href="#">关于</a></li><li><a href="login.html" target="_parent">退出</a></li></ul><div class="user"><span>用户未登录</span> <i>消息</i> <b>5</b> </div></div></body></html>
shoplist.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>餐饮列表页面-后台管理</title><link href="css/layout.css" rel="stylesheet" type="text/css" /><link href="css/list.css" rel="stylesheet" type="text/css" /></head><body><div class="place"> <span>位置：</span><ul class="placeul"><li><a href="main.html">首页</a></li><li><a href="#">购物后台管理</a></li><li><a href="#">商品列表</a></li></ul><div class="date_text"><img src="images/leftico04.png"> 今天是2月10日 星期一 12：00</div></div><div class="rightinfo"><div class="tools"><ul class="toolbar"><li ><span><img src="images/t01.png" /></span>添加</li><li ><span><img src="images/t02.png" /></span>修改</li><li class="click"><span><img src="images/t03.png" /></span>删除</li><li><a href="jqueryChart.html"><span><img src="images/t04.png" /></span>统计</a></li><li><span><img src="images/t05.png" /></span>设置</li></ul><iframe src="shop_search.html" scrolling="no" frameborder="0" width="400" height="42"></iframe></div><table class="tablelist"><thead><tr><th><input name="" type="checkbox" value="" checked="checked"/></th><th>缩略图</th><th>商品名称</th><th>商品类别</th><th>数量(件）</th><th>单价（元）</th><th>发布时间</th><th>是否审核</th><th>操作</th></tr></thead><tbody><tr><td><input name="" type="checkbox" value="" /></td><td class="imgtd"><img src="images/img06.png" /></td><td>RAX 头层牛皮户外鞋 男防滑登山鞋减震</td><td>运动</td><td>334</td><td>¥566.00</td><td>-06-06 15:05</td><td>已审核</td><td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink"> 删除</a></td></tr><tr class="odd"><td><input name="" type="checkbox" value="" /></td><td class="imgtd"><img src="images/img07.png" /></td><td>七匹狼休闲裤 春夏新款 男士时尚无褶休闲裤</td><td>男装</td><td>455</td><td>¥236.00</td><td>-06-08 14:02</td><td>未审核</td><td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">删除</a></td></tr><tr><td><input name="" type="checkbox" value="" /></td><td class="imgtd"><img src="images/img08.png" /></td><td>欧美大牌五分袖收腰显瘦睫毛蕾丝连衣裙 粉色 </td><td>女装</td><td>899</td><td>¥136.00</td><td>-06-07 13:16</td><td>未审核</td><td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">删除</a></td></tr><tr class="odd"><td><input name="" type="checkbox" value="" /></td><td class="imgtd"><img src="images/img09.png" /></td><td>锐步REEBOK热新款线上独家复古GL 2620运动生活休闲鞋男鞋</td><td>运动</td><td>3456</td><td>¥346.00</td><td>-06-06 10:36</td><td>已审核</td><td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">删除</a></td></tr><tr><td><input name="" type="checkbox" value="" /></td><td class="imgtd"><img src="images/img10.png" /></td><td>新款中大童荷叶边短袖裙子韩版儿童公主裙女童连衣裙 </td><td>童装</td><td>678</td><td>¥316.00</td><td>-06-05 13:25</td><td>已审核</td><td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">删除</a></td></tr></tbody></table><div class="pagin"><div class="message">共<i class="blue">1256</i>条记录，当前显示第 <i class="blue">2 </i>页</div><ul class="paginList"><li class="paginItem"><a href="#"><span class="pagepre"></span></a></li><li class="paginItem"><a href="#">1</a></li><li class="paginItem current"><a href="#">2</a></li><li class="paginItem"><a href="#">3</a></li><li class="paginItem"><a href="#">4</a></li><li class="paginItem"><a href="#">5</a></li><li class="paginItem more"><a href="#">...</a></li><li class="paginItem"><a href="#">10</a></li><li class="paginItem"><a href="#"><span class="pagenxt"></span></a></li></ul></div></div></body></html>
shop_search.html
<!doctype html><html><head><meta charset="utf-8"><title>商品检索</title><link href="css/layout.css" rel="stylesheet" type="text/css" /><link href="css/list.css" rel="stylesheet" type="text/css" /></head><body><ul class="seachform"><li><div class="vocation"><select class="select3"><option>商品类别</option><option>女装</option><option>男装</option><option>童装</option><option>运动</option></select></div></li><li><input type="text" class="scinput" value="请输入商品名称"/></li><li><input name="searchBtn" type="button" class="scbtn" value="查询"/></li></ul></body></html>
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>漫步时尚广场后台管理系统</title><script type="text/javascript">window.onload=function(){var flag=0;//保存用户状态（用户未登录）do{//使用数组保存用户名和密码var array=[["admin","admin"],["itshixun","itshixun"],["guoqy","123"]];var userName = prompt("请输入用户名：");var userPwd = prompt("请输入密码：");for (var i=0; i<array.length; i++) {if (array[i][0]==userName&&array[i][1]==userPwd) {alert("用户登陆成功，欢迎<"+userName+">使用本系统!");//获取topFrame框架对应的页面中的class属性为”user”的元素，//然后再从中筛选<span>标签，最后修改标签中的内容topFrame.document.getElementsByClassName("user")[0].getElementsByTagName("span")[0].innerHTML=userName;flag=1;//用户登录成功break;}if(userName==null&&userPwd==null){flag=2;//用户取消登录}}if(flag==0){alert("用户名或密码错误，请重新登录。");}}while(flag==0);}</script></head><frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0"><frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame" /><frameset cols="187,*" frameborder="no" border="0" framespacing="0"><frame src="left.html" name="leftFrame" scrolling="no" noresize="noresize"id="leftFrame" title="leftFrame" /><frame src="shoplist.html" name="rightFrame" id="rightFrame"title="rightFrame" /></frameset></frameset><noframes><body>您的浏览器不支持框架集 </body></noframes></html>
left.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="css/left.css" rel="stylesheet" type="text/css" /></head><body style="background:#f0f9fd;"><div class="lefttop"><span></span>功能菜单</div><dl class="leftmenu"><dd><div class="title"> <span><img src="images/leftico05.png" /></span>购物后台管理 </div><ul class="menuson"><li><cite></cite><a href="addgoods.html" target="rightFrame">添加商品</a><i></i></li><li class="active"><cite></cite><a href="shoplist.html" target="rightFrame">商品列表</a><i></i></li><li><cite></cite>商品类型<i></i></li></ul></dd><dd><div class="title"> <span><img src="images/leftico02.png" /></span>影视后台管理 </div><ul class="menuson"><li><cite></cite><a href="addmovie.html" target="rightFrame">添加影片</a><i></i></li><li class="active"><cite></cite><a href="movielist.html" target="rightFrame">影片列表</a><i></i></li><li><cite></cite>影片类型<i></i></li></ul></dd><dd><div class="title"><span><img src="images/leftico05.png" /></span>餐饮后台管理</div><ul class="menuson"><li><cite></cite><a href="addfood.html" target="rightFrame">添加美食</a><i></i></li><li class="active"><cite></cite><a href="foodlist.html" target="rightFrame">美食列表</a><i></i></li><li><cite></cite>美食类型<i></i></li></ul></dd><dd><div class="title"><span><img src="images/leftico04.png" /></span>订单管理</div><ul class="menuson"><li><cite></cite><a href="#">最新订单</a><i></i></li><li><cite></cite><a href="#">已处理订单</a><i></i></li><li><cite></cite><a href="#">取消订单</a><i></i></li></ul></dd><dd><div class="title"><span><img src="images/leftico04.png" /></span>交易记录</div></dd><dd><div class="title"><a href="jqueryChart.html" target="rightFrame"><span><img src="images/leftico06.png" /></span>统计报表</a></div></dd><dd><div class="title"><span><img src="images/leftico04.png" /></span>权限分配</div></dd><dd><div class="title"><span><img src="images/leftico08.png" /></span>修改密码</div></dd><dd><div class="title"><span><img src="images/leftico07.png" /></span>系统设置</div></dd></dl></body></html>
