【任务2-1】实现Q-Walking E&S购物模块首页的设计。
<!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/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.focusBox {
position: absolute;
top: 490px;
width: 120px;
left: 50%;
margin-left: -60px;
list-style: none;
}
.focusBox li {
float: left;
margin-right: 10px;
width: 15px;
height: 15px;
border-radius: 10px;
background: gray;
cursor: pointer;
}
.focusBox li.cur {
background: #f60;
opacity: 0.6;
filter: alpha(opacity=60);
}
</style>
<script type="text/javascript" src="js/pictureSlide.js" ></script>
</head>
<body>
<!--顶部区域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7" ><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="padding-top"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="../manageadmin/login.html" class="orange">[请登录]</a> <a href="../register/register.html" class="orange"> [免费注册]</a></td>
<td align="right" > 客户服务<img src="images/arrow.gif"> 网站导航<img src="images/arrow.gif"> <span class="droparrow"><span class="shopcart"></span>我的购物车<span class="orange">0</span>件<img src="images/arrow.gif" /></span></td>
</tr>
</table></td>
</tr>
</table>
<!--顶部区域 end-->
<!--logo和banner start-->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><a href="../index.html"><img src="images/logo.jpg"></a></td>
<td align="right"><img src="images/banner.jpg"></td>
</tr>
</table>
<!--logo和banner end-->
<!--菜单导航 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626" >
<tr>
<td><table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16">
<tr>
<td width="200"> </td>
<td width="80" align="center" class="nav_active"><a href="shoppingIndex.html" class="white">首页</a></td>
<td width="100" align="center"><a href="shoppingShow.html" class="white">最新上架</a></td>
<td width="100" align="center">品牌活动</td>
<td width="100" align="center">原厂直供</td>
<td width="80" align="center">团购</td>
<td width="100" align="center">限时抢购</td>
<td width="100" align="center">促销打折</td>
<td width="200" align="center"> </td>
</tr>
</table></td>
</tr>
</table>
<!--菜单导航 end-->
<!--中间部分 start-->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td width="220" valign="top" ><!--购物分类 start-->
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table1" bgcolor="#e5e4e1">
<tr>
<th >女装</th>
</tr>
<tr>
<td ><span class="red_dot"></span><a href="#" >上衣</a><img src="images/arrow_r.jpg" align="right" ></td>
</tr>
<tr>
<td ><span class="red_dot"></span>下装<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>连衣裙<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>内衣<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>男装</th>
</tr>
<tr>
<td ><span class="red_dot"></span>T恤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>短裤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>衬衫<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>童装</th>
</tr>
<tr>
<td ><span class="red_dot"></span>上衣<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>裤子<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>运动</th>
</tr>
<tr>
<td ><span class="red_dot"></span>运动裤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>跑步鞋<img src="images/arrow_r.jpg" align="right"></td>
</tr>
</table>
<!--购物分类end--></td>
<td width="716" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!--焦点图 start-->
<img src="images/index/pic1.jpg" width="690" height="350" id="focusImg">
<ul class="focusBox">
<li onclick="showPic(1);"></li>
<li onclick="showPic(2);"></li>
<li onclick="showPic(3);"></li>
</ul>
<!--焦点图 end-->
</td>
<td valign="top">
<!--右侧start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!--公告 start-->
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#eeeeee">
<tr>
<td height="35" bgcolor="#f7f7f7" class="notice_title">公告</td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td height="30" class="notice_text"><a href="#"><span class="gray_dot"></span>李克强点赞网店第一村</a></td>
</tr>
<tr>
<td height="30" class="notice_text"><span class="gray_dot"></span>网购维权有望一站解决</td>
</tr>
<tr>
<td height="30" class="notice_text"><span class="gray_dot"></span>25国30万商品全球直供</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>青岛交警淘宝体获公安部肯定</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>面对新常态 惟改革创新</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>差评敲诈淘宝 “差评师”获刑8个月</td>
</tr>
</table></td>
</tr>
</table>
<!--公告 end--></td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr>
<td><!--品牌推荐区 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f7f7f7">
<tr>
<td align="center"><img src="images/index/link1.gif" width="80" height="35"></td>
<td align="center"><img src="images/index/link2.gif" width="80" height="35"></td>
<td align="center"><img src="images/index/link3.gif" width="80" height="35"></td>
</tr>
<tr>
<td align="center"><img src="images/index/link4.gif" width="80" height="35"></td>
<td align="center"><img src="images/index/link7.jpg" width="90" height="45" /></td>
<td align="center"><img src="images/index/link6.jpg" width="90" height="45"></td>
</tr>
<tr>
<td align="center"><img src="images/index/link5.jpg" width="90" height="45" /></td>
<td align="center"><img src="images/index/link8.jpg" width="90" height="45"></td>
<td align="center"><img src="images/index/link9.jpg" width="90" height="45"></td>
</tr>
</table>
<!--品牌推荐区 end--></td>
</tr>
</table>
<!-- 右侧end--></td>
</tr>
</table></td>
</tr>
<!--产品分类区start-->
<tr>
<td><table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#dddddd">
<tr>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro1.jpg" width="65" height="65"></td>
<td class="font14">热门品类<br/>
护肤彩妆启示</td>
</tr>
<tr>
<td colspan="2">洗护套装 面部精华 香水</td>
</tr>
<tr>
<td colspan="2">粉底液 面霜 洁面</td>
</tr>
<tr>
<td colspan="2">美容工具 复方精油 洗发水 </td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro2.jpg" width="65" height="65"></td>
<td class="font14">强效保养<br/>
逆转皮肤问题</td>
</tr>
<tr>
<td colspan="2">隔离 保湿 补水 清洁</td>
</tr>
<tr>
<td colspan="2">清爽 排毒 去角质</td>
</tr>
<tr>
<td colspan="2">美白 袪痘 收缩毛孔 紧质</td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro3.jpg" width="65" height="65"></td>
<td class="font14"> 人气品牌<br/>
最IN大牌</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">薇姿
欧莱雅
美宝莲 </td>
</tr>
<tr>
<td colspan="2">SK-II
百雀羚
雅顿 </td>
</tr>
<tr>
<td colspan="2">美即
谜尚
妮维雅 </td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro4.jpg" width="65" height="65"></td>
<td class="font14">潮流单品<br/>
当季最红</td>
</tr>
<tr>
<td colspan="2">奶浴奶膏 补水凝胶 </td>
</tr>
<tr>
<td colspan="2">防装生发液 假发片 香水</td>
</tr>
<tr>
<td colspan="2">艾米尔彩妆 丰胸美乳霜</td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro5.jpg" width="65" height="65"></td>
<td class="font14">美装精选<br/>
超赞专题</td>
</tr>
<tr>
<td colspan="2">孕妇护肤 护季保养</td>
</tr>
<tr>
<td colspan="2">护肤嫩白集锦 快速约会妆</td>
</tr>
<tr>
<td colspan="2">美容时钟模式 5步护肤术</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- 产品分类区end-->
</table></td>
</tr>
</table>
<!--中间部分 end-->
<!--底部 start--><Br/>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" height="35" class="foot_bg">
<tr>
<td class="padding-top"><table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" align="center"><img src="images/gray1.jpg" ></td>
<td width="20%" align="center"><img src="images/gray2.jpg" ></td>
<td width="20%" align="center"><img src="images/gray3.jpg" ></td>
<td width="20%" align="center"><img src="images/gray4.jpg" ></td>
<td width="20%" align="center"><img src="images/gray5.jpg" ></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#efefef" class="foot_line padding-top"><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img src="images/red1.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">新手指导</td>
</tr>
<tr>
<td>用户注册</td>
</tr>
<tr>
<td>电话下单</td>
</tr>
<tr>
<td>购物流程</td>
</tr>
<tr>
<td>购物保障</td>
</tr>
<tr>
<td>服务协议</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red2.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">支付方式</td>
</tr>
<tr>
<td>货到付款</td>
</tr>
<tr>
<td>商城卡支付</td>
</tr>
<tr>
<td>支付宝、网银支付</td>
</tr>
<tr>
<td>优惠券抵用</td>
</tr>
</table>
<td align="center" valign="top"><img src="images/red3.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">配送方式</td>
</tr>
<tr>
<td>闪电发货</td>
</tr>
<tr>
<td>满百包邮</td>
</tr>
<tr>
<td>配送范围及时间</td>
</tr>
<tr>
<td>商品验收及签收</td>
</tr>
<tr>
<td>服务协议</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red4.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">售后服务</td>
</tr>
<tr>
<td>退换货协议</td>
</tr>
<tr>
<td>关于发票</td>
</tr>
<tr>
<td>退换货流程</td>
</tr>
<tr>
<td>退换货运费</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red5.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">关于帐号</td>
</tr>
<tr>
<td>修改个人信息</td>
</tr>
<tr>
<td>修改密码</td>
</tr>
<tr>
<td>找回密码</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red6.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">优惠活动</td>
</tr>
<tr>
<td>竞拍须知</td>
</tr>
<tr>
<td>抢购须知</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br/>
中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022<br/>
<img src="images/foot_pic.jpg"></td>
</tr>
</table>
<!--底部 end-->
</body>
</html>
【任务2-2】实现Q-Walking E&S后台管理页面。
<!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>
<!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" />
<script language="JavaScript" src="js/jquery-1.x.js"></script>
<script type="text/javascript">
$(function(){
//导航切换
$(".menuson li").click(function(){
$(".menuson li.active").removeClass("active")
$(this).addClass("active");
});
$('.title').click(function(){
var $ul = $(this).next('ul');
$('dd').find('ul').slideUp();
if($ul.is(':visible')){
$(this).next('ul').slideUp();
}else{
$(this).next('ul').slideDown();
}
});
})
</script>
</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>
<!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>
<!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" />
<script type="text/javascript" src="js/jquery-1.x.js"></script>
<script type="text/javascript" src="js/tableOperator.js"></script>
</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"> 今天是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="checkAll" type="checkbox" id="checkAll" onchange="selectAll()"/>全选/
<input name="checkOther" type="checkbox" id="checkOther" onchange="selectOther()"/>反选
</th>
<th>缩略图</th>
<th>商品名称</th>
<th>商品类别</th>
<th>数量(件）</th>
<th>单价（元）</th>
<th>发布时间</th>
<th>是否审核</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="checkItem" 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</td>
<td>已审核</td>
<td><a href="#" class="tablelink">查看</a>
<a href="#" class="tablelink"> 删除</a></td>
</tr>
<tr class="odd">
<td><input name="checkItem" 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</td>
<td>未审核</td>
<td><a href="#" class="tablelink">查看</a>
<a href="#" class="tablelink">删除</a></td>
</tr>
<tr>
<td><input name="checkItem" 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</td>
<td>未审核</td>
<td><a href="#" class="tablelink">查看</a>
<a href="#" class="tablelink">删除</a></td>
</tr>
<tr class="odd">
<td><input name="checkItem" type="checkbox" value="" /></td>
<td class="imgtd"><img src="images/img09.png" /></td>
<td>锐步REEBOK热2015新款</td>
<td>运动</td>
<td>3456</td>
<td>¥346.00</td>
<td>2015-06-06</td>
<td>已审核</td>
<td><a href="#" class="tablelink">查看</a>
<a href="#" class="tablelink">删除</a></td>
</tr>
<tr>
<td><input name="checkItem" 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</td>
<td>已审核</td>
<td><a href="#" class="tablelink">查看</a>
<a href="#" class="tablelink">删除</a></td>
</tr>
</tbody>
</table>
<!--<script type="text/javascript">
//全选或全不选
function selectAll(){
var items=document.getElementsByName("checkItem");
var checkAll=document.getElementById("checkAll");
var checkOther=document.getElementById("checkOther");
checkOther.checked=false;
for(var i=0;i<items.length;i++){
items[i].checked=checkAll.checked;
}
}
//反选
function selectOther(){
var items=document.getElementsByName("checkItem");
var checkAll=document.getElementById("checkAll");
var checkOther=document.getElementById("checkOther");
checkAll.checked=false;
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
}
}
</script>-->
<!--<script type="text/javascript" src="js/jquery-1.x.js"></script>-->
<script type="text/javascript">
function selectAll(){
var items=$("[name='checkItem']");
var checkAll=$("#checkAll");
$("#checkOther").prop("checked",false);
for(var i=0;i<items.length;i++){
$(items[i]).prop("checked",checkAll.prop("checked"));
}
}
function selectOther(){
var items=$("[name='checkItem']");
$("#checkAll").prop("checked",false);
for(var i=0;i<items.length;i++){
$(items[i]).prop("checked",!$(items[i]).prop("checked"));
}
}
</script>
<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>
<!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>
【任务3-1】实现Q-Walking E&S用户注册页面。
<!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>用户注册-Q-Walking E&S</title>
<link href="css/register.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/cascade.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script type="text/javascript" src="js/onLoad.js"></script>
</head>
<body>
<!--顶部区域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7" ><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="padding-top"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="../manageadmin/login.html" class="orange">[请登录]</a> <a href="#" class="orange"> [免费注册]</a></td>
<td align="right" > 客户服务<img src="images/arrow.gif"> 网站导航<img src="images/arrow.gif"> <span class="droparrow"><span class="shopcart"></span>我的购物车<span class="orange">0</span>件<img src="images/arrow.gif" /></span></td>
</tr>
</table></td>
</tr>
</table>
<!--顶部区域 end-->
<!--logo和banner start-->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><img src="../register/images/logo.jpg"></td>
<td align="right"><img src="../register/images/banner.jpg"></td>
</tr>
</table>
<!--logo和banner end-->
<!--菜单导航 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626" >
<tr>
<td><table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16" height="40">
<tr>
<td width="200"> </td>
<td width="80" align="center" >首页</td>
<td width="100" align="center">最新上架</td>
<td width="100" align="center">品牌活动</td>
<td width="100" align="center">原厂直供</td>
<td width="80" align="center">团购</td>
<td width="100" align="center">限时抢购</td>
<td width="100" align="center">促销打折</td>
<td width="200" align="center"> </td>
</tr>
</table></td>
</tr>
</table>
<!--菜单导航 end-->
<!--注册部分 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0"
bgcolor="#f8f8f8">
<tr>
<td>
<table width="1000" border="0" cellspacing="0" cellpadding="0"
bgcolor="#ffffff" align="center">
<tr>
<td valign="top"><h2 align="center">用户注册</h2>
<hr width="90%" align="center" color="#ccc"/></td>
<td width="420" rowspan="2" valign="middle">
<img src="images/zhuce_pic.jpg" align="right"/></td>
</tr>
<tr>
<td valign="top">
<form action="#" method="post" enctype="multipart/form-data">
<table width="90%" border="0" cellspacing="0" cellpadding="0"
class="reg" align="center">
<tr>
<td width="80">用户名：</td>
<td><input name="userName" type="text" id="userName"
value="请输入用户名" /></td>
</tr>
<tr>
<td>邮箱地址：</td>
<td><input name="email" type="text" id="email"
value="请输入邮箱地址" /></td>
</tr>
<tr>
<td>设置密码：</td>
<td><input name="userPwd" type="password" id="userPwd" /></td>
</tr>
<tr>
<td> </td>
<td class="gray12">6-20个字符，由字母、数字和符号的两种以上组合。 </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input name="userRePwd" type="password" id="userRePwd" /></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input name="realName" type="text" id="realName"
value="请输入真实姓名" /></td>
</tr>
<tr>
<td>您的性别：</td>
<td><input type="radio" name="sex" value="radio" checked/>男
<input type="radio" name="sex" value="radio" />女</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" name="headPic" id="headPic" /></td>
</tr>
<tr>
<td>您的手机：</td>
<td><input name="mobile" type="text" id="mobile"
value="请输入您的手机号" /></td>
</tr>
<tr>
<td>单位名称：</td>
<td><input name="company" type="text" id="company"
value="请输入单位名称" /></td>
</tr>
<!-- <tr>
<td>单位地址：</td>
<td><select name="province">
<option>请选择省份</option>
<option>北京市</option>
<option>上海市</option>
<option>山东省</option>
</select>
<select name="city">
<option>请选择城市</option>
<option>青岛市</option>
<option>济南市</option>
<option>东营市</option>
</select>
<select name="area">
<option>请选择区</option>
<option>四方区</option>
<option>市南区</option>
<option>市北区</option>
</select></td>
</tr>-->
<tr>
<td>单位地址：</td>
<td><select name="province" id="province">
<option>-请选择省份-</option>
</select>
<select name="city" id="city">
<option>-请选择城市-</option>
</select>
<select name="area" id="area">
<option>-请选择区-</option>
</select></td>
</tr>
<tr>
<td> </td>
<td><input name="address" type="text" id="address"
value="请输入街道地址" /></td>
</tr>
<tr>
<td>您的爱好：</td>
<td><input name="hobby" type="checkbox" value="购物" />购物
<input name="hobby" type="checkbox" value="影视" />影视
<input name="hobby" type="checkbox" value="餐饮" />餐饮</td>
</tr>
<tr>
<td>协议内容：</td>
<td><textarea cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" value="提交" /></td>
</tr>
</table>
</form></td>
</tr>
</table>
<!--三大模块图片-->
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" class="padding-bottom">
<tr>
<td align="center"><a href="#"><img src="images/shop.jpg" class="bian"/></a></td>
<td align="center"><a href="#"><img src="images/movie.jpg" class="bian"/></a></td>
<td align="center"><a href="#"><img src="images/food.jpg" class="bian"/></a></td>
</tr>
</table></td>
</tr>
</table>
<!--注册部分 end-->
<!--底部 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" >
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br/>
中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022<br/>
<img src="../register/images/foot_pic.jpg"></td>
</tr>
</table>
<!--底部 end-->
</body>
</html>
【任务3-2】实现Q-Walking E&S后台管理模块-商品添加页面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品页面-后台管理系统</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/add.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.x.js"></script>
<script type="text/javascript" src="js/cascadingMenu.js"></script>
<script type="text/javascript">
$(function(){
//自定义商品种类
var opts=[{
"text":"男装",
"value":"男装",
"subType":[{"value":"男士外套","text":"男士外套"},
{"value":"男士内搭","text":"男士内搭"},
{"value":"特色服装","text":"特色服装"}]
},{
"text":"女装",
"value":"女装",
"subType":[{"value":"开衫毛衣","text":"开衫毛衣"},
{"value":"印花连衣裙","text":"印花连衣裙"},
{"value":"时尚外套","text":"时尚外套"},
{"value":"休闲套装","text":"休闲套装"}]
},{
"text": "腕表",
"value": "腕表",
"subType": [{"value":"瑞士品牌","text":"瑞士品牌"},
{"value":"欧美品牌","text":"欧美品牌"},
{"value":"德国品牌","text":"德国品牌"},
{"value":"国产品牌","text":"国产品牌"}]
}];
//首先清空指定的元素，然后通过自定义的商品类型实现二级菜单级联
$(".vocation:first").empty().cascadingMenuPlugins(opts);
//首先清空指定的元素，然后通过默认的商品类型实现二级菜单级联
//$(".vocation:first").empty().cascadingMenuPlugins();
});
</script>
<script type="text/javascript">
$(function(){
//为商品名称输入框绑定获得焦点和失去焦点时的处理函数
$("#goodsName").on("focus",function(){
$(this).css({backgroundColor:"#FFEC8B",borderColor:"#999",color:"#000000"});
if($(this).val()=="请填写商品名称"){
$(this).val("");
}
}).on("blur",function(){
$(this).css({backgroundColor:"#FFFFFF",borderColor:"",color:"#000000"});
if($(this).val()==""){
$(this).val("请填写商品名称");
}
});
//为单价和团购价绑定获得焦点时的处理函数
$("input[id$='Price']").on("focus",function(){
$(this).css({fontSize:"16px",color:"red"});
});
//为数量文本框绑定失去焦点时的处理函数
$("input[type='number']:last").on("blur",function(){
if($(this).val()<0){
alert("数量不能小于0");
$(this).select();
}
});
//判断日期格式是否有效
$("input[type='date']").on("blur",function(){
//日期格式验证2016-10-03或2016/10/03
var dateReg=/(\d{4})[-\/](\d{1,2})[-\/](\d{1,2})/;
if(!dateReg.test($(this).val())){
alert("日期格式不正确，请输入yyyy-MM-dd或yyyy/MM/dd格式的日期");
$(this).select();
}
});
//为发布按钮绑定处理函数
$("input[type='submit']").on("click",function(){
if($("#thumbImage").val()==""){
alert("请选择商品缩略图!");
return false;
}
if($("#goodsName").val()==""||$("#goodsName").val()=="请填写商品名称"){
alert("请填写商品名称!");
return false;
}
if($(".tabson textarea").val()==""){
alert("请完善商品的详细信息！");
return false;
}
$(".tabson form").submit();
});
});
</script>
</head>
<body>
<div class="place"><span>位置：</span>
<ul class="placeul">
<li><a href="main.html" target="_parent">首页</a></li>
<li><a href="#">添加商品</a></li>
</ul>
</div>
<div class="formbody">
<div class="usual">
<div class="tabson">
<form id="addgoodsForm" method="post" action="http://www.itshixun.com">
<ul class="forminfo">
<li>
<label>商品缩略图<b>*</b></label>
<input name="thumbImage" id="thumbImage" type="file" multiple="multiple"/>
</li>
<li>
<label>商品名称<b>*</b></label>
<input name="goodsName" id="goodsName" type="text" class="dfinput" value="请填写商品名称"
required="required" style="width:500px;"/>
</li>
<li>
<label>商品类别<b>*</b></label>
<div class="vocation">
<select class="select3" name="goodsType" id="goodsType">
<option>男装</option>
<option>女装</option>
<option>童装</option>
<option>运动</option>
<option>其他</option>
</select>
</div>
</li>
<li>
<label>商品单价<b>*</b></label>
<input name="unitPrice" id="unitPrice" class="dfinput" type="number" required="required" style="width:100px;"/>元 </li>
<li>
<label>团购价<b>*</b></label>
<input name="groupPrice" id="groupPrice" class="dfinput" type="number" required="required" style="width:100px;"/>元 </li>
<li>
<label>商品数量<b>*</b></label>
<input name="goodsNumber" id="goodsNumber" type="number" class="dfinput" required="required" style="width:100px;"/>
件 </li>
<li>
<label>发布日期<b>*</b></label>
<input name="publishDate" id="publishDate" type="date" class="dfinput" required="required" style="width:120px;"/>
</li>
<li>
<label>是否审核<b>*</b></label>
<div class="vocation">
<select class="select3" name="isChecked" id="isChecked">
<option>已审核</option>
<option>未审核</option>
</select>
</div>
</li>
<li>
<label>商品描述<b>*</b></label>
<textarea name="goodsDescription" rows="3" id="content" style="width:500px;height:100px;"></textarea>
</li>
<li> <label> </label>
<input type="submit" class="btn" id="btnPublish" value="马上发布"/>
</li>
</ul>
</form>
</div>
</div>
</div>
</body>
</html>
扫一扫
3292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
