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

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

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

  • 第二章
    • 任务2-1
    • 任务2-2
      • top.html
      • left.html
      • shop_search.html
      • foodlist.html
      • main.html

第二章

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

任务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">&nbsp;网站导航
            <img src="images/arrow.gif">&nbsp;
            我的购物车
            0件<img src="images/arrow.gif"/>
            </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">&nbsp;</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">&nbsp;</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><a href="#">上衣</a>
                          <img src="images/arrow_r.jpg" align="right"></td>
            </tr>
            <tr>
                <td><a href="#">下装</a>
                          <img src="images/arrow_r.jpg" align="right"></td>
            </tr>
            <tr>
                <td><a href="#">连衣裙</a>
                          <img src="images/arrow_r.jpg" align="right"></td>
            </tr>
            <tr>
                <td><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">洗护套装&nbsp;&nbsp;面部精华&nbsp;&nbsp;香水</td>
                            </tr>
                            <tr>
                                <td colspan="2">粉底液&nbsp;&nbsp;面霜&nbsp;&nbsp;洁面</td>
                            </tr>
                            <tr>
                                <td colspan="2">美容工具&nbsp;&nbsp;复方精油&nbsp;&nbsp;洗发水</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><img src="manageadmin/images/help.png" title="帮助" class="helping"/>
      <a href="#">帮助</a></li>
     <li><a href="#">关于</a></li>
     <li><a href="login.html" target="_parent">退出</a></li>
    </ul>
    <div class="user">admin<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">功能菜单</div>
   <dl class="leftmenu">
    <dd>
     <div class="title">
      <img src="manageadmin/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="manageadmin/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="manageadmin/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>
   <!--此处省略其他左侧导航项...-->
   </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">位置:
   <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"><img src="manageadmin/images/t01.png" />添加</li>
    <li class="click"><img src="manageadmin/images/t02.png" />修改</li>
    <li><img src="manageadmin/vimages/t03.png" />删除</li>
    <li><img src="manageadmin/images/t04.png" />统计</li>
    <li><img src="manageadmin/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="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>条记录,当前显示第&nbsp;
    <i class="blue">2&nbsp;</i>页</div>
  <ul class="paginList">
   <li class="paginItem"><a href="javascript:;">
     </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"></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>

运行结果

Web前端设计开发课后任务漫步时尚广场任务源码第二章任务21任务22tophtmllefthtmlshop_searchhtmlfoodlisthtmlmainhtml第二章注:素材图片路径需要根据
Web前端设计开发课后任务漫步时尚广场代码第一章任务11任务12任务13任务14第一章图片素材路径根据实际情况进行修改任务11<!菜单导航栏start><divclassnav_b
Web前端设计开发课后任务漫步时尚广场任务第五章源码前台模块shoppingShow_goodshtmlshoppingShow_goods_byScripthtml后台模块css文件topcss
第三章任务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