美文网首页
2019-03-07(一) 作业:制作淘宝店铺列表页面

2019-03-07(一) 作业:制作淘宝店铺列表页面

作者: 拾起_518 | 来源:发表于2019-03-07 10:52 被阅读0次

(一) 作业:制作淘宝店铺列表页面

  1. 训练要点
    (1) . 掌握表格、单元格的属性
    (2) . 使用表格的嵌套制作网页
  2. 实现思路
    (1) . 根据页面结构布局整体页面
    (2) . 合理地在单元格中嵌套表格
    (3) . 设置单元格的跨行或跨列
    (4) . 设置单元格的水平对齐方式
  3. 效果图
<!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>
</head>

<body>
<table width="950" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"> <img src="淘宝图片/logo.gif" width="140" height="35" /></td> 
<td align="right"> <img src="淘宝图片/search.gif" width="600" height="57" /></td>
</tr>
<tr>
<td colspan="2" height="20"></td>
</tr>
</table>

<table>
<tr><img src="淘宝图片/navbar.gif" width="950" height="34" /></tr>
<td colspan="2">  淘宝首页>店铺街>所有店铺(4626173)</td>
</tr>
<tr>
    <td valign="top">
        
        <table width="191" cellpadding="0" cellspacing="0">
        <tr>
                <td width="189" bgcolor="#E5F1FF"><strong>淘店</strong></td>
        </tr>
        <tr>
            <td>
               <img src="淘宝图片/shop_search.gif" width="181" height="432" />
             </td>
             </tr>
            <tr>
                <td bgcolor="#E5F1FF"><strong>店铺类目</strong> </td>
                </tr>
                <tr>
                    <td>  
                  <img src="淘宝图片/category.gif" width="179" height="263" />
                           </td>
                       </tr>           
                </table>               
            </td>
         <td>
         
         <table width="750" cellpadding="0" cellspacing="0">
           <tr>
               <td>
             <img src="淘宝图片/list_header.gif" width="900" height="67" />
              </td>
           </tr>
            <tr>
              <td>
              
          <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="14%" height="100" rowspan="3"  align="center" valign="middle">
                 <img src="淘宝图片/shop_ico_01.gif" width="70" height="70" /> 
               </td>
                 <td width="35%">韩都衣舍旗舰店 </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">8122</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                      山东济南
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:韩都衣舍 2011 现货</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
            
            <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="16%" height="100" rowspan="3"  align="center" valign="middle">   
               <img src="淘宝图片/shop_ico_02.gif" width="70" height="70" />
               </td>
                 <td width="33%">osa品牌服饰旗舰店 </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  696</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                      广东深圳
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:t恤 连衣裙 女装</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
            
            
            <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="15%" height="100" rowspan="3"  align="center" valign="middle">   
               <img src="淘宝图片/shop_ico_03.gif" width="70" height="70" />
               </td>
                 <td width="34%">andostore安都专卖店  </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  321</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                      湖北武汉
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:andostore t恤 连衣裙</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
              
              
               <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="14%" height="100" rowspan="3"  align="center" valign="middle">
               <img src="淘宝图片/shop_ico_04.gif" width="70" height="70" />
               </td>
                 <td width="35%">麦包包箱包官方旗舰店  </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  771</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                     浙江嘉兴
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:包袋 男包 金鱼 alfa</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
            
            
            
             <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="16%" height="100" rowspan="3"  align="center" valign="middle">
              <img src="淘宝图片/shop_ico_05.gif" width="70" height="70" />
               </td>
                 <td width="33%">车品弘智专营店 </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  1874</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                     上海
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:霍尼韦尔 保斯道</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
            
            
            
             <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="16%" height="100" rowspan="3"  align="center" valign="middle">
               <img src="淘宝图片/shop_ico_06.gif" width="70" height="70" />
               </td>
                 <td width="33%">优衣库官方旗舰店 </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  1102</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                      上海
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:优衣库 女装 t恤</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
            
            
            
             <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="15%" height="100" rowspan="3"  align="center" valign="middle">
               <img src="淘宝图片/shop_ico_07.gif" width="70" height="70" />
               </td>
                 <td width="34%">真维斯官方旗舰店  </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  1053</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                     广东惠州 
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:jeanswest 真维斯</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
            
            
            
             <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td width="17%" height="100" rowspan="3"  align="center" valign="middle">
               <img src="淘宝图片/shop_ico_08.gif" width="70" height="70" />
               </td>
                 <td width="32%">达芙妮官方旗舰店 </td>
                 <td width="8%" height="100" rowspan="3" align="center" valign="middle">
                  110</td>                 
                 <td width="18%"></td>
                 <td width="12%" height="100" rowspan="3"  align="center" valign="middle">  
                    上海
                 </td>
                  <td width="13%" height="100" rowspan="3"  align="center" valign="middle">
                      旗舰店
                  </td>
             </tr>
             <tr>
                  <td>主营宝贝:daphne 达芙妮</td>
                  <td><img src="淘宝图片/online.gif" width="77" height="19" />
             </td>
             <tr>
                  <td>    <img src="淘宝图片/baozhang.gif" width="46" height="15" />
                  <td>     <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" />                  </td>
            </table>
            
      <table width="100%" cellpadding="0"  cellspacing="0">
             <tr>
             <td rowspan="3"  align="center" valign="middle" height="100">     
               <img src="淘宝图片/footer.gif" width="950" height="79" />
               </td>
          </table>  
                  
                  
</body>
</html>

相关文章

  • 2019-03-07(一) 作业:制作淘宝店铺列表页面

    (一) 作业:制作淘宝店铺列表页面 训练要点(1) . 掌握表格、单元格的属性(2) . 使用表格的嵌套制...

  • 要修改的内容

    1.中奖券页面.店铺名字过长 2.个人中心页面 3.店铺列表页面 地址过长

  • 淘宝如何制作全屏店招?

    淘宝如何制作全屏店招?这里我们只讨论专业版和智能版的淘宝店铺,基础班的店铺目前是无法制作全屏店招的…… 淘宝的店招...

  • 淘口令+页面推广制作流程

    今天我来给大家演示如何制作淘宝无线承接页面和生成淘口令 1.先打开 "无线运营中心"→进入 "无线店铺"→"自定义...

  • 电商案例列表页制作

    列表页制作 1). 列表页准备工作 列表页面是新的页面,我们需要新建 list.html 因为 列表页的 头部 和...

  • 青岛淘宝代运营淘宝二级页面地址提取方法是什么呢?

    有一些网站的页面,比如淘宝店铺的商品列表页,它的url 里有好多参数,有点参数会随机变化,有些同学这时候就蒙了,这...

  • 新手装修淘宝店铺

    淘宝开店之新手装修ddzj 店铺装修知识大纲 什么是店铺装修 店铺装修的重要性 店铺装修页面介绍 如何进入店铺装修...

  • 2020-05-08 起点

    日记初始,不为外物所改变,每日高效,出大成果。 工作: 1.淘宝店铺小程序页面上传(已完成) 2.淘宝店铺软件详情...

  • 淘宝天猫1920全屏海如何设计制作怎么装修?

    这节课程来讲解一个,女装类淘宝店铺全屏1920海报的设计制作,另外,在制作完成之后,需要上传到店铺后台,如果是基础...

  • 淘宝店铺主图制作

    淘宝店铺如何制作好的主图,你应该考虑这些 我们知道在淘宝上卖东西,买家大多数能够看到你宝贝的途径是要对比很多卖家的...

网友评论

      本文标题:2019-03-07(一) 作业:制作淘宝店铺列表页面

      本文链接:https://www.haomeiwen.com/subject/magqpqtx.html