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

当前位置：首页 > 新闻动态 >

热卖商品

新闻详情

天猫品牌街Web前端开发第三阶段设计模仿前端开发的通..._CSDN博客

来自 : CSDN技术社区发布时间：2021-03-24

接下来我们要模仿天猫卡片视图设计直接从天猫的网站快速地获得卡片视图标签的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件商品

$\"\"$

第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 /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 /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,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;
}

$\"\"$

 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; } /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,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; } /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,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; } /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 /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,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;
}

$\"\"$

 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; } .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,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; } /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,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,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; } .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,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,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; } .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,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,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; } .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,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,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; } .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,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; } .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 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MWM4MzNiMS0xNjY0LTQ3OTItYjU5MC02ZDgzN2Q2ZjcxYTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFOEVFNzBBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFOEVFNkZBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphMmMyYzBkZi03NjViLTRmYWMtOWUzNC0zMTVkNzJjMTdmY2EiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiMjcwM2Y3ZC1lNjhlLTExNzctYjEyYS1lNGIzOWVjMzUwNDYiLz4gPC9yZGY6RGVzY3JpcHRpb24 IDwvcmRmOlJERj4gPC94OnhtcG1ldGE IDw/eHBhY2tldCBlbmQ9InIiPz5aQSzNAAAKjElEQVR42uycf3BU1RXH727T0k5SIw0QIggCktLGSmugnRo6nTI4YG1AmEKBqRWEyh/qH of6L/ o3RGZ4qmVUdn/NPqjOPoOOro6ExJKDZEhZJAExIJYklCIr yNbSx6fm8fffxdl2SfT/27r7knZkz7L7dfWw 97zvPefc zYxNjamvFpLIqGKaL8W/4P4AhVNGxK/rixiX/p28b3iNSq6RtQmkhH6wuvFn4o49PPii8SHkxGL9DkRho7EfE/8XIPoezJC0OdGGHq/ I/FT sDyYhAvzbC0E JrxTvcR9Mljj0JyMO/YR4o3hH9gulCn6deFPE5eW4 Cbxj3O9WIrgyV6eFr8mwtCPid8h3nqlN5Qa A3ifxKfHWHoR8S3ix8Y703JyQa9or6 2NB3TAS9VMAnbOh/Fq8OCn3pwYNq9t13F PvOCx l/jf83lzsVsGZfZECvSZQU70zYULVbUNfNEzz1j/9j37rEnod15pIi21iP 6PZEGhj5j40ZV392trl61SrUtWqRGenos Bw3ID3Iy1Yv0IsJ/hvia21Nnxn0ZOfefVcNt7VZUT9n927ree9DD1nwGYwCZy/IZLvXDyaLCJ1InxHkRGj5/Mcey4DPsfPyGNkh8nm9QJrfLb5GvMvPh5NFkJdGuzgKHOnTJMLnSoQzoZZNn67ab7nFifTP9uxRQy /7Gh yPBpAzSI9/rOKAwuhHzNbgM0Bc1enJlZYKPtGNrOc3S9ShzZIeL/uWmTMzAMir4yAhhdxiXig35P0CDMTUV8wpaXp8KCrjMZnbnMsSOfq4BoBzqvIzU8BjaPeV8AG1bpfvpgYCCGIl5rekHaAEyg333pJQu41vxDy5ZZx4CPBHEVcDUQ d27dvlJNVP2978Q9Puaingd6aFBJ0Wc64pc5GNQ9By4o2fPWscYAKSFSK975x1rAJAjnzJzMSzopgooDT1Qa5coBTaA ZdIRrv1a8AGMnpPNHOMCRWJ0RMs7 d9XAkeTS/XXQgTTLLA0EPppwMaRyo0dJ06ouuYhkrk66jn9XIZKKRGH/Non4v/wJ5QVRTAr7OhzwvjZGg3UZwNHTnRkY8R4Xqi5THRz2Bp3fdoLNf9VPzTQvVKChHpe8OCrqMZBz4TKXIDTCIZQ8MZHKRIT6w6ncTKvbcNyNNvE 8sWJoXclazztb00FaO3JpOJM wJ1CgE/lagniuwQe0Eyq9aaqtUNDDzmrW2b2XUJfrgK3lJWVnJIDXjTAiW f0IRjLdb8pJPSwNf72QuXpbk1nEMhegMykWmFPnEQ6MhT0vxL/ncqzn14KGq hF2y5TlegWl6oThkItJzoPx9cYtgF8Hvxv5lqWmVofCLPilR/RrQe6E/7aQNMv cedbapyVMur1NCHuPIDZMtV4Ju/3KFDNq5e552xIZ wBR0NN5XxAvwpJ29 IJe8/jjauEDD6iBxkbVtWZN3plNdpbDVYDcEPG6N6MzmTztHyq9RtqqDJvniG9Oy1Oj8rlGqqFrG3j77bzhh2wsXvxWeVw5KkpW05zupweOdLfNWr1aLZCU0LAdFd9cDOies5rm9MrRr xInxUEes8TT1iRru0a ucrV6b1u7a20H9zl536HlFFtDIP0BvtPD0w9NMPPmg9ruzvV9NmpU83euqUBf2GN99Uqa6uQskPxRHlbq8qsiXzlBcivSlM6BzX0DmOAb1cJkjkZ/Fbb4X9t562ey9Fhz4h Ob067cpn8t140F3Hz8jFaiG7tb EOGTEtFl7FMlYhNFvIY Owj0k88/nxf0lKSCHffeq0ZTqTDhfyHOiA6pErLkONGuNd1zGwCtnrdr1 XJc/Nm9W3xXFeAO9KH3n/fKqo6du7MgM9nA0Dn 59TJWbJcaB73p uM5LRzs4MeGXl5er7zz33lUgHaP rrzqfn7djhzU4F198UZ20t EFsJT9/UsOek7wzemJ1PNyHdB/uG fE53Ay4afLS8MxnBrqzO5YgzOtXJcXzH/kvKfc3k0luuuV kVpJK0jMq1JZEg0lnEuM7riZa0tKiqm29WQ/v3q2MNDc5xBgLAgM81kTIwDFDF8uVfKa58VrVo XLxT0oVOpVrwtXw0itH872eiAkQLQbiobVr1ch772W8DnzAuqHzXn0V5ILvE/qA C9UjnuOSg180gX9yaDQgQd0QC T4sgtO9nZS9tNNznVq54Dzr7xhlPV oDOct3qUofuaLxAX29PpPP8QseADmAtLRRHMzZsuCxFotVaXqhMmYCB64Y/c tWK9PxAZ2KdEMxey9 Jtc/Kh/LdfRWvrNihfN89rZtGXpuwbzqKuf13kcfzZmf973wgvOekV5fRSXLdexPb1URsoRkMZ5XuwFMNA 8koG6Jyi65KN7IFhIq5cutR67lNe2J E7WMEnTPbWFybBx4dBSZDN0pI3ZpYEAd3rIlZ3Rnp5hkQQGg09rdETXobqkZyxc6GQcOLCbIqlWrLJg9e/Y4MNF2ZCe7 rwSfJ/QO2zo 1VEDan5n0pvox63OKr/8MOcEsEATKuutipNih79HoCi325pyZYd5OoT106wPI2Vo7zvrou01HxLUj 3ZlMgpewbAnSmQgWaHeUTRb4P6ET6HVGGnm930spedNQS3aMXLlhXwOjwcEbxg81/ GHVuXv3hPBpCfgw9r0wUh pSWB5SQ1RWr54sSUp2RkMQN0yQwuYDUZuibFavUND1rFLUlgdufVWK4/3YN12cdQ9GaBbLYN8wGudX7B3r1MwXSl1HG5vVxV1dWrw9ddVLbt8Bb7u36DrX8hc4RE6u3V/pkpk5Sgs8HnvqwEWMuOWlzn33WelhNrOtbSo2kcesR5TXH1p92PKKiocXfdoZ8R/oly/bDRZzFMeT8FEnq41nczGbQtF35Ga84cPW8BJLRmkS6d9cWMSqZuM0PPW FwT7tLXXnOKn2k1NaryxhszrgYd3chLWVWVp 161GEqvXL0 WSE7knjc024VliKplNUkfHo1JKr4mC177sq/2NDH1KT1HzvncR0IXTDoUPWv3QcR/r6LM1HYqyUs9PzDRX/VulFmEkL3ZfG57Lj99 fbhXUXP4dTrIYH9CZuZfYE6qKwU9gerWJzOXLixctyTm fbvX0xDh9apAN3qVooVy8xmrRmWVlepTmVR9SAx317G5/biaQuZ7cg3JWK7j5oa2qQTd5I9I5DIq0Y1TDXpoGu/T6LlwU8ABNUWtGOCZAJh9m9UUNtPgWSNl5WifmuJmErxermtWsRn73UkifZuK2BaMqIMHOvtePopxmwPPjV78IEN7jNoc BPiv5xqFWmxwbN48XPxkzFic C5A4P9IH0xXnPgR1S6tdsfozUHnpUj9tcPxFjNgQc6W73PxEjNVa6pGLp58PwCaV0M3Sx4tl6w2ag3xmgOvF6uOxojNAee5Tp 7yXuvRgETxuAeyg/iNGZA89y3Z0NY2MtMTZz4Oky3iXQ/xojMweeOzF2xtDNVq5Hbej7Y1TmwB zNT1erjMIni0YWwT6xzEic D5nZf1Ar0jxmMOvPXTIwK9K0ZjDjyNrhUCPe69GAL/X5VeOfqRQP8sRmIuj/ LeG0M3az9X4ABAIua ZsJZf8ZAAAAAElFTkSuQmCC) 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,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;
           }
           .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 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MWM4MzNiMS0xNjY0LTQ3OTItYjU5MC02ZDgzN2Q2ZjcxYTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFOEVFNzBBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFOEVFNkZBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphMmMyYzBkZi03NjViLTRmYWMtOWUzNC0zMTVkNzJjMTdmY2EiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiMjcwM2Y3ZC1lNjhlLTExNzctYjEyYS1lNGIzOWVjMzUwNDYiLz4gPC9yZGY6RGVzY3JpcHRpb24 IDwvcmRmOlJERj4gPC94OnhtcG1ldGE IDw/eHBhY2tldCBlbmQ9InIiPz5aQSzNAAAKjElEQVR42uycf3BU1RXH727T0k5SIw0QIggCktLGSmugnRo6nTI4YG1AmEKBqRWEyh/qH of6L/ o3RGZ4qmVUdn/NPqjOPoOOro6ExJKDZEhZJAExIJYklCIr yNbSx6fm8fffxdl2SfT/27r7knZkz7L7dfWw 97zvPefc zYxNjamvFpLIqGKaL8W/4P4AhVNGxK/rixiX/p28b3iNSq6RtQmkhH6wuvFn4o49PPii8SHkxGL9DkRho7EfE/8XIPoezJC0OdGGHq/ I/FT sDyYhAvzbC0E JrxTvcR9Mljj0JyMO/YR4o3hH9gulCn6deFPE5eW4 Cbxj3O9WIrgyV6eFr8mwtCPid8h3nqlN5Qa A3ifxKfHWHoR8S3ix8Y703JyQa9or6 2NB3TAS9VMAnbOh/Fq8OCn3pwYNq9t13F PvOCx l/jf83lzsVsGZfZECvSZQU70zYULVbUNfNEzz1j/9j37rEnod15pIi21iP 6PZEGhj5j40ZV392trl61SrUtWqRGenos Bw3ID3Iy1Yv0IsJ/hvia21Nnxn0ZOfefVcNt7VZUT9n927ree9DD1nwGYwCZy/IZLvXDyaLCJ1InxHkRGj5/Mcey4DPsfPyGNkh8nm9QJrfLb5GvMvPh5NFkJdGuzgKHOnTJMLnSoQzoZZNn67ab7nFifTP9uxRQy /7Gh yPBpAzSI9/rOKAwuhHzNbgM0Bc1enJlZYKPtGNrOc3S9ShzZIeL/uWmTMzAMir4yAhhdxiXig35P0CDMTUV8wpaXp8KCrjMZnbnMsSOfq4BoBzqvIzU8BjaPeV8AG1bpfvpgYCCGIl5rekHaAEyg333pJQu41vxDy5ZZx4CPBHEVcDUQ d27dvlJNVP2978Q9Puaingd6aFBJ0Wc64pc5GNQ9By4o2fPWscYAKSFSK975x1rAJAjnzJzMSzopgooDT1Qa5coBTaA ZdIRrv1a8AGMnpPNHOMCRWJ0RMs7 d9XAkeTS/XXQgTTLLA0EPppwMaRyo0dJ06ouuYhkrk66jn9XIZKKRGH/Non4v/wJ5QVRTAr7OhzwvjZGg3UZwNHTnRkY8R4Xqi5THRz2Bp3fdoLNf9VPzTQvVKChHpe8OCrqMZBz4TKXIDTCIZQ8MZHKRIT6w6ncTKvbcNyNNvE 8sWJoXclazztb00FaO3JpOJM wJ1CgE/lagniuwQe0Eyq9aaqtUNDDzmrW2b2XUJfrgK3lJWVnJIDXjTAiW f0IRjLdb8pJPSwNf72QuXpbk1nEMhegMykWmFPnEQ6MhT0vxL/ncqzn14KGq hF2y5TlegWl6oThkItJzoPx9cYtgF8Hvxv5lqWmVofCLPilR/RrQe6E/7aQNMv cedbapyVMur1NCHuPIDZMtV4Ju/3KFDNq5e552xIZ wBR0NN5XxAvwpJ29 IJe8/jjauEDD6iBxkbVtWZN3plNdpbDVYDcEPG6N6MzmTztHyq9RtqqDJvniG9Oy1Oj8rlGqqFrG3j77bzhh2wsXvxWeVw5KkpW05zupweOdLfNWr1aLZCU0LAdFd9cDOies5rm9MrRr xInxUEes8TT1iRru0a ucrV6b1u7a20H9zl536HlFFtDIP0BvtPD0w9NMPPmg9ruzvV9NmpU83euqUBf2GN99Uqa6uQskPxRHlbq8qsiXzlBcivSlM6BzX0DmOAb1cJkjkZ/Fbb4X9t562ey9Fhz4h Ob067cpn8t140F3Hz8jFaiG7tb EOGTEtFl7FMlYhNFvIY Owj0k88/nxf0lKSCHffeq0ZTqTDhfyHOiA6pErLkONGuNd1zGwCtnrdr1 XJc/Nm9W3xXFeAO9KH3n/fKqo6du7MgM9nA0Dn 59TJWbJcaB73p uM5LRzs4MeGXl5er7zz33lUgHaP rrzqfn7djhzU4F198UZ20t EFsJT9/UsOek7wzemJ1PNyHdB/uG fE53Ay4afLS8MxnBrqzO5YgzOtXJcXzH/kvKfc3k0luuuV kVpJK0jMq1JZEg0lnEuM7riZa0tKiqm29WQ/v3q2MNDc5xBgLAgM81kTIwDFDF8uVfKa58VrVo XLxT0oVOpVrwtXw0itH872eiAkQLQbiobVr1ch772W8DnzAuqHzXn0V5ILvE/qA C9UjnuOSg180gX9yaDQgQd0QC T4sgtO9nZS9tNNznVq54Dzr7xhlPV oDOct3qUofuaLxAX29PpPP8QseADmAtLRRHMzZsuCxFotVaXqhMmYCB64Y/c tWK9PxAZ2KdEMxey9 Jtc/Kh/LdfRWvrNihfN89rZtGXpuwbzqKuf13kcfzZmf973wgvOekV5fRSXLdexPb1URsoRkMZ5XuwFMNA 8koG6Jyi65KN7IFhIq5cutR67lNe2J E7WMEnTPbWFybBx4dBSZDN0pI3ZpYEAd3rIlZ3Rnp5hkQQGg09rdETXobqkZyxc6GQcOLCbIqlWrLJg9e/Y4MNF2ZCe7 rwSfJ/QO2zo 1VEDan5n0pvox63OKr/8MOcEsEATKuutipNih79HoCi325pyZYd5OoT106wPI2Vo7zvrou01HxLUj 3ZlMgpewbAnSmQgWaHeUTRb4P6ET6HVGGnm930spedNQS3aMXLlhXwOjwcEbxg81/ GHVuXv3hPBpCfgw9r0wUh pSWB5SQ1RWr54sSUp2RkMQN0yQwuYDUZuibFavUND1rFLUlgdufVWK4/3YN12cdQ9GaBbLYN8wGudX7B3r1MwXSl1HG5vVxV1dWrw9ddVLbt8Bb7u36DrX8hc4RE6u3V/pkpk5Sgs8HnvqwEWMuOWlzn33WelhNrOtbSo2kcesR5TXH1p92PKKiocXfdoZ8R/oly/bDRZzFMeT8FEnq41nczGbQtF35Ga84cPW8BJLRmkS6d9cWMSqZuM0PPW FwT7tLXXnOKn2k1NaryxhszrgYd3chLWVWVp 161GEqvXL0 WSE7knjc024VliKplNUkfHo1JKr4mC177sq/2NDH1KT1HzvncR0IXTDoUPWv3QcR/r6LM1HYqyUs9PzDRX/VulFmEkL3ZfG57Lj99 fbhXUXP4dTrIYH9CZuZfYE6qKwU9gerWJzOXLixctyTm fbvX0xDh9apAN3qVooVy8xmrRmWVlepTmVR9SAx317G5/biaQuZ7cg3JWK7j5oa2qQTd5I9I5DIq0Y1TDXpoGu/T6LlwU8ABNUWtGOCZAJh9m9UUNtPgWSNl5WifmuJmErxermtWsRn73UkifZuK2BaMqIMHOvtePopxmwPPjV78IEN7jNoc BPiv5xqFWmxwbN48XPxkzFic C5A4P9IH0xXnPgR1S6tdsfozUHnpUj9tcPxFjNgQc6W73PxEjNVa6pGLp58PwCaV0M3Sx4tl6w2ag3xmgOvF6uOxojNAee5Tp 7yXuvRgETxuAeyg/iNGZA89y3Z0NY2MtMTZz4Oky3iXQ/xojMweeOzF2xtDNVq5Hbej7Y1TmwB zNT1erjMIni0YWwT6xzEic D5nZf1Ar0jxmMOvPXTIwK9K0ZjDjyNrhUCPe69GAL/X5VeOfqRQP8sRmIuj/ LeG0M3az9X4ABAIua ZsJZf8ZAAAAAElFTkSuQmCC) 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 /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 /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定义合并合并操作省略模仿很酷吧

$\"\"$ $\"\"$ $\"\"$ 点赞 $\"\"$ $\"\"$ 评论

本文链接： http://fontaro.immuno-online.com/view-711130.html

发布于： 2021-03-24 阅读（0）

没有了