搜索
简帛阁>技术文章>《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-6

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

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

  • 前台模块
    • shoppingShow_goods.html
    • shoppingShow_goods_byScript.html
  • 后台模块
    • css文件
      • top.css
      • list.css
      • left.css
      • layout.css
    • html文件
      • top.html
      • shoplist.html
      • shop_search.html
      • main.html
      • left.html

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

前台模块

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>¥198.00元324人购买</dt>
        <dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu2.jpg" /></div>
        <dt>¥69.00元534人购买</dt>
        <dd>2015夏新款韩版 透气舒适简约半截袖T恤衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu3.jpg" /></div>
        <dt>¥160.00元643人购买</dt>
        <dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu4.jpg" /></div>
        <dt>¥210.00元678人购买</dt>
        <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu5.jpg" /></div>
        <dt>¥70.00元567人购买</dt>
        <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu6.jpg" /></div>
        <dt>¥146.00元4567人购买</dt>
        <dd>大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu7.jpg" /></div>
        <dt>¥69.00元1345人购买</dt>
        <dd>v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu8.jpg" /></div>
        <dt>¥239.00元789人购买</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>¥"+prices[i]
			+"元"+buyers[i]+"人购买</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><img src="images/help.png" title="帮助"  class="helpimg"/><a href="#">帮助</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="login.html" target="_parent">退出</a></li>
  </ul>
  <div class="user">用户未登录 <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"> 位置:
  <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 ><img src="images/t01.png" />添加</li>
      <li ><img src="images/t02.png" />修改</li>
      <li class="click"><img src="images/t03.png" />删除</li>
      <li><a href="jqueryChart.html"><img src="images/t04.png" />统计</a></li>
      <li><img src="images/t05.png" />设置</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></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"></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”的元素,
						//然后再从中筛选标签,最后修改标签中的内容
						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>功能菜单</div>
<dl class="leftmenu">
  <dd>
    <div class="title"> <img src="images/leftico05.png" />购物后台管理 </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"> <img src="images/leftico02.png" />影视后台管理 </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"><img src="images/leftico05.png" />餐饮后台管理</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"><img src="images/leftico04.png" />订单管理</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"><img src="images/leftico04.png" />交易记录</div>
  </dd>
  <dd>
    <div class="title"><a href="jqueryChart.html"  target="rightFrame"><img src="images/leftico06.png" />统计报表</a></div>
  </dd>
  <dd>
    <div class="title"><img src="images/leftico04.png" />权限分配</div>
  </dd>
  <dd>
    <div class="title"><img src="images/leftico08.png" />修改密码</div>
  </dd>
  <dd>
    <div class="title"><img src="images/leftico07.png" />系统设置</div>
  </dd>
</dl>
</body>
</html>

Web前端设计开发课后任务漫步时尚广场任务第五章源码前台模块shoppingShow_goodshtmlshoppingShow_goods_byScripthtml后台模块css文件topcss
Web前端设计开发课后任务漫步时尚广场任务源码第二章任务21任务22tophtmllefthtmlshop_searchhtmlfoodlisthtmlmainhtml第二章注:素材图片路径需要根据
Web前端设计开发课后任务漫步时尚广场代码第一章任务11任务12任务13任务14第一章图片素材路径根据实际情况进行修改任务11<!菜单导航栏start><divclassnav_b
第三章任务31任务32注:素材图片路径需要根据实际情况修改任务31<!DOCTYPEhtml><htmllangen><head><metacharsetUT
Web前端设计开发课后任务漫步时尚广场任务源码第四章任务41任务42第四章注:素材图片路径需要根据实际情况修改任务41<!DOCTYPEhtmlPUBLIC//W3C//DTDXHTML10T
&x1f345;作者主页:Java李杨勇&x1f345;简介:Java领域优质创作者&x1f3c6;、【java李杨勇】公号作者✌简历模板、学习资料、面试题库【关注我,都给你】&x1f345;文末获
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生,可以说这是前端的世界,就没有前端解决不了的,而在前端的世界里就没有javascript实现不了的。关于JavaS
章一:css复杂选择器,权重计算问题,css基础属性并列选择器:多个限制条件,选中一个元素,并且不加空格写在一起。如:divdemo{}分组选择器如:em,strong,p{}
1、HTML简介HTML指的超文本标记语言(HyperTextMarkupLanguage),是一种用来描述网页的语言。超文本指的是除了可以包含文字之外,还可以包含图片、链接、音乐、视频、程序等内容。
菜单中有的项目有夏季菜单,需要添加一个三角形,这个三角形是利用两个边框不同颜色产生的楔形制作的设置盒子的高度和宽度均为0,边框合适的大小,透明颜色,对应边设置高度、颜色<!DOCTYPEhtml