《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-6

最新推荐文章于 2024-05-20 01:37:59 发布
最新推荐文章于 2024-05-20 01:37:59 发布
阅读量2.2k 收藏 15
点赞数 5
分类专栏： web前端作业 文章标签： html web css jquery html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43721056/article/details/106377708
版权

Web前端设计与开发-课后任务-漫步时尚广场任务第五章源码


注: 素材图片路径需要根据实际情况修改

前台模块

shoppingShow_goods.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>2015夏新款韩版 透气舒适简约半截袖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>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</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>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</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>大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙</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>爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙 </p>
      </li>
      <li><img src="images/shopshow/dress4.jpg" />
        <p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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=["冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣","2015夏新款韩版 透气舒适简约半截袖T恤衫","韩版甜美气质亮片热气球字母中长款圆领短袖T恤","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙","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 简约通勤腰带修身大摆短袖连衣裙","爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙","亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙"];
	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:#ea2020;}
.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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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">&nbsp;今天是2015年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>2015-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>2015-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>2015-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热2015新款线上独家复古GL 2620运动生活休闲鞋男鞋</td>
        <td>运动</td>
        <td>3456</td>
        <td>¥346.00</td>
        <td>2015-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>2015-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>条记录，当前显示第&nbsp;<i class="blue">2&nbsp;</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"
 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>
梦里一明月
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web实例-漫步时尚广场源码
05-24
web基础实训青软实训 漫步时尚广场项目源代码以及图片等希望对要实训的你们有所帮助web 前端 漫步时尚广场更多下载资源、学习资料请访问CSDN下载频道.
web基础实训青软实训 漫步时尚广场项目源代码以及图片
06-24
web基础实训青软实训 漫步时尚广场项目源代码以及图片从第一章到第十二章全，包括图片代码，每一章节一个文件夹。从前端到后端界面，从显示产品到注册、登录、发布、审核产品的静态页面都有。 非常不错的实训资源
web网页设计与开发：基于HTML+CSS+JavaScript简单的个人博客网页制作期末作业 (1)
最新发布
网页设计与制作 | HTML+CSS+JS
05-20 929
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web-html5（一）
就是你，站住！
03-14 3887
【任务1-1】实现Q-Walking E&amp;S购物列表页面中的菜单导航栏。 &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;漫步时尚广场-购物列表&lt;/tit
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-2
weixin_43721056的博客
05-19 5297
Web前端设计与开发-课后任务-漫步时尚广场任务源码第二章任务2-1任务2-2top.htmlleft.htmlshop_search.htmlfoodlist.htmlmain.html 第二章 注: 素材图片路径需要根据实际情况修改 任务2-1 <!DOCTYPE html PUBLIC"- //W3C//DTD XHTML 1.0 Transitional//EN" "htttp://www.w3.org/TR/xhtml1-transitional.dtd"> <html x
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-3
weixin_43721056的博客
05-20 1914
第三章任务3-1任务3-2 注: 素材图片路径需要根据实际情况修改 任务3-1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册-Q-Walking E&S</title> </head> <body> <!-- 顶部区域start --> <table width="100%"
Web前端学习记录(六)
fakerth的博客
03-14 512
任务5-1：使用css样式实现购物列表页面的整体布局 预览如下： shoppingShow_frame.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漫步时尚广场-购物列表</title> <link rel=...
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-4
weixin_43721056的博客
05-21 1739
Web前端设计与开发-课后任务-漫步时尚广场任务源码第四章任务4-1任务4-2 第四章 注: 素材图片路径需要根据实际情况修改 任务4-1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-5
weixin_43721056的博客
05-21 1443
这里写目录标题第五章任务5-1shoppingShow_frame.htmlshow_frame任务5-2 第五章 注: 素材图片路径需要根据实际情况修改 任务5-1 shoppingShow_frame.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln
WEB基础实训 漫步时尚广场-完整版
04-20
WEB基础实训 漫步时尚广场-完整版
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-1
weixin_43721056的博客
05-15 2766
Web前端设计与开发-课后任务-漫步时尚广场代码第一章任务1-1运行结果任务1-2运行结果任务1-3运行结果任务1-4运行结果 第一章 任务1-1 <!--菜单导航栏 start--> <div class = "nav_bg"> <div class = "nav_content"> <ul class = "nav"> <li><a href ="shoppingIndex.html" cl
WEB基础实训 漫步时尚广场项目.zip
12-04
web基础实训青软实训 漫步时尚广场项目源代码以及图片等 希望对要去城阳区实训的你们有所帮助
组件拖拽，购物车效果
09-29
组件拖拽，购物车效果，组件之间拖拽，从一边到另一边的效果
漫步
02-12
漫步
漫游时尚广场页面实现
M_Estelle的博客
06-10 482
二、购物首页 Html文件 shoppingIndex.html Css文件 orginal.css、shopIndex.css Js文件 shopIndex.js 实现功能 自动轮播，手动切换 进入该网页 点击“导航栏”中的首页进入 运行效果截图： ...
WEB基础实训
qq_44939000的博客
01-01 558
WEB基础实训 漫步时尚广场项目 https://download.csdn.net/my
作业2
qq_38259404的博客
03-19 922
shoppingindex.html&lt;!DOCTYPE html&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&gt; &lt;title&gt;漫步时尚广场-购物栏目&
JavaScript_Homework6
qq_37777236的博客
05-08 887
JavaScript作业六 HTML5应用 JavaScript作业六 【任务9-1】实现商品详情页面的框架结构 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>漫步时尚广场-商品详情</title> <link href="css/detail_frame.css" rel="stylesheet
五子棋网站设计与实现：HTML+CSS, Bootstrap与JavaScript技术
"这篇毕业设计主要探讨了五子棋游戏的网页实现，使用HTML+CSS，...这个毕业设计涵盖了前端开发的多个方面，包括页面布局、响应式设计、用户交互和服务器通信，对于理解Web应用的开发流程和技能要求有着实际的指导意义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值