天猫品牌街Web前端开发第三阶段设计 模仿前端开发的通杀神技

来源:互联网 发布:阿里云手机刷机 编辑:程序博客网 时间:2024/04/30 04:59

接下来我们要模仿天猫卡片视图设计,直接从天猫的网站快速地获得卡片视图标签的CSS样式代码,有了样式代码,一模一样的效果就可以快速设计出来,先看看我们要实现出来的最终效果截图:

第1步:登录天猫连衣裙搜索页面:

https://list.tmall.com/search_product.htm?q=%C1%AC%D2%C2%C8%B9&type=p&spm=a220m.1000858.a2227oh.d100&from=.list.pc_1_searchbutton

第2步:在搜索框里找第一张卡片的商品素材,输入关键词“满300用券减30VeroModa圆领五分袖收腰A摆蕾丝连衣裙”


第3步:在搜索框里找第二张卡片的商品素材,输入关键词“圆领秋冬宽松套头加厚韩版针织连衣裙”


第4步:在搜索框里找第三张卡片的商品素材,输入关键词“时髦爱豆们新年穿衣术”


第5步:单独快速的摘录出3件商品的静态标签代码,第1件商品





<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
        <title>品牌街-上天猫,就够了</title>
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="">
        <style type="text/css">
            body,div,p{margin:0;padding:0;}
            body{font-size:12px;font-family:"微软雅黑";color:#666;}
            .top{width:100%;height:85px;background:#ffffff;}
            .top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
            .top .t-header .t-logo{float:left;margin-top:28px;}
            .top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
            .banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}
            
        </style>
    </head>
    <body>
        <div class="top">
            <div class="t-header">
                <div class="t-logo">
                    <a href="#">
                        <img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
                    </a>
                </div>
                <div class="t-desc">品牌咱都来这儿集合了!</div>
            </div>
        </div>
        <div class="banner"></div>
        <!-- 类名称为view的div标签(也就是我们查看元素时候看到的第1个黑色的小三角形标签)就是所有卡视图商品的容器-->
        <div class="view">
            <!-- start 第1件商品 -->
            <div class="product" data-id="543881587553" data-atp="a!,,50010850,,,,,,,,">
                <div class="product-iWrap">
                    <div class="productImg-wrap">
                        <a href="http://detail.tmall.com/item.htm?id=543881587553&amp;skuId=3274437069773&amp;user_id=420567757&amp;cat_id=55836006&amp;is_b=1&amp;rn=45d729ec5964eb1049d5e99ae19782d5" class="productImg" target="_blank" data-p="1-10">
                            <img  src="http://img.alicdn.com/bao/uploaded/i1/TB1axnyOVXXXXbdaXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg" />
                        </a>
                    </div>
                    <div class="productThumb clearfix">
                        <div class="proThumb-wrap">
                            <p class="ks-switchable-content">
                                <b data-sku="1627207:1489879654" class="proThumb-img " data-index="1:1">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/420567757/TB2gswFbC0jpuFjy0FlXXc0bpXa-420567757.jpg_30x30.jpg" atpanel="1-1,543881587553,,,spu/shop,20,itemsku,"/>
                                    <i></i>
                                </b>
                                <b data-sku="1627207:1495898220" class="proThumb-img " data-index="1:2">
                                    <img src="http://img.alicdn.com/bao/uploaded/i1/420567757/TB2_1zRb0XnpuFjSZFoXXXLcpXa-420567757.jpg_30x30.jpg" atpanel="1-2,543881587553,,,spu/shop,20,itemsku,"/>
                                    <i></i>
                                </b>
                                <b data-sku="1627207:441746199" class="proThumb-img " data-index="1:3">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/420567757/TB2KUMBbrFlpuFjy0FgXXbRBVXa-420567757.jpg_30x30.jpg" atpanel="1-3,543881587553,,,spu/shop,20,itemsku,"/>
                                    <i></i>
                                </b>
                            </p>
                        </div>
                    </div>
                    <p class="productPrice">
                        <a class="tag">
                            <img src="http://img.alicdn.com/tps/i2/TB16x_xHVXXXXcgXFXXQweWFVXX-30-30.png" title="" />
                        </a>
                        <em title="649.00">
                            <b>&yen;</b>
                            649.00
                        </em>
                    </p>
                    <p class="productTitle">
                        <a href="http://detail.tmall.com/item.htm?id=543881587553&amp;skuId=3274437069773&amp;user_id=420567757&amp;cat_id=55836006&amp;is_b=1&amp;rn=45d729ec5964eb1049d5e99ae19782d5" target="_blank" title="满300用券减30VeroModa圆领五分袖收腰A摆蕾丝连衣裙|31716Z524" data-p="1-11" >
                            满300用券减30VeroModa圆领五分袖收腰A摆蕾丝
                            <span class=H>连衣裙</span>|31716Z524
                        </a>
                    </p>
                    <div class="productShop" data-atp="b!1-3,{user_id},,,,,,">
                        <a class="productShop-name" href="http://store.taobao.com/search.htm?user_number_id=420567757&amp;rn=45d729ec5964eb1049d5e99ae19782d5&amp;keyword=连衣裙" target="_blank">
                            veromoda官方旗舰店
                        </a>
                    </div>
                    <p class="productStatus">
                        <span>月成交 <em>257笔</em></span>
                        <span>评价
                            <a href="//detail.tmall.com/item.htm?id=543881587553&amp;skuId=3274437069773&amp;is_b=1&amp;cat_id=2&amp;q=vero+moda+%C0%D9%CB%BF+%C1%AC%D2%C2%C8%B9&amp;on_comment=1#J_TabBar" target="_blank" atpanel="1-1-1,543881587553,50010850,718030407,spu,1,lessprocess,420567757">
                                23
                            </a>
                        </span>
                        <span class="ww-light ww-small" data-atp="a!1-2,,,,,,,420567757" data-display="inline" data-tnick="veromoda官方旗舰店" data-nick="veromoda官方旗舰店" data-item="543881587553" data-icon="small">
                            <a title="点此可以直接和卖家交流选好的宝贝,或相互交流网购体验,还支持语音视频噢。" class="ww-inline ww-online" href="https://amos.alicdn.com/getcid.aw?v=3&amp;groupid=0&amp;s=1&amp;charset=utf-8&amp;uid=veromoda官方旗舰店&amp;site=cntaobao&amp;groupid=0&amp;s=1&amp;fromid=cntaobaoAhAQzhIGc5nQx7c8wThUerHDoFBi2fQj" target="_blank" atpanel="1-2,,,,,,,420567757">
                                <span>
                                    旺旺在线
                                </span>
                            </a>
                        </span>
                    </p>
                </div>
            </div>
            <!-- end 第1件商品 -->
        </div>
    </body>
</html>


第6步:单独快速的摘录出3件商品的静态标签代码,第2件商品(参照上面第5步中描述的详细操作过程

<!-- start 第2件商品 -->
<div class="product  " data-atp="a!,,162103,,,,,,,," data-id="542747012849">
<div class="product-iWrap">
<div class="productImg-wrap">
<a class="productImg" href="http://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.271.C6Ok7e&amp;id=542747012849&amp;skuId=3263636993070&amp;user_id=2934171215&amp;cat_id=50025135&amp;is_b=1&amp;rn=0c421b1111d61dd7ddee9a68229910da" target="_blank" atpanel="56-10,542747012849,162103,,spu,1,spu,2934171215,,," data-p="56-10" data-spm-anchor-id="a220m.1000858.1000725.271">
<img src="http://img.alicdn.com/bao/uploaded/i4/TB14b0ROXXXXXbYXXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg">
</a>
</div>
<div class="productThumb clearfix">
<a title="上一页" class="ui-slide-arrow-s j_ProThumbPrev proThumb-prev proThumb-disable" style="visibility: visible;" href="javascript:;" atpanel=",542747012849,162103,,spu,1,spu,,,," data-spm-anchor-id="a220m.1000858.1000725.272">&lt;</a>
<div class="proThumb-wrap">
<p class="ks-switchable-content" style="left: 0px; width: 999999px; position: absolute;">
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:1" data-sku="1627207:1216436170">
<img src="http://img.alicdn.com/bao/uploaded/i2/2934171215/TB2IHU6XmXlpuFjy0FeXXcJbFXa_!!2934171215.jpg_30x30.jpg" atpanel="56-1,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:2" data-sku="1627207:1566931672">
<img src="http://img.alicdn.com/bao/uploaded/i1/2934171215/TB2G8Z8XhdkpuFjy0FbXXaNnpXa_!!2934171215.jpg_30x30.jpg" atpanel="56-2,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:3" data-sku="1627207:1566931673">
<img src="http://img.alicdn.com/bao/uploaded/i2/2934171215/TB2AY4QXtXnpuFjSZFoXXXLcpXa_!!2934171215.jpg_30x30.jpg" atpanel="56-3,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:4" data-sku="1627207:1566931676">
<img src="http://img.alicdn.com/bao/uploaded/i2/2934171215/TB2OLJPXrBnpuFjSZFGXXX51pXa_!!2934171215.jpg_30x30.jpg" atpanel="56-4,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:5" data-sku="1627207:1600529563">
<img src="http://img.alicdn.com/bao/uploaded/i4/2934171215/TB2KQg8XmtkpuFjy0FhXXXQzFXa_!!2934171215.jpg_30x30.jpg" atpanel="56-5,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:6" data-sku="1627207:806356643">
<img src="http://img.alicdn.com/bao/uploaded/i4/2934171215/TB2R3o6XmhlpuFjSspkXXa1ApXa_!!2934171215.jpg_30x30.jpg" atpanel="56-6,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:7" data-sku="1627207:806356644">
<img src="http://img.alicdn.com/bao/uploaded/i4/2934171215/TB2NW37XhdkpuFjy0FbXXaNnpXa_!!2934171215.jpg_30x30.jpg" atpanel="56-7,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
<b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:8" data-sku="1627207:822300622">
<img src="http://img.alicdn.com/bao/uploaded/i3/2934171215/TB2kSg7Xl0kpuFjSsppXXcGTXXa_!!2934171215.jpg_30x30.jpg" atpanel="56-8,542747012849,,,spu/shop,20,itemsku,">
<i></i>
</b>
</p>
</div>
<a title="下一页" class="ui-slide-arrow-s j_ProThumbNext proThumb-next" style="visibility: visible;" href="javascript:;" atpanel=",542747012849,162103,,spu,1,spu,,,," data-spm-anchor-id="a220m.1000858.1000725.273">&gt;</a>
</div>
<p class="productPrice">
<em title="138.00"><b>¥</b>138.00</em>
</p>
<p class="productTitle">
<a title="圆领毛衣女秋冬宽松中长款套头加厚韩版针织打底衫长袖连衣裙2016" href="http://detail.tmall.com/item.htm?id=542747012849&amp;skuId=3263636993070&amp;user_id=2934171215&amp;cat_id=50025135&amp;is_b=1&amp;rn=0c421b1111d61dd7ddee9a68229910da" target="_blank" atpanel="56-11,542747012849,162103,,spu,1,spu,2934171215,,," data-p="56-11" data-spm-anchor-id="a220m.1000858.1000725.274">
圆领秋冬宽松套头加厚韩版针织连衣裙
</a>
</p>
<div class="productShop" data-atp="b!56-3,{user_id},,,,,,">
<a class="productShop-name" href="http://store.taobao.com/search.htm?user_number_id=2934171215&amp;rn=0c421b1111d61dd7ddee9a68229910da&amp;keyword=连衣裙" target="_blank" atpanel="56-3,,,,spu,2,spu," data-spm-anchor-id="a220m.1000858.1000725.275">
蜜荻旗舰店
</a>
</div>
<p class="productStatus">
<span>月成交 <em>350笔</em></span>
<span>评价 <a href="http://detail.tmall.com/item.htm?id=542747012849&amp;skuId=3263636993070&amp;user_id=2934171215&amp;cat_id=50025135&amp;is_b=1&amp;rn=0c421b1111d61dd7ddee9a68229910da&amp;on_comment=1#J_TabBar" target="_blank" atpanel="56-1,542747012849,162103,,spu,1,spu,2934171215,,," data-p="56-1" data-spm-anchor-id="a220m.1000858.1000725.276">214</a></span>
<span class="ww-light ww-small" data-atp="a!56-2,,,,,,,2934171215" data-display="inline" data-tnick="蜜荻旗舰店" data-nick="蜜荻旗舰店" data-item="542747012849" data-icon="small"><a title="点此可以直接和卖家交流选好的宝贝,或相互交流网购体验,还支持语音视频噢。" class="ww-inline ww-online" href="https://amos.alicdn.com/getcid.aw?v=3&amp;groupid=0&amp;s=1&amp;charset=utf-8&amp;uid=蜜荻旗舰店&amp;site=cntaobao&amp;groupid=0&amp;s=1&amp;fromid=cntaobaoArS05MyTX-3cy1OAhewoDjgpxHwmo9hb" target="_blank" data-spm-anchor-id="a220m.1000858.1000725.277"><span>旺旺在线</span></a></span>
</p>
</div>
</div>
<!-- end 第2件商品 -->


第7步:单独快速的摘录出3件商品的静态标签代码,第3件商品(参照上面第5步中描述的详细操作过程)

<!-- start 第1张新品专辑 -->
<div class="product album-new2 ">
<div class="product-iWrap">
<div class="productAlbum">
<a class="pa-cover" href="http://content.tmall.com/wow/pegasus/subject/0/710383795/6602689?spm=a220m.1000858.1000725.136.q88dyR&amp;gccpm=8302602.102.2.subject-1002.60665&amp;wh_tailer=2&amp;tailer=2&amp;wh_header=1&amp;header=1&amp;id=6602689&amp;rn=5ddd60ba9714bec0b49c04c8c29314e0&amp;cat=50025135&amp;from=act_1_act-2-new#J_Crumb" target="_blank" atpanel="28,8302602,,,spu,2,act-2-new,,act-2-new,," data-spm-anchor-id="a220m.1000858.1000725.136">
  <img src="http://img.alicdn.com/bao/uploaded/TB1JD.APXXXXXXzXXXXSutbFXXX.jpg">
</a>
<a class="pa-info" href="http://content.tmall.com/wow/pegasus/subject/0/710383795/6602689?spm=a220m.1000858.1000725.137.q88dyR&amp;gccpm=8302602.102.2.subject-1002.60665&amp;wh_tailer=2&amp;tailer=2&amp;wh_header=1&amp;header=1&amp;id=6602689&amp;rn=5ddd60ba9714bec0b49c04c8c29314e0&amp;cat=50025135&amp;from=act_1_act-2-new#J_Crumb" target="_blank" atpanel="28,8302602,,,spu,2,act-2-new,,act-2-new,," data-spm-anchor-id="a220m.1000858.1000725.137">
<span title="墨概念" class="palr-brand">墨概念</span>
<span title="时髦爱豆们新年穿衣术" class="palr-title">时髦爱豆们新年穿衣术</span>
</a>
<i class="pa-icon-new"></i>     
</div>
</div>
</div>
<!-- end 第1张新品专辑 -->


第8步:重点来了, 快速地摘出卡视图的样式定义,一个标签一个标签地从上到下顺序地复制出我们需要的CSS样式定义代码,观察3件商品卡视图,明显第2件商品静态页面更复杂 ------ 有小图标商品图片翻页,第3件商品是一个系列的宣传图片,与其它商品图片不属于同一个风格,除了尺寸一样之外:




用同样的方法复制出第2条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:

.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {
    display: block;
}

用同样的方法复制出第3条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:

.productAlbum .pal-items::after, .view::after {
    clear: both;
    content: " ";
}

用同样的方法复制出第4条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:

/*@media all and (min-width:1210px)*/
.view {
    width: 1210px;
    padding-left: 5px;
    padding-right: 5px;
}

用同样的方法复制出第5条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:

.view {

    width: 1023px;
}

用同样的方法复制出第6条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:

.view, .w1 .view, .w2 .view {
    padding-left: 5px;
    padding-right: 5px;
}

用同样的方法复制出第7条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:

.view {
    margin-top: 10px;
}

最后的2条css样式我们不需要它们!,注意请不要合并同名称样式的定义,因为回头再从头整体看一遍整个代码,我们可以慢慢体会出作者的设计步骤!

<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}</style>

第9步:按照从上而下,记得哦,只要是个html标签 你必须点击它去获得它的css样式定义,这样别人写的代码就都被你挖出来了,一个也不会少,显示出来的效果当然就跟官网上的效果一模一样了,这一步才是卡视图真正的第一个div (product)标签,上面的那个div ( view)标签是所有卡视图的容器(盒子)


一共需要操作5次,共复制规则5个,这5个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:

/*@media all and (min-width:1210px)*/
.view .product {
    width: 220px;
    margin-right: 20px;
}
.view .product {
    width: 220px;
    margin-right: 33px;
}
.product {
    height: 372px;
}
.product {
    height: 372px;
}
.product {
    position: relative;
    float: left;
    padding: 0;
    margin: 0 0 20px;
    line-height: 1.5;
    overflow: visible;
    z-index: 1;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}</style>

第10步:按照上面第9步同样的方法单击(点击)类样式为product-iWrap的div标签获得它的css样式定义代码:


一共需要操作2次,共复制规则2个,这2个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:

.product-iWrap {
    min-height: 98%;
    width: 210px;
}
.product-iWrap {
    position: absolute;
    background-color: #fff;
    margin: 0;
    padding: 4px 4px 0;
    font-size: 0px;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}</style>

第11步:按照上面第9步同样的方法单击(点击)类样式为productImg-wrap的div标签获得它的css样式定义代码:


一共需要操作3次,共复制规则3个,这3个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:

.productImg-wrap {
position: relative;
}
.productImg-wrap {
display: table;
table-layout: fixed;
height: 210px;
width: 100%;
padding: 0;
margin: 0 0 5px;
}
.product-iWrap * {
font-size: 12px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}</style>

第12步:按照上面第9步同样的方法单击(点击)类样式为productImg的a标签获得它的css样式定义代码:


一共需要操作6次,共复制规则6个,这6个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:

.productImg-wrap a, .productImg-wrap img {
    max-width: 100%;
    max-height: 210px;
}
.productImg {
    _height: 100% !important;
}
.productImg {
    display: table-cell;
    width: 100%;
    text-align: center;
}
.product-iWrap * {
    font-size: 12px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
    vertical-align: middle;
}
a {
    outline: 0;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}</style>

第13步:复制规则 ------ 第12步中a标签内嵌套的img标签css样式定义代码(特别再次强调一个标签都不要遗漏,要把当前商品的卡片视图内部的全部HTML标签都要点击一下,你就会看到没有类样式的标签也定义了样式,为什么?因为作者就是这么干的,切记!)


.productImg img {
    display: block;
    margin: 0 auto;
}
.productImg-wrap a, .productImg-wrap img {
    max-width: 100%;
    max-height: 210px;
}
.main img {
    -ms-interpolation-mode: bicubic;
}
.product-iWrap * {
    font-size: 12px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}</style>

第14步:复制规则 ------ 类名称为productThumb clearfix 的div标签css样式定义的代码


.clearfix::after, .headerCon::after {
    clear: both;
}
.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {
    display: table;
    content: "";
    overflow: hidden;
}
.productThumb {
    margin-bottom: 5px;
}
.product-iWrap * {
    font-size: 12px;
}
.clearfix, .headerCon {
    zoom: 1;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}</style>

第15步:复制规则 ------ 第14步中div标签内嵌套的a标签css样式ui-slide-arrow-s j_ProThumbPrev proThumb-prev proThumb-disable定义的代码


.proThumb-next, .proThumb-prev {
    float: left;
    margin: 14px 2px 0 -3px;
    visibility: hidden;
    cursor: pointer;
}
.product-iWrap * {
    font-size: 12px;
}
.ui-slide-arrow-s {
    display: inline-block;
    position: relative;
    height: 14px;
    width: 14px;
    background-color: #b8b2b1;
    background-color: transparent\9;
    background-color: #b8b2b1\9\0;
    background-position: -37px -142px;
    color: #fff;
    text-align: center;
    font: 700 11px/15px 宋体, Hei;
    border-radius: 8px;
    -ms-border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    -khtml-border-radius: 9px;
}
.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {
    background: url(data:image/png;base64,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) no-repeat\9;
}
a {
    outline: 0;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}</style>

第16步:复制规则 ------ 类标签名称为proThumb-wrap的div标签css样式定义的代码


.proThumb-wrap {
    display: inline;
    float: left;
    height: 34px;
    padding-top: 5px;
    overflow: hidden;
    position: relative;
    width: 185px;
}
.product-iWrap * {
    font-size: 12px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}</style>

第17步:<p class="ks-switchable-content" style="left: 0px; width: 999999px; position: absolute;"> 此行p标签跳过,不用管,除了字体没有任何有作用的css样式定义了

第18步:复制规则 ------ 类名称为proThumb-img ks-switchable-panel-internal1132的b标签css定义的代码


.proThumb-img {
    display: table-cell;
    float: left;
    height: 30px;
    width: 30px;
    margin-right: 3px;
    padding: 1px;
    font-size: 0px;
    text-align: center;
    border: 1px solid #CCC;
    cursor: pointer;
}
.product-iWrap * {
    font-size: 12px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
    vertical-align: middle;
}
b, strong {
    font-weight: 400;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}</style>

第19步:复制规则 ------ 第18步中的b标签内嵌img标签的css样式定义代码


.proThumb-img img {
    max-height: 30px;
    max-width: 30px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
    vertical-align: middle;
}
.proThumb-img * {
    font-size: 12px;
}
.product-iWrap * {
    font-size: 12px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAADaCAYAAAD+FPHQAAAKIklEQVR4Xu2df2iV1x2HzXslLHAh4MhIG7ijkhERJo6AMhEqGekc6RQlo2WFUmjMqCg6RyQhoiQYvCxEFP8ISxcKKysrlYlZJVnDRmUBMSgKYVJRCARuG7gQCAQsoaF7GF94y7ubnffXOSf3vecDzx9tzv1+/PSccOs55/u+dTNTt7dpUh7a4MdQD0EtwXMhtn7+yyOxPrcd0lIjdEEndEABwmgD7gozMA9RZC14J/TCEZnZqMpBhzAkK+BDGIfyVgx+DAahHdJUKwxBP0zCCCxDqvIgqnbDP+CvElqXGuAUPINzkLMZvB8eQQeYUh7G4AG0mg6+A6bhCtSDDe2FR9BtKngB/gWHwbby8Amc0x28VULvhq2kMbisK3gTTEMBtqIGoS/t4PXwqcz4Vtbv//63qe40g9+AfVAN+oDwbWkE74ZeqBbl4c+Er08SPA/XoNrUDueSBL8ILVCNGmTWW+IEb4YzUK3KQ1+c4H1QD9WsXma9OUrwBuiFalcDvBcleDfkIQt6J0rwNyArKrDcD4YJ3gAdkCV1hQm+T8JnSa+GCX4Qsqa9LPecKngbZE0NUFAFb4Usqk0V/BXIolpUwRshi8qrv86yqQZF8NqUByuQRa1CJbngS5BFLaqCP4Es6okq+OMszjYXBpRLfRaypruA1L/ji5AlzYbdiLgJWdELmAkb/EPIimb4/V4JG3wB5iELmoy6vVyEatdjZvtO1OC3ZOarWSNxj5BOQrVqjtm+GTf4HHwE1aZ1OJn0mPgslKCaNMxsLyQNXoY3YaOKvr5G0roRMQenq+QvIm+nfflnHEZgq6oErzHb5VSDCxdgGLaaFuAAlHRe8LsEJ7fQ7/yUhF4ycaVzHH4GJbCpIhyFNZOXeO/CT2DS0jbScRiwdXu5DD2wB2ZAt1bgLOyCW1bvqwsL8As4BPcgba3BCOyE67Bu/qK+evkfgJ0wIP8cV8swAa/D9+ECrNptzVCzCEWhCTrhILTCjgqdSEtQhgX57KysHGOqu70t2zry7beKGbfcd2YG13fGUjfbd6Ym2Hdmf6m7vjPXd6YJ13fm+s5c35nrO3N9Z1C7fWdQu31nUHN9Z67vDGqu78z1nUGt9J25vjPXdwa10nfm+s5c3xm4vjPXd+b6zlzfmes7yyiu/coFd31nGcH1nUFG+85c35nrO3N9Z1AzfWeu7wxqpu/M9Z1BzfSdub4zqL2+M6iZvjPXdwbZ7TtzfWeu78z1nbm+M9d35vrOXN+ZsfarMnwkKPW9l15KZPb1V1/FChD1fWd7oQ0aA/vXz+ncj9Uw89nLLyf2fu3LL5d1BO+Ad+AwNMFmugdTMCHPWooRPLk3/xFWkgbfC1fENIrWYBRGWQUvQgTX4s0qeBHn6+wU3I9qLORhCD5XPdZfpzcrqTlq8BtCPSTRPnhEeEVvmj5vwreHDT4ks52WmuG24jUeWr0J36IK3g0XIW21SPgKs2jGm/D1mwXfAX/Q3EEwCAHZ8vaD90t4nTrHrAe+ksx5M+tNgeByx1u/8kEflqA1bw+OGbyr/gb4sujtGe4M3s1yL/gGZr1ZYXj7wduNdwWLbHp7FnpHXwGRPW8PGm1dtbTp7cE6WJFNbw/KYFLLIDLvbfGCn+9n09uDOcM3khZAZM/bg1tgSncCmxNGvWVzwl/qBmd9AhAAfxBr3p4YDIBuzTLbswEDY97M9myl4HOal90GnIeAbHlLcKFH4yPGfsdsPw6am/JmtvHePPgKHNVwbDNO6OuKMdq8CY23es/tCexPceaLhFZcw9LnTeiTUXZZn0r4WwmPkY4TWnGerc+b0ANx9tVX4DgciHiYtwbDsJPQyj+8Lm9C30p6aHhPwhegG7qgEXZDgyzLVXgIU/KVFfMsO7k3gdfTPi1dgqsC8iFo+jf2Xu9SeFfm67q6xMfEDdAJzYF2h8UYp6EVazE7i/J/b/8bvPeE8fPxHTAIvZCHoB7CBZgJEThYK/jz/9YiuLIWFKAfuqAAS9+5yrkUZ7xX4Ql55yqFFtphGq5B7v+EDl2Lsdcgp3gK6L/hPSh8J1iv/PvO6OP94K3wmT9QyRkY2yR0arWkxieQVzzRrxB1vCcGH0ATiEKH7wJfCWox65Vq9YXYl2uEvqjj5UAh9gMyLgZmO7VaAvVC6VjU8V7Cp17u44CgzTdIVotZ92tBhJXTFHV8Go9D+SmI0qkVYzOyHHW8J9+vCeTPSpq1hCkIo6mo4z0MVtPaG0+zljAKa2Eu/EQdn0bj/HMQpVrLv7W8eZg1+fli1PGeLI8kW7ZzIEqxls8s7IEJWA7ce90Ds3HGb4dJ6It5Tj0ReDFqolpsHFCrohbhN4JK6vESvARFuBzjOGY4sF1c4ispca2rE+9viyU+F7VDoRiplVr2yILtyklqyVVMQ/KDb8DbcB5U1zDnYf9mbdcE2IBItRgvtUwH9xmFnXAJ5mBNDJ7CTTgadkOQMMpajNkP1DKvut+e6NFqcPjTO8bCyKaGAvesJ+WVyFMwDQ/gG+EBTMvPGKOWBh8trRnNMATvQq7i7omsZLgGk3BJ8VoPmz7qGReTZ9AroVXKydhnijvmGn2SBz8D05CPeW1yWmoopMEnQfAjMAZJNSa1AtLjkzR4C/wJcpBUOalFTV86fZIEv5jyZbtGqelLo0/c4AV4F9IWNakt0u0TJ/ivIQdpKye1RXp94gTvBF3qAJEpHx+bz17eDSK9PnGCN4Em+bUN+bi/pFi+vezX1u0TJ/hTE7eFzfn42HxK5z9BpNcnTvCPYUPPVUpqi3T7xAm+qOnZLpNSW6TXJ+4OzDCsQVqSO2e+dPvEDV6CtyAtvSU1fWn0iR1cmIKzkFTUoFZAOn0SBReuJ3iI1Jp8lhoKGfNRBw/OyC6YhA1QaUPG7lLMgE6f5MGFEvTAD+E0zMDDwEW/GTgtY3pUv2t2fNQnKUY59P4ft9mUO0kJyatwBe5XOO24Lz9jTHjZ9N4e8lV5/dAEaNPTjn0yrgxFGFcdE9v09hT731/AmBiHVZN85gvVvrd5b3XwK3A7YWN7QWpQSyEj3urgf4F+SEv9UlMhnd7q4Jc1vdiRmtQOyJZ3MPgxGARdGhQPX9a8/eD1cAO0KvjkLnvefvAzhl7GjAdeIpveHuSgD0yp7/MTPTLr5r2hXoLL8xCNSR5fiix6S3DTEk9b3pYeeQTiacvb3ntLxdOWt73Xd4qnLe+aPzRctfWiRZveHjwHsxJPW9723mkonja9PbgDZiWe9rz9Y+IymFJZPJE9bw/W4SqY0lW2l/FEFrzFk+BIzEugW6XA0Y8lbz/4uqGXPuHh737a9A6+2m8EdKkoHr4sensVXvr0MaQqqTkAAdnz9iCoN6GY7kxTUyHT3h5U0gD8KmF3cElMFTNtzFsdXLgJu+B8xO/asnzmR6qla9PbC9HaPAo/gENQhPkKZ9jz8rNDMnY0zLmZTe/tEFZ3BQ0y7/0fVpShI0Vk2hAAAAAASUVORK5CYII=) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}</style>

第20步:跳过<i></i>标签 因为除了字体12号字,前面有定义过了,再也没有特别的标签,所以跳过此标签

第21步:<a title="下一页" class="ui-slide-arrow-s j_ProThumbNext proThumb-next" style="visibility: visible;" href="javascript:;" atpanel=",542747012849,162103,,spu,1,spu,,,," data-spm-anchor-id="a220m.1000858.1000725.3">&gt;</a>

左翻页a标签的样式定义如下:

.proThumb-next {
    margin: 14px -3px 0 0;
}
.proThumb-next, .proThumb-prev {
    float: left;
    margin: 14px 2px 0 -3px;
    visibility: hidden;
    cursor: pointer;
}
.product-iWrap * {
    font-size: 12px;
}
.ui-slide-arrow-s {
    display: inline-block;
    position: relative;
    height: 14px;
    width: 14px;
    background-color: #b8b2b1;
    background-color: transparent\9;
    background-color: #b8b2b1\9\0;
    background-position: -37px -142px;
    color: #fff;
    text-align: center;
    font: 700 11px/15px 宋体, Hei;
    border-radius: 8px;
    -ms-border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    -khtml-border-radius: 9px;
}
.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {
    background: url(data:image/png;base64,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) no-repeat\9;
}
a {
    outline: 0;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}</style>

第22步:产品的价格p标签,内嵌标签em还有内嵌标签b的css样式定义一次性按顺序给出:

<p class="productPrice">
<em title="138.00"><b>¥</b>138.00</em>
 </p>

p标签样式定义:

.productPrice {
    font-family: arial,verdana,sans-serif !important;
    color: #c00;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin: 0 0 5px;
    letter-spacing: normal;
    overflow: inherit !important;
    white-space: nowrap;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
    display: block;
    overflow: hidden;
    margin-bottom: 3px;
}
.product-iWrap * {
    font-size: 12px;
}

em标签样式定义:

.productPrice em {
    float: left;
    font-family: arial;
    font-weight: 400;
    font-size: 20px;
    color: #bc00000;
}
.productPrice * {
    height: 30px;
}
.product-iWrap * {
    font-size: 12px;
}

b标签样式定义:

.productPrice em b {
    margin-right: 2px;
    font-weight: 700;
    font-size: 14px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
    vertical-align: middle;
}
.productPrice * {
    height: 30px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}</style>

第23步:产品标题p标签和a标签

<p class="productTitle">
<a title="圆领毛衣女秋冬宽松中长款套头加厚韩版针织打底衫长袖连衣裙2016" href="//detail.tmall.com/item.htm?spm=a220m.1000858.1000725.4.uXOSyT&amp;id=542747012849&amp;skuId=3263636993064&amp;user_id=2934171215&amp;cat_id=2&amp;is_b=1&amp;rn=5c880f81043766f52f76d138e93c7e0f" target="_blank" atpanel="1-11,542747012849,162103,,spu,1,spu,2934171215,,," data-p="1-11" data-spm-anchor-id="a220m.1000858.1000725.4">
圆领秋冬宽松套头加厚韩版针织连衣裙
</a>
</p>

p标签css定义:

.productTitle {
    display: block;
    color: #666;
    height: 14px;
    line-height: 12px;
    margin-bottom: 3px;
    word-break: break-all;
    font-size: 0px;
    position: relative;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
    display: block;
    overflow: hidden;
    margin-bottom: 3px;
}
.product-iWrap * {
    font-size: 12px;
}

a标签css定义:

.productTitle a {
    color: #333;
}
.productTitle * {
    font-size: 12px;
    font-family: 微软雅黑;
    line-height: 14px;
}
.product-iWrap * {
    font-size: 12px;
}
a {
    outline: 0;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}</style>

第24步:店铺div标签和商品名称a标签

<div class="productShop" data-atp="b!1-3,{user_id},,,,,,">
 <a class="productShop-name" href="//store.taobao.com/search.htm?spm=a220m.1000858.1000725.5.uXOSyT&amp;user_number_id=2934171215&amp;rn=5c880f81043766f52f76d138e93c7e0f&amp;keyword=圆领秋冬宽松套头加厚韩版针织连衣裙" target="_blank" atpanel="1-3,,,,spu,2,spu," data-spm-anchor-id="a220m.1000858.1000725.5">
蜜荻旗舰店
</a>
</div>

div标签的定义:

.productShop {
    position: relative;
    height: 22px;
    line-height: 20px;
    margin-bottom: 5px;
    color: #999;
    white-space: nowrap;
    overflow: visible;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
    display: block;
    overflow: hidden;
    margin-bottom: 3px;
}
.product-iWrap * {
    font-size: 12px;
}

a标签的定义:

.productShop .productShop-name {
    float: left;
    line-height: 20px;
    height: 20px;
    max-width: 144px;
    color: #999;
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-iWrap * {
    font-size: 12px;
}
a {
    outline: 0;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productShop {position: relative;height: 22px;line-height: 20px;margin-bottom: 5px;color: #999;white-space: nowrap;overflow: visible;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productShop .productShop-name {float: left;line-height: 20px;height: 20px;max-width: 144px;color: #999;text-decoration: underline;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.product-iWrap * {font-size: 12px;}a {outline: 0;}</style>

第25步:

<p class="productStatus">
<span>月成交 <em>261笔</em></span>
<span>评价 <a href="//detail.tmall.com/item.htm?spm=a220m.1000858.1000725.6.uXOSyT&amp;id=542747012849&amp;skuId=3263636993064&amp;user_id=2934171215&amp;cat_id=2&amp;is_b=1&amp;rn=5c880f81043766f52f76d138e93c7e0f&amp;on_comment=1#J_TabBar" target="_blank" atpanel="1-1,542747012849,162103,,spu,1,spu,2934171215,,," data-p="1-1" data-spm-anchor-id="a220m.1000858.1000725.6">222</a></span>
<span class="ww-light ww-small" data-atp="a!1-2,,,,,,,2934171215" data-display="inline" data-tnick="蜜荻旗舰店" data-nick="蜜荻旗舰店" data-item="542747012849" data-icon="small"><a title="点此可以直接和卖家交流选好的宝贝,或相互交流网购体验,还支持语音视频噢。" class="ww-inline ww-online" href="https://amos.alicdn.com/getcid.aw?spm=a220m.1000858.1000725.7.uXOSyT&amp;v=3&amp;groupid=0&amp;s=1&amp;charset=utf-8&amp;uid=蜜荻旗舰店&amp;site=cntaobao&amp;groupid=0&amp;s=1&amp;fromid=cntaobaoAoaGbAbI5Z7uk2Fe2/Z6POC/lnII58qh" target="_blank" data-spm-anchor-id="a220m.1000858.1000725.7"><span>旺旺在线</span></a></span>
</p>

一个不漏地按从上到下每个标签都必须点击一下,即使是同名称标签也要点击一下,目的是获得点击标签的css定义:

.productStatus {
    position: relative;
    height: 32px;
    border: none;
    border-top: 1px solid #eee;
    margin-bottom: 0px;
    color: #999;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
    display: block;
    overflow: hidden;
    margin-bottom: 3px;
}
.product-iWrap * {
    font-size: 12px;
}
.product .productStatus span {
    white-space: nowrap;
}
.productStatus span {
    float: left;
    display: inline-block;
    border-right: 1px solid #eee;
    width: 39%;
    padding: 10px 1px;
    margin-right: 6px;
    line-height: 12px;
    text-align: left;
    white-space: nowrap;
}
.product-iWrap * {
    font-size: 12px;
}
.productStatus em {
    color: #b57c5b;
}
.product .productStatus span {
    white-space: nowrap;
}
.productStatus a {
    color: #38b;
}
.productStatus a, .productStatus em {
    margin-top: -8px;
    font-family: arial;
    font-size: 12px;
    font-weight: 700;
}
.product-iWrap * {
    font-size: 12px;
}
.product .productStatus span {
    white-space: nowrap;
}
.productStatus .ww-light {
    border-right: none;
    width: 9%;
    text-align: center;
}
.productStatus span {
    float: left;
    display: inline-block;
    border-right: 1px solid #eee;
    width: 39%;
    padding: 10px 1px;
    margin-right: 6px;
    line-height: 12px;
    text-align: left;
    white-space: nowrap;
}
.ww-light {
    overflow: hidden;
}
.product-iWrap * {
    font-size: 12px;
}
.productStatus .ww-light a {
    background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;
    background-size: 16px !important;
    position: relative;
    width: 16px;
    height: 16px;
    margin-top: -3px;
}
.ww-small .ww-online {
    background-position: -80px 0;
}
.ww-light a {
    background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");
    background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
    background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
    background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
    background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
    text-decoration: none !important;
    width: 20px;
    height: 20px;
    zoom: 1;
}
.productStatus a {
    color: #38b;
}
.productStatus a, .productStatus em {
    margin-top: -8px;
    font-family: arial;
    font-size: 12px;
    font-weight: 700;
}
.ww-inline {
    display: inline-block;
    vertical-align: text-bottom;
}
.product-iWrap * {
    font-size: 12px;
}
a {
    outline: 0;
}
.productStatus .ww-light a span {
    padding: 0;
    display: none;
    white-space: nowrap;
    color: #999;
    top: 18px;
    left: -2px;
    height: 14px;
    position: absolute;
    width: 2em !important;
    overflow: hidden;
    margin-left: -2px;
    border-right: none;
    font-weight: 400;
    font-size: 12px;
}
.product .productStatus span {
    white-space: nowrap;
}
.ww-light a span {
    display: none;
}
.productStatus span {
    float: left;
    display: inline-block;
    border-right: 1px solid #eee;
    width: 39%;
    padding: 10px 1px;
    margin-right: 6px;
    line-height: 12px;
    text-align: left;
    white-space: nowrap;
}
.product-iWrap * {
    font-size: 12px;
}


<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productShop {position: relative;height: 22px;line-height: 20px;margin-bottom: 5px;color: #999;white-space: nowrap;overflow: visible;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productShop .productShop-name {float: left;line-height: 20px;height: 20px;max-width: 144px;color: #999;text-decoration: underline;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productStatus {position: relative;height: 32px;border: none;border-top: 1px solid #eee;margin-bottom: 0px;color: #999;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.product .productStatus span {white-space: nowrap;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.product-iWrap * {font-size: 12px;}.productStatus em {color: #b57c5b;}.product .productStatus span {white-space: nowrap;}.productStatus a {color: #38b;}.productStatus a, .productStatus em {margin-top: -8px;font-family: arial;font-size: 12px;font-weight: 700;}.product-iWrap * {font-size: 12px;}.product .productStatus span {white-space: nowrap;}.productStatus .ww-light {border-right: none;width: 9%;text-align: center;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.ww-light {overflow: hidden;}.product-iWrap * {font-size: 12px;}.productStatus .ww-light a {background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;background-size: 16px !important;position: relative;width: 16px;height: 16px;margin-top: -3px;}.ww-small .ww-online {background-position: -80px 0;}.ww-light a {background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);text-decoration: none !important;width: 20px;height: 20px;zoom: 1;}.productStatus a {color: #38b;}.productStatus a, .productStatus em {margin-top: -8px;font-family: arial;font-size: 12px;font-weight: 700;}.ww-inline {display: inline-block;vertical-align: text-bottom;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productStatus .ww-light a span {padding: 0;display: none;white-space: nowrap;color: #999;top: 18px;left: -2px;height: 14px;position: absolute;width: 2em !important;overflow: hidden;margin-left: -2px;border-right: none;font-weight: 400;font-size: 12px;}.product .productStatus span {white-space: nowrap;}.ww-light a span {display: none;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.product-iWrap * {font-size: 12px;}</style>

第26步:修正的第1个地方

.product-iWrap {
min-height: 98%;
width: 212px;/* 天猫设置宽度为210像素,右翻页图标会被挤到下一行的位置 */
}


第27步:新增加一个“新品”宣传小图标,先搜出第1件商品页面 ------ 目的是看看“”新品小图标的css样式是如何定义的,css定义代码包括tag类样式的a标签和内嵌img标签:


.productPrice .tag::before, .productPrice i::before {
display: block;
}
.productPrice .tag, .productPrice i {
position: relative;
top: 0px;
right: 0px;
float: right;
width: 30px;
height: 30px;
background-position: center 0;
margin-right: -6px;
}
.i-1111-5::before, .i-1111::before, .i-1212::before, .i-3c::before, .i-hwzhigou::before, .i-new::before, .i-presell::before, .i-temai::before, .i-zqg::before, .tag::before {
display: none;
content: "";
position: absolute;
width: 0px;
height: 0px;
right: 0px;
top: -5px;
border: 3px solid transparent;
border-left-color: #dadada;
border-bottom-color: #dadada;
border-bottom-width: 2px;
}
.i-1111, .i-1111-5, .i-1212, .i-3c, .i-hwzhigou, .i-new, .i-presell, .i-temai, .i-zqg, .tag {
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
position: absolute;
top: -4px;
left: 5px;
width: 40px;
height: 40px;
z-index: 1;
box-shadow: 1px -2px 5px -2px rgba(0,0,0,0.3);
}
.productPrice * {
height: 30px;
}
.product-iWrap * {
font-size: 12px;
}
a {
outline: 0;
}
.i-1111 img, .i-1111-5 img, .i-1212 img, .i-3c img, .i-hwzhigou img, .i-new img, .i-presell img, .i-temai img, .i-zqg img, .tag img {
width: 30px;
height: 30px;
}


第28步:摘录出新品专辑卡片视图css样式定义


第29步:单独简单地演示一下左上角“新品 专辑”css效果:


第30步:这样整个css样式定义全部就被摘录出来了 (不管是有用到的还是没有用到的),整个卡视图样式代码如下:

<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 212px;/* 天猫设置宽度为210像素,右翻页图标会被挤到下一行的位置 */}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAADaCAYAAAD+FPHQAAAKIklEQVR4Xu2df2iV1x2HzXslLHAh4MhIG7ijkhERJo6AMhEqGekc6RQlo2WFUmjMqCg6RyQhoiQYvCxEFP8ISxcKKysrlYlZJVnDRmUBMSgKYVJRCARuG7gQCAQsoaF7GF94y7ubnffXOSf3vecDzx9tzv1+/PSccOs55/u+dTNTt7dpUh7a4MdQD0EtwXMhtn7+yyOxPrcd0lIjdEEndEABwmgD7gozMA9RZC14J/TCEZnZqMpBhzAkK+BDGIfyVgx+DAahHdJUKwxBP0zCCCxDqvIgqnbDP+CvElqXGuAUPINzkLMZvB8eQQeYUh7G4AG0mg6+A6bhCtSDDe2FR9BtKngB/gWHwbby8Amc0x28VULvhq2kMbisK3gTTEMBtqIGoS/t4PXwqcz4Vtbv//63qe40g9+AfVAN+oDwbWkE74ZeqBbl4c+Er08SPA/XoNrUDueSBL8ILVCNGmTWW+IEb4YzUK3KQ1+c4H1QD9WsXma9OUrwBuiFalcDvBcleDfkIQt6J0rwNyArKrDcD4YJ3gAdkCV1hQm+T8JnSa+GCX4Qsqa9LPecKngbZE0NUFAFb4Usqk0V/BXIolpUwRshi8qrv86yqQZF8NqUByuQRa1CJbngS5BFLaqCP4Es6okq+OMszjYXBpRLfRaypruA1L/ji5AlzYbdiLgJWdELmAkb/EPIimb4/V4JG3wB5iELmoy6vVyEatdjZvtO1OC3ZOarWSNxj5BOQrVqjtm+GTf4HHwE1aZ1OJn0mPgslKCaNMxsLyQNXoY3YaOKvr5G0roRMQenq+QvIm+nfflnHEZgq6oErzHb5VSDCxdgGLaaFuAAlHRe8LsEJ7fQ7/yUhF4ycaVzHH4GJbCpIhyFNZOXeO/CT2DS0jbScRiwdXu5DD2wB2ZAt1bgLOyCW1bvqwsL8As4BPcgba3BCOyE67Bu/qK+evkfgJ0wIP8cV8swAa/D9+ECrNptzVCzCEWhCTrhILTCjgqdSEtQhgX57KysHGOqu70t2zry7beKGbfcd2YG13fGUjfbd6Ym2Hdmf6m7vjPXd6YJ13fm+s5c35nrO3N9Z1C7fWdQu31nUHN9Z67vDGqu78z1nUGt9J25vjPXdwa10nfm+s5c3xm4vjPXd+b6zlzfmes7yyiu/coFd31nGcH1nUFG+85c35nrO3N9Z1AzfWeu7wxqpu/M9Z1BzfSdub4zqL2+M6iZvjPXdwbZ7TtzfWeu78z1nbm+M9d35vrOXN+ZsfarMnwkKPW9l15KZPb1V1/FChD1fWd7oQ0aA/vXz+ncj9Uw89nLLyf2fu3LL5d1BO+Ad+AwNMFmugdTMCHPWooRPLk3/xFWkgbfC1fENIrWYBRGWQUvQgTX4s0qeBHn6+wU3I9qLORhCD5XPdZfpzcrqTlq8BtCPSTRPnhEeEVvmj5vwreHDT4ks52WmuG24jUeWr0J36IK3g0XIW21SPgKs2jGm/D1mwXfAX/Q3EEwCAHZ8vaD90t4nTrHrAe+ksx5M+tNgeByx1u/8kEflqA1bw+OGbyr/gb4sujtGe4M3s1yL/gGZr1ZYXj7wduNdwWLbHp7FnpHXwGRPW8PGm1dtbTp7cE6WJFNbw/KYFLLIDLvbfGCn+9n09uDOcM3khZAZM/bg1tgSncCmxNGvWVzwl/qBmd9AhAAfxBr3p4YDIBuzTLbswEDY97M9myl4HOal90GnIeAbHlLcKFH4yPGfsdsPw6am/JmtvHePPgKHNVwbDNO6OuKMdq8CY23es/tCexPceaLhFZcw9LnTeiTUXZZn0r4WwmPkY4TWnGerc+b0ANx9tVX4DgciHiYtwbDsJPQyj+8Lm9C30p6aHhPwhegG7qgEXZDgyzLVXgIU/KVFfMsO7k3gdfTPi1dgqsC8iFo+jf2Xu9SeFfm67q6xMfEDdAJzYF2h8UYp6EVazE7i/J/b/8bvPeE8fPxHTAIvZCHoB7CBZgJEThYK/jz/9YiuLIWFKAfuqAAS9+5yrkUZ7xX4Ql55yqFFtphGq5B7v+EDl2Lsdcgp3gK6L/hPSh8J1iv/PvO6OP94K3wmT9QyRkY2yR0arWkxieQVzzRrxB1vCcGH0ATiEKH7wJfCWox65Vq9YXYl2uEvqjj5UAh9gMyLgZmO7VaAvVC6VjU8V7Cp17u44CgzTdIVotZ92tBhJXTFHV8Go9D+SmI0qkVYzOyHHW8J9+vCeTPSpq1hCkIo6mo4z0MVtPaG0+zljAKa2Eu/EQdn0bj/HMQpVrLv7W8eZg1+fli1PGeLI8kW7ZzIEqxls8s7IEJWA7ce90Ds3HGb4dJ6It5Tj0ReDFqolpsHFCrohbhN4JK6vESvARFuBzjOGY4sF1c4ispca2rE+9viyU+F7VDoRiplVr2yILtyklqyVVMQ/KDb8DbcB5U1zDnYf9mbdcE2IBItRgvtUwH9xmFnXAJ5mBNDJ7CTTgadkOQMMpajNkP1DKvut+e6NFqcPjTO8bCyKaGAvesJ+WVyFMwDQ/gG+EBTMvPGKOWBh8trRnNMATvQq7i7omsZLgGk3BJ8VoPmz7qGReTZ9AroVXKydhnijvmGn2SBz8D05CPeW1yWmoopMEnQfAjMAZJNSa1AtLjkzR4C/wJcpBUOalFTV86fZIEv5jyZbtGqelLo0/c4AV4F9IWNakt0u0TJ/ivIQdpKye1RXp94gTvBF3qAJEpHx+bz17eDSK9PnGCN4Em+bUN+bi/pFi+vezX1u0TJ/hTE7eFzfn42HxK5z9BpNcnTvCPYUPPVUpqi3T7xAm+qOnZLpNSW6TXJ+4OzDCsQVqSO2e+dPvEDV6CtyAtvSU1fWn0iR1cmIKzkFTUoFZAOn0SBReuJ3iI1Jp8lhoKGfNRBw/OyC6YhA1QaUPG7lLMgE6f5MGFEvTAD+E0zMDDwEW/GTgtY3pUv2t2fNQnKUY59P4ft9mUO0kJyatwBe5XOO24Lz9jTHjZ9N4e8lV5/dAEaNPTjn0yrgxFGFcdE9v09hT731/AmBiHVZN85gvVvrd5b3XwK3A7YWN7QWpQSyEj3urgf4F+SEv9UlMhnd7q4Jc1vdiRmtQOyJZ3MPgxGARdGhQPX9a8/eD1cAO0KvjkLnvefvAzhl7GjAdeIpveHuSgD0yp7/MTPTLr5r2hXoLL8xCNSR5fiix6S3DTEk9b3pYeeQTiacvb3ntLxdOWt73Xd4qnLe+aPzRctfWiRZveHjwHsxJPW9723mkonja9PbgDZiWe9rz9Y+IymFJZPJE9bw/W4SqY0lW2l/FEFrzFk+BIzEugW6XA0Y8lbz/4uqGXPuHh737a9A6+2m8EdKkoHr4sensVXvr0MaQqqTkAAdnz9iCoN6GY7kxTUyHT3h5U0gD8KmF3cElMFTNtzFsdXLgJu+B8xO/asnzmR6qla9PbC9HaPAo/gENQhPkKZ9jz8rNDMnY0zLmZTe/tEFZ3BQ0y7/0fVpShI0Vk2hAAAAAASUVORK5CYII=) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productShop {position: relative;height: 22px;line-height: 20px;margin-bottom: 5px;color: #999;white-space: nowrap;overflow: visible;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productShop .productShop-name {float: left;line-height: 20px;height: 20px;max-width: 144px;color: #999;text-decoration: underline;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productStatus {position: relative;height: 32px;border: none;border-top: 1px solid #eee;margin-bottom: 0px;color: #999;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.product .productStatus span {white-space: nowrap;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.product-iWrap * {font-size: 12px;}.productStatus em {color: #b57c5b;}.product .productStatus span {white-space: nowrap;}.productStatus a {color: #38b;}.productStatus a, .productStatus em {margin-top: -8px;font-family: arial;font-size: 12px;font-weight: 700;}.product-iWrap * {font-size: 12px;}.product .productStatus span {white-space: nowrap;}.productStatus .ww-light {border-right: none;width: 9%;text-align: center;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.ww-light {overflow: hidden;}.product-iWrap * {font-size: 12px;}.productStatus .ww-light a {background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;background-size: 16px !important;position: relative;width: 16px;height: 16px;margin-top: -3px;}.ww-small .ww-online {background-position: -80px 0;}.ww-light a {background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);text-decoration: none !important;width: 20px;height: 20px;zoom: 1;}.productStatus a {color: #38b;}.productStatus a, .productStatus em {margin-top: -8px;font-family: arial;font-size: 12px;font-weight: 700;}.ww-inline {display: inline-block;vertical-align: text-bottom;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productStatus .ww-light a span {padding: 0;display: none;white-space: nowrap;color: #999;top: 18px;left: -2px;height: 14px;position: absolute;width: 2em !important;overflow: hidden;margin-left: -2px;border-right: none;font-weight: 400;font-size: 12px;}.product .productStatus span {white-space: nowrap;}.ww-light a span {display: none;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.product-iWrap * {font-size: 12px;}.productPrice .tag::before, .productPrice i::before {display: block;}.productPrice .tag, .productPrice i {position: relative;top: 0px;right: 0px;float: right;width: 30px;height: 30px;background-position: center 0;margin-right: -6px;}.i-1111-5::before, .i-1111::before, .i-1212::before, .i-3c::before, .i-hwzhigou::before, .i-new::before, .i-presell::before, .i-temai::before, .i-zqg::before, .tag::before {display: none;content: "";position: absolute;width: 0px;height: 0px;right: 0px;top: -5px;border: 3px solid transparent;border-left-color: #dadada;border-bottom-color: #dadada;border-bottom-width: 2px;}.i-1111, .i-1111-5, .i-1212, .i-3c, .i-hwzhigou, .i-new, .i-presell, .i-temai, .i-zqg, .tag {background-repeat: no-repeat;background-position: center center;background-color: transparent;position: absolute;top: -4px;left: 5px;width: 40px;height: 40px;z-index: 1;box-shadow: 1px -2px 5px -2px rgba(0,0,0,0.3);}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.i-1111 img, .i-1111-5 img, .i-1212 img, .i-3c img, .i-hwzhigou img, .i-new img, .i-presell img, .i-temai img, .i-zqg img, .tag img {width: 30px;height: 30px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 212px;;/* 天猫设置宽度为210像素,右翻页图标会被挤到下一行的位置 */}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productAlbum {position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;overflow: hidden;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;border: 4px solid transparent;}.album-new2 .pa-cover {display: block;width: 100%;height: 100%;-webkit-transform: translate3d(50%, 0, 0);-moz-transform: translate3d(50%, 0, 0);-ms-transform: translate3d(50%, 0px, 0px);-o-transform: translate3d(50%, 0, 0);transform: translate3d(50%, 0px, 0px);}.productAlbum a {text-decoration: none;}a {outline: 0;}.album-new2 .pa-cover img {height: 100%;width: auto;padding: 0;-webkit-transform: translate3d(-50%, 0, 0);-moz-transform: translate3d(-50%, 0, 0);-ms-transform: translate3d(-50%, 0px, 0px);-o-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0px, 0px);}.productAlbum .pa-cover img {width: 100%;padding-bottom: 200px;border: none;}.album-new2 .pa-cover {display: block;width: 100%;height: 100%;-webkit-transform: translate3d(50%, 0, 0);-moz-transform: translate3d(50%, 0, 0);-ms-transform: translate3d(50%, 0px, 0px);-o-transform: translate3d(50%, 0, 0);transform: translate3d(50%, 0px, 0px);}.productAlbum {position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;overflow: hidden;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;border: 4px solid transparent;}.album-new2 .pa-info {display: block;width: 170px;height: 90px;padding-top: 10px;position: absolute;left: 20px;bottom: 50px;text-align: center;background-image: url(about:blank);background-color: rgba(0,0,0,.4);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);}.productAlbum a {text-decoration: none;}a {outline: 0;}a {text-decoration: none;}.album-new2 .pa-info .palr-brand {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-bottom: 1px dashed #fff;}.album-new2 .pa-info span {color: #fff;height: 30px;line-height: 20px;margin: 10px 15px 0;}.productAlbum .palr-brand {display: block;line-height: 18px;text-decoration: none;letter-spacing: 0.5px;font-size: 15px;margin-bottom: 10px;}.album-new2 .pa-info {display: block;width: 170px;height: 90px;padding-top: 10px;position: absolute;left: 20px;bottom: 50px;text-align: center;background-image: url(about:blank);background-color: rgba(0,0,0,.4);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);}.album-new2 .pa-info .palr-title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.album-new2 .pa-info span {color: #fff;height: 30px;line-height: 20px;margin: 10px 15px 0;}.productAlbum .palr-title {display: inline-block;text-decoration: none;font-size: 14px;line-height: 26px;height: 26px;min-width: 80%;max-width: 10em;margin-bottom: -3px;overflow: hidden;}.album-new2 .pa-icon-new {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAABeCAYAAACq0qNuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MWM4MzNiMS0xNjY0LTQ3OTItYjU5MC02ZDgzN2Q2ZjcxYTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFOEVFNzBBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFOEVFNkZBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphMmMyYzBkZi03NjViLTRmYWMtOWUzNC0zMTVkNzJjMTdmY2EiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiMjcwM2Y3ZC1lNjhlLTExNzctYjEy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) no-repeat;}.album-new2 .pa-icon-new, .album-new2 .pa-icon-shang, .album-new2 .pa-icon-zhuan {width: 94px;height: 94px;left: 0px;top: 0px;position: absolute;}</style>

第31步:删掉没有用到的css样式定义,同时一起删掉重复的css样式定义定义

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
        <title>品牌街-上天猫,就够了</title>
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="">
        <style type="text/css">
            body,div,p{margin:0;padding:0;}
            body{font-size:12px;font-family:"微软雅黑";color:#666;}
            .top{width:100%;height:85px;background:#ffffff;}
            .top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
            .top .t-header .t-logo{float:left;margin-top:28px;}
            .top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
            .banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}
            .view::after {
                height: 0px;
            }
            .view::after {
                display: block;
            }
            .productAlbum .pal-items::after, .view::after {
                clear: both;
                content: " ";
            }
            /*@media all and (min-width:1210px)*/
            .view {
                width: 1210px;
                padding-left: 5px;
                padding-right: 5px;
            }
            .view {
                width: 1023px;
            }
            .view, .w1 .view, .w2 .view {
                padding-left: 5px;
                padding-right: 5px;
            }
            .view {
                margin-top: 10px;
            }
            /*@media all and (min-width:1210px)*/
            .view .product {
                width: 220px;
                margin-right: 20px;
            }
            .view .product {
                width: 220px;
                margin-right: 33px;
            }
            .product {
                height: 372px;
            }
            .product {
                position: relative;
                float: left;
                padding: 0;
                margin: 0 0 20px;
                line-height: 1.5;
                overflow: visible;
                z-index: 1;
            }
            .product-iWrap {
                min-height: 98%;
                width: 212px;/* 天猫设置宽度为210像素,右翻页图标会被挤到下一行的位置 */
            }
            .product-iWrap {
                position: absolute;
                background-color: #fff;
                margin: 0;
                padding: 4px 4px 0;
                font-size: 0px;
                border: 1px solid #f5f5f5;
                border-radius: 3px;
            }
            .productImg-wrap {
                position: relative;
            }
            .productImg-wrap {
                display: table;
                table-layout: fixed;
                height: 210px;
                width: 100%;
                padding: 0;
                margin: 0 0 5px;
            }
            .product-iWrap * {
                font-size: 12px;
            }
            .productImg-wrap a, .productImg-wrap img {
                max-width: 100%;
                max-height: 210px;
            }
            .productImg {
                _height: 100% !important;
            }
            .productImg {
                display: table-cell;
                width: 100%;
                text-align: center;
            }
             .proThumb-img, .proThumb-img img,.productImg,.productPrice em b {
                vertical-align: middle;
            }
            a {
                outline: 0;
            }
            .productImg img {
                display: block;
                margin: 0 auto;
            }
            .productImg-wrap a, .productImg-wrap img {
                max-width: 100%;
                max-height: 210px;
            }
            .clearfix::after {
                clear: both;
            }
            .clearfix::after, .clearfix::before {
                display: table;
                content: "";
                overflow: hidden;
            }
            .productThumb {
                margin-bottom: 5px;
            }
            .clearfix {
                zoom: 1;
            }
            .proThumb-next, .proThumb-prev {
                float: left;
                margin: 14px 2px 0 -3px;
                visibility: hidden;
                cursor: pointer;
            }
            .ui-slide-arrow-s {
                display: inline-block;
                position: relative;
                height: 14px;
                width: 14px;
                background-color: #b8b2b1;
                background-color: transparent\9;
                background-color: #b8b2b1\9\0;
                background-position: -37px -142px;
                color: #fff;
                text-align: center;
                font: 700 11px/15px 宋体, Hei;
                border-radius: 8px;
                -ms-border-radius: 9px;
                -moz-border-radius: 9px;
                -webkit-border-radius: 9px;
                -o-border-radius: 9px;
                -khtml-border-radius: 9px;
            }
            .ui-slide-arrow-s {
                background: url(data:image/png;base64,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) no-repeat\9;
            }
            a {
                outline: 0;
            }
            .proThumb-wrap {
                display: inline;
                float: left;
                height: 34px;
                padding-top: 5px;
                overflow: hidden;
                position: relative;
                width: 185px;
            }
            .proThumb-img {
                display: table-cell;
                float: left;
                height: 30px;
                width: 30px;
                margin-right: 3px;
                padding: 1px;
                font-size: 0px;
                text-align: center;
                border: 1px solid #CCC;
                cursor: pointer;
            }
            b, strong {
                font-weight: 400;
            }
            .proThumb-img img {
                max-height: 30px;
                max-width: 30px;
            }
            .proThumb-img * {
                font-size: 12px;
            }
            .proThumb-next {
                margin: 14px -3px 0 0;
            }
            .proThumb-next, .proThumb-prev {
                float: left;
                margin: 14px 2px 0 -3px;
                visibility: hidden;
                cursor: pointer;
            }
            .productPrice {
                font-family: arial,verdana,sans-serif !important;
                color: #c00;
                font-size: 14px;
                height: 30px;
                line-height: 30px;
                margin: 0 0 5px;
                letter-spacing: normal;
                overflow: inherit !important;
                white-space: nowrap;
            }
            .productPrice, .productShop, .productStatus, .productTitle {
                display: block;
                overflow: hidden;
                margin-bottom: 3px;
            }
            .productPrice em {
                float: left;
                font-family: arial;
                font-weight: 400;
                font-size: 20px;
                color: #bc00000;
            }
            .productPrice * {
                height: 30px;
            }
            .productPrice em b {
                margin-right: 2px;
                font-weight: 700;
                font-size: 14px;
            }
            .productTitle {
                display: block;
                color: #666;
                height: 14px;
                line-height: 12px;
                margin-bottom: 3px;
                word-break: break-all;
                font-size: 0px;
                position: relative;
            }
            .productTitle a {
                color: #333;
            }
            .productTitle * {
                font-size: 12px;
                font-family: 微软雅黑;
                line-height: 14px;
            }
            a {
                outline: 0;
            }
            .productShop {
                position: relative;
                height: 22px;
                line-height: 20px;
                margin-bottom: 5px;
                color: #999;
                white-space: nowrap;
                overflow: visible;
            }
            .productShop .productShop-name {
                float: left;
                line-height: 20px;
                height: 20px;
                max-width: 144px;
                color: #999;
                text-decoration: underline;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .productStatus {
                position: relative;
                height: 32px;
                border: none;
                border-top: 1px solid #eee;
                margin-bottom: 0px;
                color: #999;
            }
            .product .productStatus span {
                white-space: nowrap;
            }
            .productStatus span {
                float: left;
                display: inline-block;
                border-right: 1px solid #eee;
                width: 39%;
                padding: 10px 1px;
                margin-right: 6px;
                line-height: 12px;
                text-align: left;
                white-space: nowrap;
            }
            .productStatus em {
                color: #b57c5b;
            }
            .product .productStatus span {
                white-space: nowrap;
            }
            .productStatus a {
                color: #38b;
            }
            .productStatus a, .productStatus em {
                margin-top: -8px;
                font-family: arial;
                font-size: 12px;
                font-weight: 700;
            }
            .product-iWrap * {
                font-size: 12px;
            }
            .product .productStatus span {
                white-space: nowrap;
            }
            .productStatus .ww-light {
                border-right: none;
                width: 9%;
                text-align: center;
            }
            .productStatus span {
                float: left;
                display: inline-block;
                border-right: 1px solid #eee;
                width: 39%;
                padding: 10px 1px;
                margin-right: 6px;
                line-height: 12px;
                text-align: left;
                white-space: nowrap;
            }
            .ww-light {
                overflow: hidden;
            }
            .product-iWrap * {
                font-size: 12px;
            }
            .productStatus .ww-light a {
                background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;
                background-size: 16px !important;
                position: relative;
                width: 16px;
                height: 16px;
                margin-top: -3px;
            }
            .ww-small .ww-online {
                background-position: -80px 0;
            }
            .ww-light a {
                background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");
                background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
                background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
                background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
                background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
                text-decoration: none !important;
                width: 20px;
                height: 20px;
                zoom: 1;
            }
            .productStatus a {
                color: #38b;
            }
            .productStatus a, .productStatus em {
                margin-top: -8px;
                font-family: arial;
                font-size: 12px;
                font-weight: 700;
            }
            .ww-inline {
                display: inline-block;
                vertical-align: text-bottom;
            }
            .productStatus .ww-light a span {
                padding: 0;
                display: none;
                white-space: nowrap;
                color: #999;
                top: 18px;
                left: -2px;
                height: 14px;
                position: absolute;
                width: 2em !important;
                overflow: hidden;
                margin-left: -2px;
                border-right: none;
                font-weight: 400;
                font-size: 12px;
            }
            .product .productStatus span {
                white-space: nowrap;
            }
            .ww-light a span {
                display: none;
            }
            .productPrice .tag::before, .productPrice i::before {
                display: block;
            }
            .productPrice .tag, .productPrice i {
                position: relative;
                top: 0px;
                right: 0px;
                float: right;
                width: 30px;
                height: 30px;
                background-position: center 0;
                margin-right: -6px;
            }
             .tag::before {
                display: none;
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 0px;
                top: -5px;
                border: 3px solid transparent;
                border-left-color: #dadada;
                border-bottom-color: #dadada;
                border-bottom-width: 2px;
            }
             .tag {
                background-repeat: no-repeat;
                background-position: center center;
                background-color: transparent;
                position: absolute;
                top: -4px;
                left: 5px;
                width: 40px;
                height: 40px;
                z-index: 1;
                box-shadow: 1px -2px 5px -2px rgba(0,0,0,0.3);
            }
            .productPrice * {
                height: 30px;
            }
           .tag img {
                width: 30px;
                height: 30px;
            }
            .productAlbum {
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                overflow: hidden;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                border: 4px solid transparent;
            }
            .album-new2 .pa-cover {
                display: block;
                width: 100%;
                height: 100%;
                -webkit-transform: translate3d(50%, 0, 0);
                -moz-transform: translate3d(50%, 0, 0);
                -ms-transform: translate3d(50%, 0px, 0px);
                -o-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0px, 0px);
            }
            .productAlbum a {
                text-decoration: none;
            }
            a {
                outline: 0;
            }
            .album-new2 .pa-cover img {
                height: 100%;
                width: auto;
                padding: 0;
                -webkit-transform: translate3d(-50%, 0, 0);
                -moz-transform: translate3d(-50%, 0, 0);
                -ms-transform: translate3d(-50%, 0px, 0px);
                -o-transform: translate3d(-50%, 0, 0);
                transform: translate3d(-50%, 0px, 0px);
            }
            .productAlbum .pa-cover img {
                width: 100%;
                padding-bottom: 200px;
                border: none;
            }
            .album-new2 .pa-cover {
                display: block;
                width: 100%;
                height: 100%;
                -webkit-transform: translate3d(50%, 0, 0);
                -moz-transform: translate3d(50%, 0, 0);
                -ms-transform: translate3d(50%, 0px, 0px);
                -o-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0px, 0px);
            }
            .album-new2 .pa-info {
                display: block;
                width: 170px;
                height: 90px;
                padding-top: 10px;
                position: absolute;
                left: 20px;
                bottom: 50px;
                text-align: center;
                background-image: url(about:blank);
                background-color: rgba(0,0,0,.4);
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);
            }
            .productAlbum a {
                text-decoration: none;
            }
            a {
                text-decoration: none;
            }
            .album-new2 .pa-info .palr-brand {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                border-bottom: 1px dashed #fff;
            }
            .album-new2 .pa-info span {
                color: #fff;
                height: 30px;
                line-height: 20px;
                margin: 10px 15px 0;
            }
            .productAlbum .palr-brand {
                display: block;
                line-height: 18px;
                text-decoration: none;
                letter-spacing: 0.5px;
                font-size: 15px;
                margin-bottom: 10px;
            }
            .album-new2 .pa-info .palr-title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .album-new2 .pa-info span {
                color: #fff;
                height: 30px;
                line-height: 20px;
                margin: 10px 15px 0;
            }
            .productAlbum .palr-title {
                display: inline-block;
                text-decoration: none;
                font-size: 14px;
                line-height: 26px;
                height: 26px;
                min-width: 80%;
                max-width: 10em;
                margin-bottom: -3px;
                overflow: hidden;
            }
            .album-new2 .pa-icon-new {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAABeCAYAAACq0qNuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MWM4MzNiMS0xNjY0LTQ3OTItYjU5MC02ZDgzN2Q2ZjcxYTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFOEVFNzBBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFOEVFNkZBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphMmMyYzBkZi03NjViLTRmYWMtOWUzNC0zMTVkNzJjMTdmY2EiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiMjcwM2Y3ZC1lNjhlLTExNzctYjEy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) no-repeat;
            }
            .album-new2 .pa-icon-new{
                width: 94px;
                height: 94px;
                left: 0px;
                top: 0px;
                position: absolute;
            }
            .product:hover {
                overflow: visible;
                z-index: 3;
                background: #fff
            }

            .product:hover .product-iWrap {
                height: auto;
                margin: -3px;
                border: 4px solid #bc0000;
                border-radius: 0;
                -webkit-transition: border-color .2s ease-in;
                -moz-transition: border-color .2s ease-in;
                -ms-transition: border-color .2s ease-in;
                -o-transition: border-color .2s ease-in;
                transition: border-color .2s ease-in
            }

            .proThumb-img img.hover,.proThumb-img img:hover,.proThumb-selected img {
                padding: 0
            }
            .proThumb-disable:hover {
                cursor: default;
                background-color: #B8B2B1;
                background-color: transparent\9;
                background-color: #B8B2B1\9\0;
                background-position: -37px -142px;
            }

            .ui-slide-arrow-s:hover {
                background-color: #B91919;
                background-color: transparent\9;
                background-color: #B91919\9\0;
                background-position: -50px -142px;
                -moz-transition: background .2s ease-in,color .2s ease-out;
                -webkit-transition: background .2s ease-in,color .2s ease-out;
                -o-transition: background .2s ease-in,color .2s ease-out;
                transition: background .2s ease-in,color .2s ease-out
            }

        </style>
    </head>
    <body>
        <div class="top">
            <div class="t-header">
                <div class="t-logo">
                    <a href="#">
                        <img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
                    </a>
                </div>
                <div class="t-desc">品牌咱都来这儿集合了!</div>
            </div>
        </div>
        <div class="banner"></div>
        <!-- 类名称为view的div标签(也就是我们查看元素时候看到的第1个黑色的小三角形标签)就是所有卡视图商品的容器-->
        <div class="view">
            <!-- start 第1件商品 -->
            <div class="product" data-id="543881587553" data-atp="a!,,50010850,,,,,,,,">
                <div class="product-iWrap">
                    <div class="productImg-wrap">
                        <a href="http://detail.tmall.com/item.htm?id=543881587553&amp;skuId=3274437069773&amp;user_id=420567757&amp;cat_id=55836006&amp;is_b=1&amp;rn=45d729ec5964eb1049d5e99ae19782d5" class="productImg" target="_blank" data-p="1-10">
                            <img  src="http://img.alicdn.com/bao/uploaded/i1/TB1axnyOVXXXXbdaXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg" />
                        </a>
                    </div>
                    <div class="productThumb clearfix">
                        <div class="proThumb-wrap">
                            <p class="ks-switchable-content">
                                <b data-sku="1627207:1489879654" class="proThumb-img " data-index="1:1">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/420567757/TB2gswFbC0jpuFjy0FlXXc0bpXa-420567757.jpg_30x30.jpg" atpanel="1-1,543881587553,,,spu/shop,20,itemsku,"/>
                                    <i></i>
                                </b>
                                <b data-sku="1627207:1495898220" class="proThumb-img " data-index="1:2">
                                    <img src="http://img.alicdn.com/bao/uploaded/i1/420567757/TB2_1zRb0XnpuFjSZFoXXXLcpXa-420567757.jpg_30x30.jpg" atpanel="1-2,543881587553,,,spu/shop,20,itemsku,"/>
                                    <i></i>
                                </b>
                                <b data-sku="1627207:441746199" class="proThumb-img " data-index="1:3">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/420567757/TB2KUMBbrFlpuFjy0FgXXbRBVXa-420567757.jpg_30x30.jpg" atpanel="1-3,543881587553,,,spu/shop,20,itemsku,"/>
                                    <i></i>
                                </b>
                            </p>
                        </div>
                    </div>
                    <p class="productPrice">
                        <a class="tag">
                            <img src="http://img.alicdn.com/tps/i2/TB16x_xHVXXXXcgXFXXQweWFVXX-30-30.png" title="" />
                        </a>
                        <em title="649.00">
                            <b>&yen;</b>
                            649.00
                        </em>
                    </p>
                    <p class="productTitle">
                        <a href="http://detail.tmall.com/item.htm?id=543881587553&amp;skuId=3274437069773&amp;user_id=420567757&amp;cat_id=55836006&amp;is_b=1&amp;rn=45d729ec5964eb1049d5e99ae19782d5" target="_blank" title="满300用券减30VeroModa圆领五分袖收腰A摆蕾丝连衣裙|31716Z524" data-p="1-11" >
                            满300用券减30VeroModa圆领五分袖收腰A摆蕾丝
                            <span class=H>连衣裙</span>|31716Z524
                        </a>
                    </p>
                    <div class="productShop" data-atp="b!1-3,{user_id},,,,,,">
                        <a class="productShop-name" href="http://store.taobao.com/search.htm?user_number_id=420567757&amp;rn=45d729ec5964eb1049d5e99ae19782d5&amp;keyword=连衣裙" target="_blank">
                            veromoda官方旗舰店
                        </a>
                    </div>
                    <p class="productStatus">
                        <span>月成交 <em>257笔</em></span>
                        <span>评价
                            <a href="//detail.tmall.com/item.htm?id=543881587553&amp;skuId=3274437069773&amp;is_b=1&amp;cat_id=2&amp;q=vero+moda+%C0%D9%CB%BF+%C1%AC%D2%C2%C8%B9&amp;on_comment=1#J_TabBar" target="_blank" atpanel="1-1-1,543881587553,50010850,718030407,spu,1,lessprocess,420567757">
                                23
                            </a>
                        </span>
                        <span class="ww-light ww-small" data-atp="a!1-2,,,,,,,420567757" data-display="inline" data-tnick="veromoda官方旗舰店" data-nick="veromoda官方旗舰店" data-item="543881587553" data-icon="small">
                            <a title="点此可以直接和卖家交流选好的宝贝,或相互交流网购体验,还支持语音视频噢。" class="ww-inline ww-online" href="https://amos.alicdn.com/getcid.aw?v=3&amp;groupid=0&amp;s=1&amp;charset=utf-8&amp;uid=veromoda官方旗舰店&amp;site=cntaobao&amp;groupid=0&amp;s=1&amp;fromid=cntaobaoAhAQzhIGc5nQx7c8wThUerHDoFBi2fQj" target="_blank" atpanel="1-2,,,,,,,420567757">
                                <span>
                                    旺旺在线
                                </span>
                            </a>
                        </span>
                    </p>
                </div>
            </div>
            <!-- end 第1件商品 -->
            <!-- start 第2件商品 -->
            <div class="product  " data-atp="a!,,162103,,,,,,,," data-id="542747012849">
                <div class="product-iWrap">
                    <div class="productImg-wrap">
                        <a class="productImg" href="http://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.271.C6Ok7e&amp;id=542747012849&amp;skuId=3263636993070&amp;user_id=2934171215&amp;cat_id=50025135&amp;is_b=1&amp;rn=0c421b1111d61dd7ddee9a68229910da" target="_blank" atpanel="56-10,542747012849,162103,,spu,1,spu,2934171215,,," data-p="56-10" data-spm-anchor-id="a220m.1000858.1000725.271">
                            <img src="http://img.alicdn.com/bao/uploaded/i4/TB14b0ROXXXXXbYXXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg">
                        </a>
                    </div>
                    <div class="productThumb clearfix">
                        <a title="上一页" class="ui-slide-arrow-s j_ProThumbPrev proThumb-prev proThumb-disable" style="visibility: visible;" href="javascript:;" atpanel=",542747012849,162103,,spu,1,spu,,,," data-spm-anchor-id="a220m.1000858.1000725.272">&lt;</a>
                        <div class="proThumb-wrap">
                            <p class="ks-switchable-content" style="left: 0px; width: 999999px; position: absolute;">
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:1" data-sku="1627207:1216436170">
                                    <img src="http://img.alicdn.com/bao/uploaded/i2/2934171215/TB2IHU6XmXlpuFjy0FeXXcJbFXa_!!2934171215.jpg_30x30.jpg" atpanel="56-1,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:2" data-sku="1627207:1566931672">
                                    <img src="http://img.alicdn.com/bao/uploaded/i1/2934171215/TB2G8Z8XhdkpuFjy0FbXXaNnpXa_!!2934171215.jpg_30x30.jpg" atpanel="56-2,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:3" data-sku="1627207:1566931673">
                                    <img src="http://img.alicdn.com/bao/uploaded/i2/2934171215/TB2AY4QXtXnpuFjSZFoXXXLcpXa_!!2934171215.jpg_30x30.jpg" atpanel="56-3,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:4" data-sku="1627207:1566931676">
                                    <img src="http://img.alicdn.com/bao/uploaded/i2/2934171215/TB2OLJPXrBnpuFjSZFGXXX51pXa_!!2934171215.jpg_30x30.jpg" atpanel="56-4,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:5" data-sku="1627207:1600529563">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/2934171215/TB2KQg8XmtkpuFjy0FhXXXQzFXa_!!2934171215.jpg_30x30.jpg" atpanel="56-5,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:6" data-sku="1627207:806356643">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/2934171215/TB2R3o6XmhlpuFjSspkXXa1ApXa_!!2934171215.jpg_30x30.jpg" atpanel="56-6,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:7" data-sku="1627207:806356644">
                                    <img src="http://img.alicdn.com/bao/uploaded/i4/2934171215/TB2NW37XhdkpuFjy0FbXXaNnpXa_!!2934171215.jpg_30x30.jpg" atpanel="56-7,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                                <b class="proThumb-img ks-switchable-panel-internal1337" style="float: left; display: block;" data-index="56:8" data-sku="1627207:822300622">
                                    <img src="http://img.alicdn.com/bao/uploaded/i3/2934171215/TB2kSg7Xl0kpuFjSsppXXcGTXXa_!!2934171215.jpg_30x30.jpg" atpanel="56-8,542747012849,,,spu/shop,20,itemsku,">
                                    <i></i>
                                </b>
                            </p>
                        </div>
                        <a title="下一页" class="ui-slide-arrow-s j_ProThumbNext proThumb-next" style="visibility: visible;" href="javascript:;" atpanel=",542747012849,162103,,spu,1,spu,,,," data-spm-anchor-id="a220m.1000858.1000725.273">&gt;</a>
                    </div>
                    <p class="productPrice">
                        <em title="138.00"><b>¥</b>138.00</em>
                    </p>
                    <p class="productTitle">
                        <a title="圆领毛衣女秋冬宽松中长款套头加厚韩版针织打底衫长袖连衣裙2016" href="http://detail.tmall.com/item.htm?id=542747012849&amp;skuId=3263636993070&amp;user_id=2934171215&amp;cat_id=50025135&amp;is_b=1&amp;rn=0c421b1111d61dd7ddee9a68229910da" target="_blank" atpanel="56-11,542747012849,162103,,spu,1,spu,2934171215,,," data-p="56-11" data-spm-anchor-id="a220m.1000858.1000725.274">
                        圆领秋冬宽松套头加厚韩版针织连衣裙
                        </a>
                    </p>
                    <div class="productShop" data-atp="b!56-3,{user_id},,,,,,">
                        <a class="productShop-name" href="http://store.taobao.com/search.htm?user_number_id=2934171215&amp;rn=0c421b1111d61dd7ddee9a68229910da&amp;keyword=连衣裙" target="_blank" atpanel="56-3,,,,spu,2,spu," data-spm-anchor-id="a220m.1000858.1000725.275">
                        蜜荻旗舰店
                        </a>
                    </div>
                    <p class="productStatus">
                        <span>月成交 <em>350笔</em></span>
                        <span>评价 <a href="http://detail.tmall.com/item.htm?id=542747012849&amp;skuId=3263636993070&amp;user_id=2934171215&amp;cat_id=50025135&amp;is_b=1&amp;rn=0c421b1111d61dd7ddee9a68229910da&amp;on_comment=1#J_TabBar" target="_blank" atpanel="56-1,542747012849,162103,,spu,1,spu,2934171215,,," data-p="56-1" data-spm-anchor-id="a220m.1000858.1000725.276">214</a></span>
                        <span class="ww-light ww-small" data-atp="a!56-2,,,,,,,2934171215" data-display="inline" data-tnick="蜜荻旗舰店" data-nick="蜜荻旗舰店" data-item="542747012849" data-icon="small"><a title="点此可以直接和卖家交流选好的宝贝,或相互交流网购体验,还支持语音视频噢。" class="ww-inline ww-online" href="https://amos.alicdn.com/getcid.aw?v=3&amp;groupid=0&amp;s=1&amp;charset=utf-8&amp;uid=蜜荻旗舰店&amp;site=cntaobao&amp;groupid=0&amp;s=1&amp;fromid=cntaobaoArS05MyTX-3cy1OAhewoDjgpxHwmo9hb" target="_blank" data-spm-anchor-id="a220m.1000858.1000725.277"><span>旺旺在线</span></a></span>
                    </p>
                </div>
            </div>
            <!-- end 第2件商品 -->
            <!-- start 第1张新品专辑 -->
            <div class="product album-new2 ">
                <div class="product-iWrap">
                    <div class="productAlbum">
                        <a class="pa-cover" href="http://content.tmall.com/wow/pegasus/subject/0/710383795/6602689?spm=a220m.1000858.1000725.136.q88dyR&amp;gccpm=8302602.102.2.subject-1002.60665&amp;wh_tailer=2&amp;tailer=2&amp;wh_header=1&amp;header=1&amp;id=6602689&amp;rn=5ddd60ba9714bec0b49c04c8c29314e0&amp;cat=50025135&amp;from=act_1_act-2-new#J_Crumb" target="_blank" atpanel="28,8302602,,,spu,2,act-2-new,,act-2-new,," data-spm-anchor-id="a220m.1000858.1000725.136">
                           <img src="http://img.alicdn.com/bao/uploaded/TB1JD.APXXXXXXzXXXXSutbFXXX.jpg">
                        </a>
                        <a class="pa-info" href="http://content.tmall.com/wow/pegasus/subject/0/710383795/6602689?spm=a220m.1000858.1000725.137.q88dyR&amp;gccpm=8302602.102.2.subject-1002.60665&amp;wh_tailer=2&amp;tailer=2&amp;wh_header=1&amp;header=1&amp;id=6602689&amp;rn=5ddd60ba9714bec0b49c04c8c29314e0&amp;cat=50025135&amp;from=act_1_act-2-new#J_Crumb" target="_blank" atpanel="28,8302602,,,spu,2,act-2-new,,act-2-new,," data-spm-anchor-id="a220m.1000858.1000725.137">
                            <span title="墨概念" class="palr-brand">墨概念</span>
                            <span title="时髦爱豆们新年穿衣术" class="palr-title">时髦爱豆们新年穿衣术</span>
                        </a>
                        <i class="pa-icon-new"></i>     
                    </div>
                 </div>
            </div>
            <!-- end 第1张新品专辑 -->
        </div>
    </body>
</html>


最后应用到自己的产品当中,必需把同名称的css定义合并,合并操作省略,100%模仿,很酷吧?


0 0
原创粉丝点击