天猫 淘宝 店铺 全屏代码

天猫店铺 装修 主要是几个重点 

1.利用本身的CSS 绝对样式 class="sn-simple-logo" 

2.图片都是1920px 宽 加热点这样

3.HTML结构

<div style="height:7540px;">

<div style="left:50%; z-index:9;" class="sn-simple-logo" >

<div style="width:1920px; left:-960px; top:0px; " class="sn-simple-logo">

 

</div>

</div>

</div>

例子

<div style="height:7540px;"> 这里主要是高度固定 
<div style="left:50%; z-index:9;" class="sn-simple-logo"> 确定第一层位置 绝对定位左侧 50% 距离 为下一层兼容做准备 z-index 遮盖其他层 只显示这个
<div style="width:1920px; left:-960px; top:0px; " class="sn-simple-logo"> 宽度确定  绝对定位（根据上一个50%移动）向左960px  宽屏基本固定 

<img src="http://img01.taobaocdn.com/imgextra/i1/1777427488/TB238wqcXXXXXaIXpXXXXXXXXXX_!!1777427488.jpg" alt="" width="1920" height="1002" usemap="#Map100"/>
<map name="Map100">
<area shape="rect" coords="457,449,784,649" href="http://taoquan.taobao.com/coupon/unify_apply_result_tmall.htm?seller_id=1777427488&success=false&need_check=false&need_ok=true&activity_id=224472493&apply_source=daily&is_collina_check=true&ok_str=cty母婴旗舰店+5.00元店铺优惠劵" target="_blank">
<area shape="rect" coords="811,446,1130,648" href="http://taoquan.taobao.com/coupon/unify_apply_result_tmall.htm?seller_id=1777427488&success=false&need_check=false&need_ok=true&activity_id=224474476&apply_source=daily&is_collina_check=true&ok_str=cty%C4%B8%D3%A4%C6%EC%BD%A2%B5%EA+10.00%D4%AA%B5%EA%C6%CC%D3%C5%BB%DD%84%BB" target="_blank">
<area shape="rect" coords="1154,447,1472,643" href="http://favorite.taobao.com/popup/add_collection_2.htm?spm=a1z10.1-b.w5003-10241119316.3.LQwqq7&id=105951665&itemtype=0&is_tmall=&is_alitrip=&scene=taobao_shop" target="_blank">
<area shape="rect" coords="497,753,621,794" href="http://ctymuying.tmall.com/category-1039683069.htm?spm=a1z10.1-b.w5003-10241119316.4.LQwqq7&search=y&catName=%CF%B5%C1%D0%D7%A8%C7%F8&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="514,803,604,833" href="http://ctymuying.tmall.com/category-1039683070.htm?spm=a1z10.1-b.w5003-10241119316.10.LQwqq7&search=y&parentCatId=1039683069&parentCatName=系列专区&catName=婴儿系列&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="514,840,607,867" href="http://ctymuying.tmall.com/category-1039683071.htm?spm=a1z10.1-b.w5003-10241119316.11.LQwqq7&search=y&parentCatId=1039683069&parentCatName=系列专区&catName=儿童系列&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="513,871,609,895" href="http://ctymuying.tmall.com/category-1039683072.htm?spm=a1z10.1-b.w5003-10241119316.12.LQwqq7&search=y&parentCatId=1039683069&parentCatName=系列专区&catName=卡通系列&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="664,755,768,794" href="http://ctymuying.tmall.com/category-1039683073.htm?spm=a1z10.1-b.w5003-10241119316.5.LQwqq7&search=y&catName=%B3%AC%D6%B5%D7%A8%C7%F8&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="671,803,768,834" href="http://ctymuying.tmall.com/category-1039682872.htm?spm=a1z10.1-b.w5003-10241119316.13.LQwqq7&search=y&parentCatId=1039683073&parentCatName=超值专区&catName=组合买赠&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="674,840,766,868" href="http://ctymuying.tmall.com/category-1039682873.htm?spm=a1z10.1-b.w5003-10241119316.14.LQwqq7&search=y&parentCatId=1039683073&parentCatName=%B3%AC%D6%B5%D7%A8%C7%F8&catName=%CC%D8%BC%DB%D7%E9%BA%CF&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="674,874,769,903" href="http://ctymuying.tmall.com/category-1039682874.htm?spm=a1z10.1-b.w5003-10241119316.15.LQwqq7&search=y&parentCatId=1039683073&parentCatName=%B3%AC%D6%B5%D7%A8%C7%F8&catName=%BE%AB%C6%B7%C0%F1%BA%D0&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="820,759,945,796" href="http://ctymuying.tmall.com/category-1039683074.htm?spm=a1z10.1-b.w5003-10241119316.6.LQwqq7&search=y&catName=%D3%A4%CD%AF%C8%F3%B7%F4&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="825,799,929,834" href="http://ctymuying.tmall.com/category-1039682875.htm?spm=a1z10.1-b.w5003-10241119316.16.LQwqq7&search=y&parentCatId=1039683074&parentCatName=%D3%A4%CD%AF%C8%F3%B7%F4&catName=%D3%A4%CD%AF%C3%E6%CB%AA&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="833,837,935,875" href="http://ctymuying.tmall.com/category-1039682876.htm?spm=a1z10.1-b.w5003-10241119316.17.LQwqq7&search=y&parentCatId=1039683074&parentCatName=%D3%A4%CD%AF%C8%F3%B7%F4&catName=%C8%F3%CC%E5%C8%E9%CB%AA&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="989,756,1097,794" href="http://ctymuying.tmall.com/category-1039683075.htm?spm=a1z10.1-b.w5003-10241119316.7.LQwqq7&search=y&catName=%CF%B4%B7%A2%E3%E5%D4%A1&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="992,803,1086,833" href="http://ctymuying.tmall.com/category-1039682877.htm?spm=a1z10.1-b.w5003-10241119316.18.LQwqq7&search=y&parentCatId=1039683075&parentCatName=%CF%B4%B7%A2%E3%E5%D4%A1&catName=%CF%B4%E3%E5%BA%CF%D2%BB&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="998,836,1084,867" href="http://ctymuying.tmall.com/category-1039682878.htm?spm=a1z10.1-b.w5003-10241119316.19.LQwqq7&search=y&parentCatId=1039683075&parentCatName=%CF%B4%B7%A2%E3%E5%D4%A1&catName=%CF%B4%B7%A2%CB%AE&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="994,871,1084,899" href="http://ctymuying.tmall.com/category-1039682879.htm?spm=a1z10.1-b.w5003-10241119316.20.LQwqq7&search=y&parentCatId=1039683075&parentCatName=%CF%B4%B7%A2%E3%E5%D4%A1&catName=%E3%E5%D4%A1%C2%B6&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1143,756,1259,795" href="http://ctymuying.tmall.com/category-1039683076.htm?spm=a1z10.1-b.w5003-10241119316.8.LQwqq7&search=y&catName=%C7%E5%BD%E0%D3%C3%C6%B7&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1160,803,1242,832" href="http://ctymuying.tmall.com/category-1039682880.htm?spm=a1z10.1-b.w5003-10241119316.21.LQwqq7&search=y&parentCatId=1039683076&parentCatName=%C7%E5%BD%E0%D3%C3%C6%B7&catName=%CF%B4%D2%C2%D2%BA&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1162,837,1237,872" href="http://ctymuying.tmall.com/category-1039682881.htm?spm=a1z10.1-b.w5003-10241119316.22.LQwqq7&search=y&parentCatId=1039683076&parentCatName=%C7%E5%BD%E0%D3%C3%C6%B7&catName=%CF%B4%D2%C2%D4%ED&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1307,758,1422,795" href="http://ctymuying.tmall.com/category-1039682882.htm?spm=a1z10.1-b.w5003-10241119316.9.LQwqq7&search=y&catName=%C7%FD%CE%C3%EC%EE%F0%F2&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1318,805,1408,832" href="http://ctymuying.tmall.com/category-1039682883.htm?spm=a1z10.1-b.w5003-10241119316.23.LQwqq7&search=y&parentCatId=1039682882&parentCatName=%C7%FD%CE%C3%EC%EE%F0%F2&catName=%CB%AC%C9%ED%B7%DB&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1323,838,1403,867" href="http://ctymuying.tmall.com/category-1039682884.htm?spm=a1z10.1-b.w5003-10241119316.24.LQwqq7&search=y&parentCatId=1039682882&parentCatName=驱蚊祛痱&catName=花露水&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="1318,870,1407,905" href="http://ctymuying.tmall.com/category-1039682885.htm?spm=a1z10.1-b.w5003-10241119316.25.LQwqq7&search=y&parentCatId=1039682882&parentCatName=%C7%FD%CE%C3%EC%EE%F0%F2&catName=%BB%A4%C0%ED%B8%E0&scene=taobao_shop#bd" target="_blank">
</map>
<img src="http://img04.taobaocdn.com/imgextra/i4/1777427488/TB2MBspcXXXXXbNXpXXXXXXXXXX_!!1777427488.jpg" alt="" width="1920" height="1352" usemap="#Map101"/>
<map name="Map101">
<area shape="rect" coords="378,2,1742,180" href="http://ctymuying.tmall.com/category-1039682882.htm?spm=a1z10.1-b.w5003-10241119316.26.LQwqq7&search=y&catName=%C7%FD%CE%C3%EC%EE%F0%F2&scene=taobao_shop#bd" target="_blank">
<area shape="rect" coords="478,210,951,535" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.27.LQwqq7&id=19840809549&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
<area shape="rect" coords="973,208,1442,538" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.28.LQwqq7&id=27142084997&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
<area shape="rect" coords="477,556,787,964" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.29.LQwqq7&id=40462293341&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
<area shape="rect" coords="809,555,1113,964" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.30.LQwqq7&id=27141916686&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1131,553,1448,962" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.31.LQwqq7&id=27135724535&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
<area shape="rect" coords="480,980,953,1319" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.32.LQwqq7&id=40993422977&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
<area shape="rect" coords="968,974,1442,1315" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.33.LQwqq7&id=27136252606&rn=2f5223a3e8b4b1687d015892285950a2&abbucket=13&scene=taobao_shop" target="_blank">
</map>
<img src="http://img04.taobaocdn.com/imgextra/i4/1777427488/TB2H6IpcXXXXXbBXpXXXXXXXXXX_!!1777427488.jpg" alt="" width="1920" height="1827" usemap="#Map102"/>
<map name="Map102">
<area shape="rect" coords="486,207,945,549" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.34.LQwqq7&id=27142464236&scene=taobao_shop" target="_blank">
<area shape="rect" coords="967,218,1447,544" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.35.LQwqq7&id=19826950334&scene=taobao_shop" target="_blank">
<area shape="rect" coords="480,566,786,972" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.36.LQwqq7&id=27139104581&rn=ecb45d58281e44f9f7fbc2c108b54e99&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="809,565,1113,972" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.37.LQwqq7&id=37276472960&rn=39b51af10e52f5086adaf291965c18be&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1132,563,1441,972" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.38.LQwqq7&id=22135111393&rn=39b51af10e52f5086adaf291965c18be&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="477,990,953,1326" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.39.LQwqq7&id=35536117680&rn=ecb45d58281e44f9f7fbc2c108b54e99&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="965,989,1447,1323" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.40.LQwqq7&id=27142404275&scene=taobao_shop" target="_blank">
<area shape="rect" coords="482,1348,779,1819" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.41.LQwqq7&id=19830406659&rn=ecb45d58281e44f9f7fbc2c108b54e99&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="815,1341,1105,1813" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.42.LQwqq7&id=19831366875&rn=ecb45d58281e44f9f7fbc2c108b54e99&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1137,1344,1433,1821" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.43.LQwqq7&id=19831526428&rn=ecb45d58281e44f9f7fbc2c108b54e99&abbucket=16&scene=taobao_shop" target="_blank">
</map>
<img src="http://img02.taobaocdn.com/imgextra/i2/1777427488/TB23HEqcXXXXXapXpXXXXXXXXXX_!!1777427488.jpg" alt="" width="1920" height="3347" usemap="#Map103"/>
<map name="Map103">
<area shape="rect" coords="485,209,1390,534" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.44.LQwqq7&id=42533220518&rn=461b90bcbd712a46ee622141b4f46e76&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="690,542,938,704" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.45.LQwqq7&id=37067819346&rn=61ae6fca50c28016ddda085b4f84a2c3&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="953,544,1153,696" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.46.LQwqq7&id=22133311058&rn=61ae6fca50c28016ddda085b4f84a2c3&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1168,543,1392,693" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.47.LQwqq7&id=19830817318&rn=61ae6fca50c28016ddda085b4f84a2c3&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="514,727,1442,1044" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.48.LQwqq7&id=42485458307&rn=461b90bcbd712a46ee622141b4f46e76&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="518,1064,713,1220" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.49.LQwqq7&id=19834230341&rn=1dfe9d5cb5a751886c289d9aa518128b&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="747,1065,936,1215" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.50.LQwqq7&id=27142464236&rn=1dfe9d5cb5a751886c289d9aa518128b&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="953,1060,1152,1214" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.51.LQwqq7&id=27142404275&rn=1dfe9d5cb5a751886c289d9aa518128b&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1175,1057,1412,1220" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.52.LQwqq7&id=22135111393&rn=1dfe9d5cb5a751886c289d9aa518128b&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="486,1241,1439,1593" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.53.LQwqq7&id=42532708631&rn=461b90bcbd712a46ee622141b4f46e76&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="509,1596,711,1736" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.54.LQwqq7&id=19831526428&rn=91b41778204c3e4416f4865bc6c67361&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="719,1598,940,1742" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.55.LQwqq7&id=19817218432&rn=91b41778204c3e4416f4865bc6c67361&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="955,1599,1158,1742" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.56.LQwqq7&id=19828762379&rn=91b41778204c3e4416f4865bc6c67361&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1177,1596,1404,1738" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.57.LQwqq7&id=37067819346&rn=91b41778204c3e4416f4865bc6c67361&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="507,1778,1423,2113" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.58.LQwqq7&id=41769745486&rn=461b90bcbd712a46ee622141b4f46e76&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="518,2118,712,2265" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.59.LQwqq7&id=19846305569&rn=986daeaf039bdb45739b1db1207d1b3a&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="724,2118,917,2267" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.60.LQwqq7&id=22134375961&rn=986daeaf039bdb45739b1db1207d1b3a&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="931,2115,1144,2259" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.61.LQwqq7&id=19833710611&rn=986daeaf039bdb45739b1db1207d1b3a&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1162,2116,1401,2264" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.62.LQwqq7&id=40504493216&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="490,2276,1440,2632" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.63.LQwqq7&id=41739890996&rn=461b90bcbd712a46ee622141b4f46e76&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="686,2637,884,2785" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.64.LQwqq7&id=19831526428&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="910,2636,1148,2785" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.65.LQwqq7&id=27139104581&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1170,2634,1412,2781" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.66.LQwqq7&id=40504493216&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="498,2812,1428,3150" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.67.LQwqq7&id=41767673444&rn=461b90bcbd712a46ee622141b4f46e76&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="517,3158,716,3308" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.68.LQwqq7&id=22133311058&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="733,3157,910,3304" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.69.LQwqq7&id=22238503446&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="930,3153,1142,3305" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.70.LQwqq7&id=19831366875&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
<area shape="rect" coords="1163,3152,1400,3300" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w5003-10241119316.71.LQwqq7&id=40504493216&rn=1594ca98ce6ebcee7283005e33a69efc&abbucket=16&scene=taobao_shop" target="_blank">
</map>
</div>
</div>
</div>