天猫品牌街Web前端开发第三阶段设计 模仿前端开发的通杀神技
来源:互联网 发布:阿里云手机刷机 编辑:程序博客网 时间:2024/04/30 04:59
接下来我们要模仿天猫卡片视图设计,直接从天猫的网站快速地获得卡片视图标签的CSS样式代码,有了样式代码,一模一样的效果就可以快速设计出来,先看看我们要实现出来的最终效果截图:
第1步:登录天猫连衣裙搜索页面:
https://list.tmall.com/search_product.htm?q=%C1%AC%D2%C2%C8%B9&type=p&spm=a220m.1000858.a2227oh.d100&from=.list.pc_1_searchbutton
第2步:在搜索框里找第一张卡片的商品素材,输入关键词“满300用券减30VeroModa圆领五分袖收腰A摆蕾丝连衣裙”
第3步:在搜索框里找第二张卡片的商品素材,输入关键词“圆领秋冬宽松套头加厚韩版针织连衣裙”
第4步:在搜索框里找第三张卡片的商品素材,输入关键词“时髦爱豆们新年穿衣术”
第5步:单独快速的摘录出3件商品的静态标签代码,第1件商品
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫,就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div,p{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了!</div>
</div>
</div>
<div class="banner"></div>
<!-- 类名称为view的div标签(也就是我们查看元素时候看到的第1个黑色的小三角形标签)就是所有卡视图商品的容器-->
<div class="view">
<!-- start 第1件商品 -->
<div class="product" data-id="543881587553" data-atp="a!,,50010850,,,,,,,,">
<div class="product-iWrap">
<div class="productImg-wrap">
<a href="http://detail.tmall.com/item.htm?id=543881587553&skuId=3274437069773&user_id=420567757&cat_id=55836006&is_b=1&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>¥</b>
649.00
</em>
</p>
<p class="productTitle">
<a href="http://detail.tmall.com/item.htm?id=543881587553&skuId=3274437069773&user_id=420567757&cat_id=55836006&is_b=1&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&rn=45d729ec5964eb1049d5e99ae19782d5&keyword=连衣裙" target="_blank">
veromoda官方旗舰店
</a>
</div>
<p class="productStatus">
<span>月成交 <em>257笔</em></span>
<span>评价
<a href="//detail.tmall.com/item.htm?id=543881587553&skuId=3274437069773&is_b=1&cat_id=2&q=vero+moda+%C0%D9%CB%BF+%C1%AC%D2%C2%C8%B9&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&groupid=0&s=1&charset=utf-8&uid=veromoda官方旗舰店&site=cntaobao&groupid=0&s=1&fromid=cntaobaoAhAQzhIGc5nQx7c8wThUerHDoFBi2fQj" target="_blank" atpanel="1-2,,,,,,,420567757">
<span>
旺旺在线
</span>
</a>
</span>
</p>
</div>
</div>
<!-- end 第1件商品 -->
</div>
</body>
</html>
第6步:单独快速的摘录出3件商品的静态标签代码,第2件商品(参照上面第5步中描述的详细操作过程)
<!-- start 第2件商品 -->
<div class="product " data-atp="a!,,162103,,,,,,,," data-id="542747012849">
<div class="product-iWrap">
<div class="productImg-wrap">
<a class="productImg" href="http://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.271.C6Ok7e&id=542747012849&skuId=3263636993070&user_id=2934171215&cat_id=50025135&is_b=1&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&skuId=3263636993070&user_id=2934171215&cat_id=50025135&is_b=1&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&rn=0c421b1111d61dd7ddee9a68229910da&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&skuId=3263636993070&user_id=2934171215&cat_id=50025135&is_b=1&rn=0c421b1111d61dd7ddee9a68229910da&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&groupid=0&s=1&charset=utf-8&uid=蜜荻旗舰店&site=cntaobao&groupid=0&s=1&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&gccpm=8302602.102.2.subject-1002.60665&wh_tailer=2&tailer=2&wh_header=1&header=1&id=6602689&rn=5ddd60ba9714bec0b49c04c8c29314e0&cat=50025135&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&gccpm=8302602.102.2.subject-1002.60665&wh_tailer=2&tailer=2&wh_header=1&header=1&id=6602689&rn=5ddd60ba9714bec0b49c04c8c29314e0&cat=50025135&from=act_1_act-2-new#J_Crumb" target="_blank" atpanel="28,8302602,,,spu,2,act-2-new,,act-2-new,," data-spm-anchor-id="a220m.1000858.1000725.137">
<span title="墨概念" class="palr-brand">墨概念</span>
<span title="时髦爱豆们新年穿衣术" class="palr-title">时髦爱豆们新年穿衣术</span>
</a>
<i class="pa-icon-new"></i>
</div>
</div>
</div>
<!-- end 第1张新品专辑 -->
第8步:重点来了, 快速地摘出卡视图的样式定义,一个标签一个标签地从上到下顺序地复制出我们需要的CSS样式定义代码,观察3件商品卡视图,明显第2件商品静态页面更复杂 ------ 有小图标商品图片翻页,第3件商品是一个系列的宣传图片,与其它商品图片不属于同一个风格,除了尺寸一样之外:
用同样的方法复制出第2条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:
.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {
display: block;
}
用同样的方法复制出第3条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:
.productAlbum .pal-items::after, .view::after {
clear: both;
content: " ";
}
用同样的方法复制出第4条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:
/*@media all and (min-width:1210px)*/
.view {
width: 1210px;
padding-left: 5px;
padding-right: 5px;
}
用同样的方法复制出第5条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:
.view {
width: 1023px;}
用同样的方法复制出第6条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:
.view, .w1 .view, .w2 .view {padding-left: 5px;
padding-right: 5px;
}
用同样的方法复制出第7条css样式定义,可以粘贴到上面网页样式定义里,在浏览器里刷新一下看看显示效果:
.view {margin-top: 10px;
}
最后的2条css样式我们不需要它们!,注意请不要合并同名称样式的定义,因为回头再从头整体看一遍整个代码,我们可以慢慢体会出作者的设计步骤!
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}</style>
第9步:按照从上而下,记得哦,只要是个html标签 你必须点击它去获得它的css样式定义,这样别人写的代码就都被你挖出来了,一个也不会少,显示出来的效果当然就跟官网上的效果一模一样了,这一步才是卡视图真正的第一个div (product)标签,上面的那个div ( view)标签是所有卡视图的容器(盒子)
一共需要操作5次,共复制规则5个,这5个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:
/*@media all and (min-width:1210px)*/
.view .product {
width: 220px;
margin-right: 20px;
}
.view .product {
width: 220px;
margin-right: 33px;
}
.product {
height: 372px;
}
.product {
height: 372px;
}
.product {
position: relative;
float: left;
padding: 0;
margin: 0 0 20px;
line-height: 1.5;
overflow: visible;
z-index: 1;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}</style>
第10步:按照上面第9步同样的方法单击(点击)类样式为product-iWrap的div标签获得它的css样式定义代码:
一共需要操作2次,共复制规则2个,这2个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:
.product-iWrap {
min-height: 98%;
width: 210px;
}
.product-iWrap {
position: absolute;
background-color: #fff;
margin: 0;
padding: 4px 4px 0;
font-size: 0px;
border: 1px solid #f5f5f5;
border-radius: 3px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}</style>第11步:按照上面第9步同样的方法单击(点击)类样式为productImg-wrap的div标签获得它的css样式定义代码:
一共需要操作3次,共复制规则3个,这3个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:
.productImg-wrap {
position: relative;
}
.productImg-wrap {
display: table;
table-layout: fixed;
height: 210px;
width: 100%;
padding: 0;
margin: 0 0 5px;
}
.product-iWrap * {
font-size: 12px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}</style>
第12步:按照上面第9步同样的方法单击(点击)类样式为productImg的a标签获得它的css样式定义代码:
一共需要操作6次,共复制规则6个,这6个的css样式代码如下,你当然可以一次只粘贴1个css样式到网页里,随时都可以在浏览器里刷新看看当前网页显示出来的效果:
.productImg-wrap a, .productImg-wrap img {
max-width: 100%;
max-height: 210px;
}
.productImg {
_height: 100% !important;
}
.productImg {
display: table-cell;
width: 100%;
text-align: center;
}
.product-iWrap * {
font-size: 12px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
vertical-align: middle;
}
a {
outline: 0;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}</style>
第13步:复制规则 ------ 第12步中a标签内嵌套的img标签css样式定义代码(特别再次强调一个标签都不要遗漏,要把当前商品的卡片视图内部的全部HTML标签都要点击一下,你就会看到没有类样式的标签也定义了样式,为什么?因为作者就是这么干的,切记!)
.productImg img {
display: block;
margin: 0 auto;
}
.productImg-wrap a, .productImg-wrap img {
max-width: 100%;
max-height: 210px;
}
.main img {
-ms-interpolation-mode: bicubic;
}
.product-iWrap * {
font-size: 12px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}</style>
第14步:复制规则 ------ 类名称为productThumb clearfix 的div标签css样式定义的代码
.clearfix::after, .headerCon::after {
clear: both;
}
.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {
display: table;
content: "";
overflow: hidden;
}
.productThumb {
margin-bottom: 5px;
}
.product-iWrap * {
font-size: 12px;
}
.clearfix, .headerCon {
zoom: 1;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}</style>
第15步:复制规则 ------ 第14步中div标签内嵌套的a标签css样式ui-slide-arrow-s j_ProThumbPrev proThumb-prev proThumb-disable定义的代码
.proThumb-next, .proThumb-prev {
float: left;
margin: 14px 2px 0 -3px;
visibility: hidden;
cursor: pointer;
}
.product-iWrap * {
font-size: 12px;
}
.ui-slide-arrow-s {
display: inline-block;
position: relative;
height: 14px;
width: 14px;
background-color: #b8b2b1;
background-color: transparent\9;
background-color: #b8b2b1\9\0;
background-position: -37px -142px;
color: #fff;
text-align: center;
font: 700 11px/15px 宋体, Hei;
border-radius: 8px;
-ms-border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-o-border-radius: 9px;
-khtml-border-radius: 9px;
}
.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {
background: url(data:image/png;base64,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) no-repeat\9;
}
a {
outline: 0;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}</style>
第16步:复制规则 ------ 类标签名称为proThumb-wrap的div标签css样式定义的代码
.proThumb-wrap {
display: inline;
float: left;
height: 34px;
padding-top: 5px;
overflow: hidden;
position: relative;
width: 185px;
}
.product-iWrap * {
font-size: 12px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}</style>第17步:<p class="ks-switchable-content" style="left: 0px; width: 999999px; position: absolute;"> 此行p标签跳过,不用管,除了字体没有任何有作用的css样式定义了
第18步:复制规则 ------ 类名称为proThumb-img ks-switchable-panel-internal1132的b标签css定义的代码
.proThumb-img {
display: table-cell;
float: left;
height: 30px;
width: 30px;
margin-right: 3px;
padding: 1px;
font-size: 0px;
text-align: center;
border: 1px solid #CCC;
cursor: pointer;
}
.product-iWrap * {
font-size: 12px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
vertical-align: middle;
}
b, strong {
font-weight: 400;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}</style>
第19步:复制规则 ------ 第18步中的b标签内嵌img标签的css样式定义代码
.proThumb-img img {
max-height: 30px;
max-width: 30px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
vertical-align: middle;
}
.proThumb-img * {
font-size: 12px;
}
.product-iWrap * {
font-size: 12px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}</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,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) no-repeat\9;
}
a {
outline: 0;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}</style>
第22步:产品的价格p标签,内嵌标签em还有内嵌标签b的css样式定义一次性按顺序给出:
<p class="productPrice">
<em title="138.00"><b>¥</b>138.00</em>
</p>
p标签样式定义:
.productPrice {
font-family: arial,verdana,sans-serif !important;
color: #c00;
font-size: 14px;
height: 30px;
line-height: 30px;
margin: 0 0 5px;
letter-spacing: normal;
overflow: inherit !important;
white-space: nowrap;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
display: block;
overflow: hidden;
margin-bottom: 3px;
}
.product-iWrap * {
font-size: 12px;
}
em标签样式定义:
.productPrice em {
float: left;
font-family: arial;
font-weight: 400;
font-size: 20px;
color: #bc00000;
}
.productPrice * {
height: 30px;
}
.product-iWrap * {
font-size: 12px;
}
b标签样式定义:
.productPrice em b {
margin-right: 2px;
font-weight: 700;
font-size: 14px;
}
.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {
vertical-align: middle;
}
.productPrice * {
height: 30px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAADaCAYAAAD+FPHQAAAKIklEQVR4Xu2df2iV1x2HzXslLHAh4MhIG7ijkhERJo6AMhEqGekc6RQlo2WFUmjMqCg6RyQhoiQYvCxEFP8ISxcKKysrlYlZJVnDRmUBMSgKYVJRCARuG7gQCAQsoaF7GF94y7ubnffXOSf3vecDzx9tzv1+/PSccOs55/u+dTNTt7dpUh7a4MdQD0EtwXMhtn7+yyOxPrcd0lIjdEEndEABwmgD7gozMA9RZC14J/TCEZnZqMpBhzAkK+BDGIfyVgx+DAahHdJUKwxBP0zCCCxDqvIgqnbDP+CvElqXGuAUPINzkLMZvB8eQQeYUh7G4AG0mg6+A6bhCtSDDe2FR9BtKngB/gWHwbby8Amc0x28VULvhq2kMbisK3gTTEMBtqIGoS/t4PXwqcz4Vtbv//63qe40g9+AfVAN+oDwbWkE74ZeqBbl4c+Er08SPA/XoNrUDueSBL8ILVCNGmTWW+IEb4YzUK3KQ1+c4H1QD9WsXma9OUrwBuiFalcDvBcleDfkIQt6J0rwNyArKrDcD4YJ3gAdkCV1hQm+T8JnSa+GCX4Qsqa9LPecKngbZE0NUFAFb4Usqk0V/BXIolpUwRshi8qrv86yqQZF8NqUByuQRa1CJbngS5BFLaqCP4Es6okq+OMszjYXBpRLfRaypruA1L/ji5AlzYbdiLgJWdELmAkb/EPIimb4/V4JG3wB5iELmoy6vVyEatdjZvtO1OC3ZOarWSNxj5BOQrVqjtm+GTf4HHwE1aZ1OJn0mPgslKCaNMxsLyQNXoY3YaOKvr5G0roRMQenq+QvIm+nfflnHEZgq6oErzHb5VSDCxdgGLaaFuAAlHRe8LsEJ7fQ7/yUhF4ycaVzHH4GJbCpIhyFNZOXeO/CT2DS0jbScRiwdXu5DD2wB2ZAt1bgLOyCW1bvqwsL8As4BPcgba3BCOyE67Bu/qK+evkfgJ0wIP8cV8swAa/D9+ECrNptzVCzCEWhCTrhILTCjgqdSEtQhgX57KysHGOqu70t2zry7beKGbfcd2YG13fGUjfbd6Ym2Hdmf6m7vjPXd6YJ13fm+s5c35nrO3N9Z1C7fWdQu31nUHN9Z67vDGqu78z1nUGt9J25vjPXdwa10nfm+s5c3xm4vjPXd+b6zlzfmes7yyiu/coFd31nGcH1nUFG+85c35nrO3N9Z1AzfWeu7wxqpu/M9Z1BzfSdub4zqL2+M6iZvjPXdwbZ7TtzfWeu78z1nbm+M9d35vrOXN+ZsfarMnwkKPW9l15KZPb1V1/FChD1fWd7oQ0aA/vXz+ncj9Uw89nLLyf2fu3LL5d1BO+Ad+AwNMFmugdTMCHPWooRPLk3/xFWkgbfC1fENIrWYBRGWQUvQgTX4s0qeBHn6+wU3I9qLORhCD5XPdZfpzcrqTlq8BtCPSTRPnhEeEVvmj5vwreHDT4ks52WmuG24jUeWr0J36IK3g0XIW21SPgKs2jGm/D1mwXfAX/Q3EEwCAHZ8vaD90t4nTrHrAe+ksx5M+tNgeByx1u/8kEflqA1bw+OGbyr/gb4sujtGe4M3s1yL/gGZr1ZYXj7wduNdwWLbHp7FnpHXwGRPW8PGm1dtbTp7cE6WJFNbw/KYFLLIDLvbfGCn+9n09uDOcM3khZAZM/bg1tgSncCmxNGvWVzwl/qBmd9AhAAfxBr3p4YDIBuzTLbswEDY97M9myl4HOal90GnIeAbHlLcKFH4yPGfsdsPw6am/JmtvHePPgKHNVwbDNO6OuKMdq8CY23es/tCexPceaLhFZcw9LnTeiTUXZZn0r4WwmPkY4TWnGerc+b0ANx9tVX4DgciHiYtwbDsJPQyj+8Lm9C30p6aHhPwhegG7qgEXZDgyzLVXgIU/KVFfMsO7k3gdfTPi1dgqsC8iFo+jf2Xu9SeFfm67q6xMfEDdAJzYF2h8UYp6EVazE7i/J/b/8bvPeE8fPxHTAIvZCHoB7CBZgJEThYK/jz/9YiuLIWFKAfuqAAS9+5yrkUZ7xX4Ql55yqFFtphGq5B7v+EDl2Lsdcgp3gK6L/hPSh8J1iv/PvO6OP94K3wmT9QyRkY2yR0arWkxieQVzzRrxB1vCcGH0ATiEKH7wJfCWox65Vq9YXYl2uEvqjj5UAh9gMyLgZmO7VaAvVC6VjU8V7Cp17u44CgzTdIVotZ92tBhJXTFHV8Go9D+SmI0qkVYzOyHHW8J9+vCeTPSpq1hCkIo6mo4z0MVtPaG0+zljAKa2Eu/EQdn0bj/HMQpVrLv7W8eZg1+fli1PGeLI8kW7ZzIEqxls8s7IEJWA7ce90Ds3HGb4dJ6It5Tj0ReDFqolpsHFCrohbhN4JK6vESvARFuBzjOGY4sF1c4ispca2rE+9viyU+F7VDoRiplVr2yILtyklqyVVMQ/KDb8DbcB5U1zDnYf9mbdcE2IBItRgvtUwH9xmFnXAJ5mBNDJ7CTTgadkOQMMpajNkP1DKvut+e6NFqcPjTO8bCyKaGAvesJ+WVyFMwDQ/gG+EBTMvPGKOWBh8trRnNMATvQq7i7omsZLgGk3BJ8VoPmz7qGReTZ9AroVXKydhnijvmGn2SBz8D05CPeW1yWmoopMEnQfAjMAZJNSa1AtLjkzR4C/wJcpBUOalFTV86fZIEv5jyZbtGqelLo0/c4AV4F9IWNakt0u0TJ/ivIQdpKye1RXp94gTvBF3qAJEpHx+bz17eDSK9PnGCN4Em+bUN+bi/pFi+vezX1u0TJ/hTE7eFzfn42HxK5z9BpNcnTvCPYUPPVUpqi3T7xAm+qOnZLpNSW6TXJ+4OzDCsQVqSO2e+dPvEDV6CtyAtvSU1fWn0iR1cmIKzkFTUoFZAOn0SBReuJ3iI1Jp8lhoKGfNRBw/OyC6YhA1QaUPG7lLMgE6f5MGFEvTAD+E0zMDDwEW/GTgtY3pUv2t2fNQnKUY59P4ft9mUO0kJyatwBe5XOO24Lz9jTHjZ9N4e8lV5/dAEaNPTjn0yrgxFGFcdE9v09hT731/AmBiHVZN85gvVvrd5b3XwK3A7YWN7QWpQSyEj3urgf4F+SEv9UlMhnd7q4Jc1vdiRmtQOyJZ3MPgxGARdGhQPX9a8/eD1cAO0KvjkLnvefvAzhl7GjAdeIpveHuSgD0yp7/MTPTLr5r2hXoLL8xCNSR5fiix6S3DTEk9b3pYeeQTiacvb3ntLxdOWt73Xd4qnLe+aPzRctfWiRZveHjwHsxJPW9723mkonja9PbgDZiWe9rz9Y+IymFJZPJE9bw/W4SqY0lW2l/FEFrzFk+BIzEugW6XA0Y8lbz/4uqGXPuHh737a9A6+2m8EdKkoHr4sensVXvr0MaQqqTkAAdnz9iCoN6GY7kxTUyHT3h5U0gD8KmF3cElMFTNtzFsdXLgJu+B8xO/asnzmR6qla9PbC9HaPAo/gENQhPkKZ9jz8rNDMnY0zLmZTe/tEFZ3BQ0y7/0fVpShI0Vk2hAAAAAASUVORK5CYII=) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}</style>
第23步:产品标题p标签和a标签
<p class="productTitle">
<a title="圆领毛衣女秋冬宽松中长款套头加厚韩版针织打底衫长袖连衣裙2016" href="//detail.tmall.com/item.htm?spm=a220m.1000858.1000725.4.uXOSyT&id=542747012849&skuId=3263636993064&user_id=2934171215&cat_id=2&is_b=1&rn=5c880f81043766f52f76d138e93c7e0f" target="_blank" atpanel="1-11,542747012849,162103,,spu,1,spu,2934171215,,," data-p="1-11" data-spm-anchor-id="a220m.1000858.1000725.4">
圆领秋冬宽松套头加厚韩版针织连衣裙
</a>
</p>
p标签css定义:
.productTitle {
display: block;
color: #666;
height: 14px;
line-height: 12px;
margin-bottom: 3px;
word-break: break-all;
font-size: 0px;
position: relative;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
display: block;
overflow: hidden;
margin-bottom: 3px;
}
.product-iWrap * {
font-size: 12px;
}
a标签css定义:
.productTitle a {
color: #333;
}
.productTitle * {
font-size: 12px;
font-family: 微软雅黑;
line-height: 14px;
}
.product-iWrap * {
font-size: 12px;
}
a {
outline: 0;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}</style>
第24步:店铺div标签和商品名称a标签
<div class="productShop" data-atp="b!1-3,{user_id},,,,,,">
<a class="productShop-name" href="//store.taobao.com/search.htm?spm=a220m.1000858.1000725.5.uXOSyT&user_number_id=2934171215&rn=5c880f81043766f52f76d138e93c7e0f&keyword=圆领秋冬宽松套头加厚韩版针织连衣裙" target="_blank" atpanel="1-3,,,,spu,2,spu," data-spm-anchor-id="a220m.1000858.1000725.5">
蜜荻旗舰店
</a>
</div>
div标签的定义:
.productShop {
position: relative;
height: 22px;
line-height: 20px;
margin-bottom: 5px;
color: #999;
white-space: nowrap;
overflow: visible;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
display: block;
overflow: hidden;
margin-bottom: 3px;
}
.product-iWrap * {
font-size: 12px;
}
a标签的定义:
.productShop .productShop-name {
float: left;
line-height: 20px;
height: 20px;
max-width: 144px;
color: #999;
text-decoration: underline;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-iWrap * {
font-size: 12px;
}
a {
outline: 0;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productShop {position: relative;height: 22px;line-height: 20px;margin-bottom: 5px;color: #999;white-space: nowrap;overflow: visible;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productShop .productShop-name {float: left;line-height: 20px;height: 20px;max-width: 144px;color: #999;text-decoration: underline;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.product-iWrap * {font-size: 12px;}a {outline: 0;}</style>
第25步:
<p class="productStatus">
<span>月成交 <em>261笔</em></span>
<span>评价 <a href="//detail.tmall.com/item.htm?spm=a220m.1000858.1000725.6.uXOSyT&id=542747012849&skuId=3263636993064&user_id=2934171215&cat_id=2&is_b=1&rn=5c880f81043766f52f76d138e93c7e0f&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&v=3&groupid=0&s=1&charset=utf-8&uid=蜜荻旗舰店&site=cntaobao&groupid=0&s=1&fromid=cntaobaoAoaGbAbI5Z7uk2Fe2/Z6POC/lnII58qh" target="_blank" data-spm-anchor-id="a220m.1000858.1000725.7"><span>旺旺在线</span></a></span>
</p>
一个不漏地按从上到下每个标签都必须点击一下,即使是同名称标签也要点击一下,目的是获得点击标签的css定义:
.productStatus {
position: relative;
height: 32px;
border: none;
border-top: 1px solid #eee;
margin-bottom: 0px;
color: #999;
}
.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {
display: block;
overflow: hidden;
margin-bottom: 3px;
}
.product-iWrap * {
font-size: 12px;
}
.product .productStatus span {
white-space: nowrap;
}
.productStatus span {
float: left;
display: inline-block;
border-right: 1px solid #eee;
width: 39%;
padding: 10px 1px;
margin-right: 6px;
line-height: 12px;
text-align: left;
white-space: nowrap;
}
.product-iWrap * {
font-size: 12px;
}
.productStatus em {
color: #b57c5b;
}
.product .productStatus span {
white-space: nowrap;
}
.productStatus a {
color: #38b;
}
.productStatus a, .productStatus em {
margin-top: -8px;
font-family: arial;
font-size: 12px;
font-weight: 700;
}
.product-iWrap * {
font-size: 12px;
}
.product .productStatus span {
white-space: nowrap;
}
.productStatus .ww-light {
border-right: none;
width: 9%;
text-align: center;
}
.productStatus span {
float: left;
display: inline-block;
border-right: 1px solid #eee;
width: 39%;
padding: 10px 1px;
margin-right: 6px;
line-height: 12px;
text-align: left;
white-space: nowrap;
}
.ww-light {
overflow: hidden;
}
.product-iWrap * {
font-size: 12px;
}
.productStatus .ww-light a {
background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;
background-size: 16px !important;
position: relative;
width: 16px;
height: 16px;
margin-top: -3px;
}
.ww-small .ww-online {
background-position: -80px 0;
}
.ww-light a {
background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");
background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
text-decoration: none !important;
width: 20px;
height: 20px;
zoom: 1;
}
.productStatus a {
color: #38b;
}
.productStatus a, .productStatus em {
margin-top: -8px;
font-family: arial;
font-size: 12px;
font-weight: 700;
}
.ww-inline {
display: inline-block;
vertical-align: text-bottom;
}
.product-iWrap * {
font-size: 12px;
}
a {
outline: 0;
}
.productStatus .ww-light a span {
padding: 0;
display: none;
white-space: nowrap;
color: #999;
top: 18px;
left: -2px;
height: 14px;
position: absolute;
width: 2em !important;
overflow: hidden;
margin-left: -2px;
border-right: none;
font-weight: 400;
font-size: 12px;
}
.product .productStatus span {
white-space: nowrap;
}
.ww-light a span {
display: none;
}
.productStatus span {
float: left;
display: inline-block;
border-right: 1px solid #eee;
width: 39%;
padding: 10px 1px;
margin-right: 6px;
line-height: 12px;
text-align: left;
white-space: nowrap;
}
.product-iWrap * {
font-size: 12px;
}
<style type="text/css">body,div,p{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.top{width:100%;height:85px;background:#ffffff;}.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}.top .t-header .t-logo{float:left;margin-top:28px;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}.view::after {height: 0px;}.product-hover .productAttrs, .product-hover .productDsr, .product-hover .productExtra, .product-hover .productIcons, .product:hover .productAttrs, .product:hover .productDsr, .product:hover .productExtra, .product:hover .productIcons, .view::after {display: block;}.productAlbum .pal-items::after, .view::after {clear: both;content: " ";}/*@media all and (min-width:1210px)*/.view {width: 1210px;padding-left: 5px;padding-right: 5px;}.view {width: 1023px;}.view, .w1 .view, .w2 .view {padding-left: 5px;padding-right: 5px;}.view {margin-top: 10px;}/*@media all and (min-width:1210px)*/.view .product {width: 220px;margin-right: 20px;}.view .product {width: 220px;margin-right: 33px;}.product {height: 372px;}.product {height: 372px;}.product {position: relative;float: left;padding: 0;margin: 0 0 20px;line-height: 1.5;overflow: visible;z-index: 1;}.product-iWrap {min-height: 98%;width: 210px;}.product-iWrap {position: absolute;background-color: #fff;margin: 0;padding: 4px 4px 0;font-size: 0px;border: 1px solid #f5f5f5;border-radius: 3px;}.productImg-wrap {position: relative;}.productImg-wrap {display: table;table-layout: fixed;height: 210px;width: 100%;padding: 0;margin: 0 0 5px;}.product-iWrap * {font-size: 12px;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.productImg {_height: 100% !important;}.productImg {display: table-cell;width: 100%;text-align: center;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}a {outline: 0;}.productImg img {display: block;margin: 0 auto;}.productImg-wrap a, .productImg-wrap img {max-width: 100%;max-height: 210px;}.main img {-ms-interpolation-mode: bicubic;}.product-iWrap * {font-size: 12px;}.clearfix::after, .headerCon::after {clear: both;}.clearfix::after, .clearfix::before, .headerCon::after, .headerCon::before {display: table;content: "";overflow: hidden;}.productThumb {margin-bottom: 5px;}.product-iWrap * {font-size: 12px;}.clearfix, .headerCon {zoom: 1;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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,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) no-repeat\9;}a {outline: 0;}.proThumb-wrap {display: inline;float: left;height: 34px;padding-top: 5px;overflow: hidden;position: relative;width: 185px;}.product-iWrap * {font-size: 12px;}.proThumb-img {display: table-cell;float: left;height: 30px;width: 30px;margin-right: 3px;padding: 1px;font-size: 0px;text-align: center;border: 1px solid #CCC;cursor: pointer;}.product-iWrap * {font-size: 12px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}b, strong {font-weight: 400;}.proThumb-img img {max-height: 30px;max-width: 30px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.proThumb-img * {font-size: 12px;}.product-iWrap * {font-size: 12px;}.proThumb-next {margin: 14px -3px 0 0;}.proThumb-next, .proThumb-prev {float: left;margin: 14px 2px 0 -3px;visibility: hidden;cursor: pointer;}.product-iWrap * {font-size: 12px;}.ui-slide-arrow-s {display: inline-block;position: relative;height: 14px;width: 14px;background-color: #b8b2b1;background-color: transparent\9;background-color: #b8b2b1\9\0;background-position: -37px -142px;color: #fff;text-align: center;font: 700 11px/15px 宋体, Hei;border-radius: 8px;-ms-border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;-o-border-radius: 9px;-khtml-border-radius: 9px;}.ui-slide-arrow-l, .ui-slide-arrow-m, .ui-slide-arrow-mini:hover, .ui-slide-arrow-s, .ui-slide-nav-c-l .active, .ui-slide-nav-c-l li, .ui-slide-nav-c-m .active, .ui-slide-nav-c-m li {background: url(data:image/png;base64,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) no-repeat\9;}a {outline: 0;}.productPrice {font-family: arial,verdana,sans-serif !important;color: #c00;font-size: 14px;height: 30px;line-height: 30px;margin: 0 0 5px;letter-spacing: normal;overflow: inherit !important;white-space: nowrap;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productPrice em {float: left;font-family: arial;font-weight: 400;font-size: 20px;color: #bc00000;}.productPrice * {height: 30px;}.product-iWrap * {font-size: 12px;}.productPrice em b {margin-right: 2px;font-weight: 700;font-size: 14px;}.proThumb-img, .proThumb-img img, .productCSPU span, .productIcons img, .productImg, .productPostDay, .productPrice em b, b.proIcon-fen {vertical-align: middle;}.productPrice * {height: 30px;}.productTitle {display: block;color: #666;height: 14px;line-height: 12px;margin-bottom: 3px;word-break: break-all;font-size: 0px;position: relative;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productTitle a {color: #333;}.productTitle * {font-size: 12px;font-family: 微软雅黑;line-height: 14px;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productShop {position: relative;height: 22px;line-height: 20px;margin-bottom: 5px;color: #999;white-space: nowrap;overflow: visible;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.productShop .productShop-name {float: left;line-height: 20px;height: 20px;max-width: 144px;color: #999;text-decoration: underline;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productStatus {position: relative;height: 32px;border: none;border-top: 1px solid #eee;margin-bottom: 0px;color: #999;}.productAttrs, .productIcons, .productPrice, .productShop, .productStatus, .productTitle {display: block;overflow: hidden;margin-bottom: 3px;}.product-iWrap * {font-size: 12px;}.product .productStatus span {white-space: nowrap;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.product-iWrap * {font-size: 12px;}.productStatus em {color: #b57c5b;}.product .productStatus span {white-space: nowrap;}.productStatus a {color: #38b;}.productStatus a, .productStatus em {margin-top: -8px;font-family: arial;font-size: 12px;font-weight: 700;}.product-iWrap * {font-size: 12px;}.product .productStatus span {white-space: nowrap;}.productStatus .ww-light {border-right: none;width: 9%;text-align: center;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.ww-light {overflow: hidden;}.product-iWrap * {font-size: 12px;}.productStatus .ww-light a {background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;background-size: 16px !important;position: relative;width: 16px;height: 16px;margin-top: -3px;}.ww-small .ww-online {background-position: -80px 0;}.ww-light a {background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);text-decoration: none !important;width: 20px;height: 20px;zoom: 1;}.productStatus a {color: #38b;}.productStatus a, .productStatus em {margin-top: -8px;font-family: arial;font-size: 12px;font-weight: 700;}.ww-inline {display: inline-block;vertical-align: text-bottom;}.product-iWrap * {font-size: 12px;}a {outline: 0;}.productStatus .ww-light a span {padding: 0;display: none;white-space: nowrap;color: #999;top: 18px;left: -2px;height: 14px;position: absolute;width: 2em !important;overflow: hidden;margin-left: -2px;border-right: none;font-weight: 400;font-size: 12px;}.product .productStatus span {white-space: nowrap;}.ww-light a span {display: none;}.productStatus span {float: left;display: inline-block;border-right: 1px solid #eee;width: 39%;padding: 10px 1px;margin-right: 6px;line-height: 12px;text-align: left;white-space: nowrap;}.product-iWrap * {font-size: 12px;}.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,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) no-repeat\9;
}
a {
outline: 0;
}
.proThumb-wrap {
display: inline;
float: left;
height: 34px;
padding-top: 5px;
overflow: hidden;
position: relative;
width: 185px;
}
.proThumb-img {
display: table-cell;
float: left;
height: 30px;
width: 30px;
margin-right: 3px;
padding: 1px;
font-size: 0px;
text-align: center;
border: 1px solid #CCC;
cursor: pointer;
}
b, strong {
font-weight: 400;
}
.proThumb-img img {
max-height: 30px;
max-width: 30px;
}
.proThumb-img * {
font-size: 12px;
}
.proThumb-next {
margin: 14px -3px 0 0;
}
.proThumb-next, .proThumb-prev {
float: left;
margin: 14px 2px 0 -3px;
visibility: hidden;
cursor: pointer;
}
.productPrice {
font-family: arial,verdana,sans-serif !important;
color: #c00;
font-size: 14px;
height: 30px;
line-height: 30px;
margin: 0 0 5px;
letter-spacing: normal;
overflow: inherit !important;
white-space: nowrap;
}
.productPrice, .productShop, .productStatus, .productTitle {
display: block;
overflow: hidden;
margin-bottom: 3px;
}
.productPrice em {
float: left;
font-family: arial;
font-weight: 400;
font-size: 20px;
color: #bc00000;
}
.productPrice * {
height: 30px;
}
.productPrice em b {
margin-right: 2px;
font-weight: 700;
font-size: 14px;
}
.productTitle {
display: block;
color: #666;
height: 14px;
line-height: 12px;
margin-bottom: 3px;
word-break: break-all;
font-size: 0px;
position: relative;
}
.productTitle a {
color: #333;
}
.productTitle * {
font-size: 12px;
font-family: 微软雅黑;
line-height: 14px;
}
a {
outline: 0;
}
.productShop {
position: relative;
height: 22px;
line-height: 20px;
margin-bottom: 5px;
color: #999;
white-space: nowrap;
overflow: visible;
}
.productShop .productShop-name {
float: left;
line-height: 20px;
height: 20px;
max-width: 144px;
color: #999;
text-decoration: underline;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.productStatus {
position: relative;
height: 32px;
border: none;
border-top: 1px solid #eee;
margin-bottom: 0px;
color: #999;
}
.product .productStatus span {
white-space: nowrap;
}
.productStatus span {
float: left;
display: inline-block;
border-right: 1px solid #eee;
width: 39%;
padding: 10px 1px;
margin-right: 6px;
line-height: 12px;
text-align: left;
white-space: nowrap;
}
.productStatus em {
color: #b57c5b;
}
.product .productStatus span {
white-space: nowrap;
}
.productStatus a {
color: #38b;
}
.productStatus a, .productStatus em {
margin-top: -8px;
font-family: arial;
font-size: 12px;
font-weight: 700;
}
.product-iWrap * {
font-size: 12px;
}
.product .productStatus span {
white-space: nowrap;
}
.productStatus .ww-light {
border-right: none;
width: 9%;
text-align: center;
}
.productStatus span {
float: left;
display: inline-block;
border-right: 1px solid #eee;
width: 39%;
padding: 10px 1px;
margin-right: 6px;
line-height: 12px;
text-align: left;
white-space: nowrap;
}
.ww-light {
overflow: hidden;
}
.product-iWrap * {
font-size: 12px;
}
.productStatus .ww-light a {
background: url(http://img.alicdn.com/tps/i1/T11lggFoXcXXc1v.nr-93-93.png) center center no-repeat !important;
background-size: 16px !important;
position: relative;
width: 16px;
height: 16px;
margin-top: -3px;
}
.ww-small .ww-online {
background-position: -80px 0;
}
.ww-light a {
background-image: url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif");
background-image: -webkit-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
background-image: -moz-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
background-image: -o-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
background-image: -ms-image-set(url("http://img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif") 1x,url("http://img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif") 4x);
text-decoration: none !important;
width: 20px;
height: 20px;
zoom: 1;
}
.productStatus a {
color: #38b;
}
.productStatus a, .productStatus em {
margin-top: -8px;
font-family: arial;
font-size: 12px;
font-weight: 700;
}
.ww-inline {
display: inline-block;
vertical-align: text-bottom;
}
.productStatus .ww-light a span {
padding: 0;
display: none;
white-space: nowrap;
color: #999;
top: 18px;
left: -2px;
height: 14px;
position: absolute;
width: 2em !important;
overflow: hidden;
margin-left: -2px;
border-right: none;
font-weight: 400;
font-size: 12px;
}
.product .productStatus span {
white-space: nowrap;
}
.ww-light a span {
display: none;
}
.productPrice .tag::before, .productPrice i::before {
display: block;
}
.productPrice .tag, .productPrice i {
position: relative;
top: 0px;
right: 0px;
float: right;
width: 30px;
height: 30px;
background-position: center 0;
margin-right: -6px;
}
.tag::before {
display: none;
content: "";
position: absolute;
width: 0px;
height: 0px;
right: 0px;
top: -5px;
border: 3px solid transparent;
border-left-color: #dadada;
border-bottom-color: #dadada;
border-bottom-width: 2px;
}
.tag {
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
position: absolute;
top: -4px;
left: 5px;
width: 40px;
height: 40px;
z-index: 1;
box-shadow: 1px -2px 5px -2px rgba(0,0,0,0.3);
}
.productPrice * {
height: 30px;
}
.tag img {
width: 30px;
height: 30px;
}
.productAlbum {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border: 4px solid transparent;
}
.album-new2 .pa-cover {
display: block;
width: 100%;
height: 100%;
-webkit-transform: translate3d(50%, 0, 0);
-moz-transform: translate3d(50%, 0, 0);
-ms-transform: translate3d(50%, 0px, 0px);
-o-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0px, 0px);
}
.productAlbum a {
text-decoration: none;
}
a {
outline: 0;
}
.album-new2 .pa-cover img {
height: 100%;
width: auto;
padding: 0;
-webkit-transform: translate3d(-50%, 0, 0);
-moz-transform: translate3d(-50%, 0, 0);
-ms-transform: translate3d(-50%, 0px, 0px);
-o-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0px, 0px);
}
.productAlbum .pa-cover img {
width: 100%;
padding-bottom: 200px;
border: none;
}
.album-new2 .pa-cover {
display: block;
width: 100%;
height: 100%;
-webkit-transform: translate3d(50%, 0, 0);
-moz-transform: translate3d(50%, 0, 0);
-ms-transform: translate3d(50%, 0px, 0px);
-o-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0px, 0px);
}
.album-new2 .pa-info {
display: block;
width: 170px;
height: 90px;
padding-top: 10px;
position: absolute;
left: 20px;
bottom: 50px;
text-align: center;
background-image: url(about:blank);
background-color: rgba(0,0,0,.4);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);
}
.productAlbum a {
text-decoration: none;
}
a {
text-decoration: none;
}
.album-new2 .pa-info .palr-brand {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px dashed #fff;
}
.album-new2 .pa-info span {
color: #fff;
height: 30px;
line-height: 20px;
margin: 10px 15px 0;
}
.productAlbum .palr-brand {
display: block;
line-height: 18px;
text-decoration: none;
letter-spacing: 0.5px;
font-size: 15px;
margin-bottom: 10px;
}
.album-new2 .pa-info .palr-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.album-new2 .pa-info span {
color: #fff;
height: 30px;
line-height: 20px;
margin: 10px 15px 0;
}
.productAlbum .palr-title {
display: inline-block;
text-decoration: none;
font-size: 14px;
line-height: 26px;
height: 26px;
min-width: 80%;
max-width: 10em;
margin-bottom: -3px;
overflow: hidden;
}
.album-new2 .pa-icon-new {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAABeCAYAAACq0qNuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MWM4MzNiMS0xNjY0LTQ3OTItYjU5MC02ZDgzN2Q2ZjcxYTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJFOEVFNzBBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJFOEVFNkZBMkUyMTFFNDk2NjQ4MTE2QzI3RUREMjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphMmMyYzBkZi03NjViLTRmYWMtOWUzNC0zMTVkNzJjMTdmY2EiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiMjcwM2Y3ZC1lNjhlLTExNzctYjEy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) no-repeat;
}
.album-new2 .pa-icon-new{
width: 94px;
height: 94px;
left: 0px;
top: 0px;
position: absolute;
}
.product:hover {
overflow: visible;
z-index: 3;
background: #fff
}
.product:hover .product-iWrap {
height: auto;
margin: -3px;
border: 4px solid #bc0000;
border-radius: 0;
-webkit-transition: border-color .2s ease-in;
-moz-transition: border-color .2s ease-in;
-ms-transition: border-color .2s ease-in;
-o-transition: border-color .2s ease-in;
transition: border-color .2s ease-in
}
.proThumb-img img.hover,.proThumb-img img:hover,.proThumb-selected img {
padding: 0
}
.proThumb-disable:hover {
cursor: default;
background-color: #B8B2B1;
background-color: transparent\9;
background-color: #B8B2B1\9\0;
background-position: -37px -142px;
}
.ui-slide-arrow-s:hover {
background-color: #B91919;
background-color: transparent\9;
background-color: #B91919\9\0;
background-position: -50px -142px;
-moz-transition: background .2s ease-in,color .2s ease-out;
-webkit-transition: background .2s ease-in,color .2s ease-out;
-o-transition: background .2s ease-in,color .2s ease-out;
transition: background .2s ease-in,color .2s ease-out
}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了!</div>
</div>
</div>
<div class="banner"></div>
<!-- 类名称为view的div标签(也就是我们查看元素时候看到的第1个黑色的小三角形标签)就是所有卡视图商品的容器-->
<div class="view">
<!-- start 第1件商品 -->
<div class="product" data-id="543881587553" data-atp="a!,,50010850,,,,,,,,">
<div class="product-iWrap">
<div class="productImg-wrap">
<a href="http://detail.tmall.com/item.htm?id=543881587553&skuId=3274437069773&user_id=420567757&cat_id=55836006&is_b=1&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>¥</b>
649.00
</em>
</p>
<p class="productTitle">
<a href="http://detail.tmall.com/item.htm?id=543881587553&skuId=3274437069773&user_id=420567757&cat_id=55836006&is_b=1&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&rn=45d729ec5964eb1049d5e99ae19782d5&keyword=连衣裙" target="_blank">
veromoda官方旗舰店
</a>
</div>
<p class="productStatus">
<span>月成交 <em>257笔</em></span>
<span>评价
<a href="//detail.tmall.com/item.htm?id=543881587553&skuId=3274437069773&is_b=1&cat_id=2&q=vero+moda+%C0%D9%CB%BF+%C1%AC%D2%C2%C8%B9&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&groupid=0&s=1&charset=utf-8&uid=veromoda官方旗舰店&site=cntaobao&groupid=0&s=1&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&id=542747012849&skuId=3263636993070&user_id=2934171215&cat_id=50025135&is_b=1&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&skuId=3263636993070&user_id=2934171215&cat_id=50025135&is_b=1&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&rn=0c421b1111d61dd7ddee9a68229910da&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&skuId=3263636993070&user_id=2934171215&cat_id=50025135&is_b=1&rn=0c421b1111d61dd7ddee9a68229910da&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&groupid=0&s=1&charset=utf-8&uid=蜜荻旗舰店&site=cntaobao&groupid=0&s=1&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&gccpm=8302602.102.2.subject-1002.60665&wh_tailer=2&tailer=2&wh_header=1&header=1&id=6602689&rn=5ddd60ba9714bec0b49c04c8c29314e0&cat=50025135&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&gccpm=8302602.102.2.subject-1002.60665&wh_tailer=2&tailer=2&wh_header=1&header=1&id=6602689&rn=5ddd60ba9714bec0b49c04c8c29314e0&cat=50025135&from=act_1_act-2-new#J_Crumb" target="_blank" atpanel="28,8302602,,,spu,2,act-2-new,,act-2-new,," data-spm-anchor-id="a220m.1000858.1000725.137">
<span title="墨概念" class="palr-brand">墨概念</span>
<span title="时髦爱豆们新年穿衣术" class="palr-title">时髦爱豆们新年穿衣术</span>
</a>
<i class="pa-icon-new"></i>
</div>
</div>
</div>
<!-- end 第1张新品专辑 -->
</div>
</body>
</html>
最后应用到自己的产品当中,必需把同名称的css定义合并,合并操作省略,100%模仿,很酷吧?
- 天猫品牌街Web前端开发第三阶段设计 模仿前端开发的通杀神技
- 天猫品牌街Web前端开发 第一阶段设计
- 天猫品牌街Web前端开发 第二阶段设计
- WEB前端开发工程师前期准备阶段
- Web前端设计开发规范
- web端设计和web前端开发的区别
- 前端观察 web前端开发
- 眼花缭乱的Web前端开发
- web开发的前端框架
- Web前端开发设计笔试题集锦
- Web 前端开发优秀设计搜录
- web网页前端开发设计常用编辑器
- WEB网页设计前端(前台)开发的常用工具推荐
- Web前端开发工程师必读的15个设计博客
- Web前端开发工程师必读的15个设计博客
- Web前端开发工程师必读的15个设计博客
- Web前端开发工程师必读的15个设计博客
- Web前端开发工程师必读的15个设计博客
- springmvc流程大致分析2 DispatcherServlet自带上下文创建
- if
- 每天一题LeetCode[第九天]
- 比较运算符compareTo()、equals()、==之间的区别与应用总结
- JAVA中的反射机制
- 天猫品牌街Web前端开发第三阶段设计 模仿前端开发的通杀神技
- get post区别
- JS事件委托
- Express框架的安装与建立第一个Express的工程
- pat a1012(暂缺)
- 进程与线程,线程的两种创建方式
- hdu 1518 square (DFS)搜索
- 单应矩阵
- Ubuntu 图形桌面与命令行界面 切换快捷键