【任务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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>NBA-购物栏目</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<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="" >收藏|HI,欢迎来订购!
<a href="" class="orange">[请登陆]</a>
<a href="" class="orange">[免费注册]</a></td>
<td align="right">客户服务<img src="" > 网站导航
<img src="" > <span class="droparrow">
<span class="shopcart"></span>我的购物车
<span class="orange">0</span>件<img src="" />
</span></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="center" bgcolor="#00c">
<tr>
<td height="95"><a href="index.html"><img src="F:\Sublime Text 3 中文优化版\project\imgic\nba1.png"></a></td>
<td align="right"><font color="#0A0" size="12">NBASHOPPING.COM</font></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626">
<tr>
<td width="200"> </td>
<td width="80" align="center" class="nav_active">
<a href="shopping <td>
<table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16">
<tr>
Index.html" class="white">首页</a> </td>
<td width="80" align="center" class="nav_active">
<a href="shoppingShow.html" class="white">最新上架</a> </td>
<td width="100" align="center">品牌活动</td>
<td width="100" align="center">原厂直供</td>
<td width="100" 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>
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center" class="padding-top">
<tr>
<td width="220" valign="top">
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="table1" bgcolor="#e5e4e1">
<tr><th align="left" bgcolor="#0f0">衣服</th></tr>
<tr>
<td><span class="red_dot"></span><a href="#">卫衣</a>
<img src="imgic/wy.jpg" align="right">
</td>
</tr>
<tr>
<td><span class="red_dot"></span><a href="#">球衣</a>
<img src="imgic/qy.jpg" align="right">
</td>
</tr>
<tr>
<td><span class="red_dot"></span><a href="#">球裤</a>
<img src="imgic/qk.jpg" align="right">
</td>
</tr>
<tr>
<td><span class="red_dot"></span><a href="#">球鞋</a>
<img src="imgic/qx.jpg" align="right">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="table2" bgcolor="#e5e4e1">
<tr><th bgcolor="#0f0" align="left">配件</th></tr>
<tr>
<td><span class="red_dot"></span><a href="#">帽子</a>
<img src="imgic/mz.jpg" align="right">
</td>
</tr>
<tr>
<td><span class="red_dot"></span><a href="#">牙套</a>
<img src="" align="right">
</td>
</tr>
<tr>
<td><span class="red_dot"></span><a href="#">护腕</a>
<img src="" align="right">
</td>
</tr>
<tr>
<td><span class="red_dot"></span><a href="#">袜子</a>
<img src="" align="right">
</td>
</tr>
</table>
</td>
<td width="716" valign="top">
<table width="100%" border="0 cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<img src="imgic/zy.jpg" width="690" height="350">
</td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#eee">
<tr>
<td height="35" class="notice_title">热门比赛</td>
</tr>
<tr>
<td bgcolor="#fff">
<table width="95%" class="padding_top">
<tr><td height="30" class="notice_text">勇士VS火箭</td></tr>
<tr><td height="30" class="notice_text">凯尔特人VS骑士</td></tr>
<tr><td height="30" class="notice_text">猛龙VS雷霆</td></tr>
<tr><td height="30" class="notice_text">开拓者VS湖人</td></tr>
<tr><td height="30" class="notice_text">国王VS快船</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><td height="8"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
<tr>
<td align="center">
<img src="imgic/tj1.jpg" width="100" height="45">
</td>
<td align="center">
<img src="imgic/tj2.jpg" width="100" height="45">
</td>
<td align="center">
<img src="imgic/tj3.jpg" width="100" height="45">
</td>
<td align="center">
<img src="imgic/tj4.jpg" width="100" height="45">
</td>
<td align="center">
<img src="imgic/tj5.jpg" width="100" height="45">
</td>
<td align="center">
<img src="imgic/tj6.jpg" width="100" height="45">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#ddd">
<tr>
<td width="20%" bgcolor="#fff">
<table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="imgic/cx1.jpg" width="100" height="100"></td>
<td class="font14">猜你喜欢<br/>[2.5折]NBA adidas/克里夫蘭騎士Kyrie Irving Swingman
NT699.00</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#ddd">
<tr>
<td width="20%" bgcolor="#fff">
<table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="imgic/cx2.jpg" width="100" height="100"></td>
<td class="font14">猜你喜欢<br/>NBA/ LOGO Tee/ 休斯頓火箭 (black) NT999.0</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#ddd">
<tr>
<td width="20%" bgcolor="#fff">
<table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="imgic/cx3.jpg" width="100" height="100"></td>
<td class="font14">猜你喜欢<br/>NBA/ STANCE cartoon collection Kobe Bryant_YEL
NT680.00</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
<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="imgic/gray1.jpg"></td>
</tr>
</table>
</td>
</tr>
</table>
<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=""><br><img src=""></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>
</tr>
</table>
</td>
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q-nba NBA中国区版权所有 </td>
</tr>
</body>
</html>
【任务2-2】实现Q-Walking E&S后台管理页面。
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" xml:lang="en">
<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(imgic/topbg.gif) repeat-x;">
<div class="topleft"><a href="index.html" target="_parent">
<img src="imgic/logo.png" title="系统首页"> </a>
</div>
<ul class="nav">
<li><a href="shoppingIndex.html" target="_parent" class="selected">
<img src="imgic/" title="网站前台"/><h2>网站前台</h2></a></li>
<li><a href="foodlist.html" target="rightFrame">
<img src="imgic/" title="后台首页"/><h2>后台首页</h2></a></li>
<li><a href="addgoods.html" target="rightFrame">
<img src="imgic/" title="添加商品"/><h2>添加商品</h2></a></li>
<li><a href="addmovies.html" target="rightFrame">
<img src="imgic/" title="添加影视"/><h2>添加影视</h2></a></li>
</ul>
<div class="topright">
<ul>
<li><span><img src="" title="帮助" class="helping"/></span><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
<li><a href="shoppingIndex.html" target="_parent">退出</a></li>
</ul>
<div class="user"><span>admin</span><i>消息</i><b>5</b></div>
</div>
</body>
</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" xml:lang="en">
<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=""></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=""></span>影视后台管理
</div>
<ul class="menuson">
<li><cite></cite><a href="addmovies.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>
</dl>
</body>
</html>
shop_search.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" xml:lang="en">
<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>
<ul class="seachform">
<li>
<div class="vocation">
<select class="select3">
<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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>NBA-购物栏目管理系统</title>
</head>
<frameset cols="187" frameborder="no" border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame"/>
<frameset rows="88,*" cols="*" 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" scrolling="no" noresize="noresize" id="rightFrame" title="rightFrame"/>
</frameset>
</frameset>
<body>
您的浏览器不支持框架集
</body>
</html>
【任务3-1】实现Q-Walking E&S用户注册页面。
【任务3-2】实现Q-Walking E&S后台管理模块-商品添加页面。
register.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>用户注册NBA</title>
<link href="css/register.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--顶部区域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7">
</td>
</tr>
</table>
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><img src=""></td>
<td align="right"><img src=""></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626">
<tr>
<td>
</td>
</tr>
</table>
<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-12个字符,由字母,数字和符号的两种以上组合。 </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>
<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="影视"/>影视
</td>
</tr>
<tr>
<td>协议内容:</td>
<td><textarea cols="30" row="3"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" value="提交"/></td>
</tr>
</tr>
</table>
</form>
</td>
</tr>
</table>
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" class="padding_bottom">
<tr>
<td align="center"><img src="images/shop.jsp" class="bian"/></td>
<td align="center"><img src="images/movie.jsp" class="bian"/></td>
</tr>
</table></td>
</tr>
</table>
<div class="foot_line"></div>
<p align="center" class="padding-top">Copyright 2015-2020 NBA-SHOPPING
版权所有<br/> </p>
<div class="center"></div>
</body>
</html>
addgoods.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"/>
<<title>添加商品页面</title>
</head>
<body>
<div class="place"><span>位置:</span>
<ul class="placeul">
<li> <a href="main.html" target="_parent">首页</li>
<li> <a href="#">添加商品</a></li>
</a>
</ul>
</div>
<div class="formbody">
<table width="100%" border="0" cellpadding="0" class="table1">
<tr>
<td><label>商品缩略图<b>*</b></label></td>
<td><input name="" type="file" multiple=/></td>
</tr>
<tr>
<td><label>商品名称<b>*</b></label></td>
<td><input name="" type="text" class="dfinput" value="请填写商品名称" style="width:518px;"/></td>
</tr>
<tr>
<td><label>商品类别<b>*</b></label></td>
<td><select name="select3">
<option >男装</option>
<option >女装</option>
<option >童装</option>
<option >运动</option>
<option >其他</option>
</select></td>
</tr>
<tr><td><label>商品单价<b>*</b></label></td>
<td><input name="goodsPrice" type="text" class="dfinput" style="width:100px;"/>元</td>
</tr>
<tr>
<td><label>团购价<b>*</b></label></td>
<td><input name="goodsPrice" type="text" class="dfinput" style="width:100px;"/>元</td>
</tr>
<tr>
<td><label>商品数量<b>*</b></label></td>
<td><input name="amount" type="text" class="dfinput" style="width:100px;"/>件</td>
</tr>
<tr>
<td><label>发布日期<b>*</b></label></td>
<td><input name="upTime" type="text" class="dfinput" style="width:100px;"/></td>
</tr>
<tr>
<td><label>是否审核<b>*</b></label></td>
<select name="check" class="select3">
<option >已审核</option>
<option >未审核</option>
</select>
</tr>
<tr>
<td><label>商品描述<b>*</b></label></td>
<td><textarea name="content" rows="3" id="content"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" class"btn" value="马上发布" /></td>
</tr>
</table>
</div>
</body>