Web前端设计与开发-课后任务-漫步时尚广场任务源码
第二章
注: 素材图片路径需要根据实际情况修改
任务2-1
<!DOCTYPE html PUBLIC"- //W3C//DTD XHTML 1.0 Transitional//EN"
"htttp://www.w3.org/TR/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="ccs/style.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">
<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="shoppongIndex.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" cellspacing="0" cellpadding="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><a href="#">下装</a>
<img src="images/arrow_r.jpg" align="right"></td>
</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><a href="#">内衣</a>
<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">
<!--焦点图 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" class="notice_title">公告</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="95%" class="padding-top">
<tr>
<td height="30" class="notice_text">
李主任点赞网第一村</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>
<!--其他匹配推荐此处省略...-->
</table>
<!--品牌推荐区 end-->
</td>
</tr>
</table>
<!--右侧 end-->
</td>
</tr>
</table>
</td>
</tr>
<!--产品分类区 start-->
<tr>
<td>
<table width="99%" border="0" 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>
<!--此处省略其他分类产品...-->
</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" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center"><img src="images/gray1.jpg" alt=""></td>
<td width="20%" align="center"><img src="images/gray2.jpg" alt=""></td>
<td width="20%" align="center"><img src="images/gray3.jpg" alt=""></td>
<td width="20%" align="center"><img src="images/gray4.jpg" alt=""></td>
<td width="20%" align="center"><img src="images/gray5.jpg" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#efefef" class="foot_line padding-top">
<table width="1200" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src="images/red1.jpg" alt=""><br><img src="images/line1.jpg" alt=""></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>
<!-- 此处省略支付方式、配送方式、售后服务等内容... -->
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q - Walking Fashion E&S 漫步时尚广场(QST教育)版权所有<br/>中国青岛 高新区广博路325号 青软教育集团 咨询热线：400-658-0166 400-658-1022 <br/><img src="images/foot_pic.jpg" alt=""></td>
</tr>
</table>
<!-- 底部 end -->
</body>
</html>
运行结果
任务2-2
top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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 rel="stylesheet" href="css/layout.css" type="text/css" />
<link rel="stylesheet" href="css/top.css" type="text/css" />
</head>
<body style="background:url(images/topbg.gif) repeat-x;">
<div class="topleft"><a href="../index.html" target="_parent">
<img src="manageadmin/images/logo.png" title="系统首页" /></a>
</div>
<ul class="nav">
<li><a href="../index.html" target="parent" class="selected">
<img src="manageadmin/images/globe.png"title="网站前台" /><h2>网站前台</h2></a></li>
<li><a href="foodlist.html" target="rightFrame">
<img src="manageadmin/images/home.png"title="后台首页" /><h2>后台首页</h2></a></li>
<li><a href="addgoods.html" target="rightFrame">
<img src="manageadmin/images/shop.png"title="添加商品" /><h2>添加商品</h2></a></li>
<li><a href="addmovie.html" target="rightFrame">
<img src="manageadmin/images/movie.png"title="添加电影" /><h2>添加电影</h2></a></li>
<li><a href="addfood.html" target="rightFrame">
<img src="manageadmin/images/food.png"title="添加餐饮" /><h2>添加餐饮</h2></a></li>
</ul>
<div class="topright">
<ul>
<li><span><img src="manageadmin/images/help.png" title="帮助" class="helping"/>
</span><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
<li><a href="login.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"> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>左侧导航页面</title>
<link rel="stylesheet" href="css/left.css" type="text/css"/>
</head>
<body style="background:#f0f9fd;">
<div class="lefttop"><span></span>功能菜单</div>
<dl class="leftmenu">
<dd>
<div class="title">
<span><img src="manageadmin/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="manageadmin/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="manageadmin/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>
<!--此处省略其他左侧导航项...-->
</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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>商品检索</title>
<link rel="stylesheet" href="css/layout.css" type="text/css"/>
<link rel="stylesheet" href="css/list.css" 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" name="scinput" value="请输入商品名称"/></li>
<li><input name="searchBtn" type="button" class="scbtn" value="查询"></li>
</ul>
</body>
</html>
运行结果
foodlist.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 rel="stylesheet" href="css/layout.css" type="text/css"/>
<link rel="stylesheet" href="css/list.css" 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>
</ul>
</div>
<div class="rightinfo">
<div class="tools">
<ul class="toolbar">
<li class="click"><span><img src="manageadmin/images/t01.png" /></span>添加</li>
<li class="click"><span><img src="manageadmin/images/t02.png" /></span>修改</li>
<li><span><img src="manageadmin/vimages/t03.png" />删除</span></li>
<li><span><img src="manageadmin/images/t04.png" />统计</span></li>
<li><span><img src="manageadmin/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="manageadmin/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="old">
<td><input name="" type="checkbox" value="" /></td>
<td class="imgtd"><img src="manageadmin/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>
<!-- 此处省略其他商品内容 -->
</tbody>
</table>
<div class="pagin">共<i class="biue">1256</i>条记录,当前显示第
<i class="blue">2 </i>页</div>
<ul class="paginList">
<li class="paginItem"><a href="javascript:;">
<span class="pagepre"></span></a></li>
<li class="paginItem"><a href="javascript:;">1</a></li>
<li class="paginItem current"><a href="javascript:;">2</a></li>
<li class="paginItem more"><a href="javascript:;">...</a></li>
<li class="paginItem"><a href="javascript:;">10</a></li>
<li class="paginItem"><a href="javascript:;">
<span class="pagenxt"></span></a></li>
</ul>
</div>
</body>
</html>
运行结果
main.html
<!DOCTYPE html PUBLIC"- //W3C//DTD XHTML 1.0 Transitional//EN"
"htttp://www.w3.org/TR/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>
</head>
<frameset rows="88,*" cols="*" frameborder="no" border="0" framespace="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>
运行结果
