dw網站模板（米色電商雙十一店鋪寶貝展示模板代碼分享）

一：前言馬上電商年底大促雙十一要開始瞭，店鋪都在緊張備戰中，特別是美工，各種頁面設計裝修，各種加班。所以米色加班編寫瞭一個雙十一店鋪寶貝展示的代碼模板。美工隻需要復制代碼到DW裡面，替換文字，圖片，鏈接即可快速在店鋪裝修一個寶貝展示的效果。因為是模板，所以樣式可能是固定的，不過你有代碼基礎，也可以修改寶貝展示的效果。二：我要吐槽有小夥伴要吐槽瞭，我在PS裡面直接設計好，隻要放圖片就可以嘛，搞這麼麻煩幹什麼？答：PS裡面涉及圖片是方便，但是如果老板要修改主圖或者文案等內容呢？如果老板覺得一排4個不好看，換成1排3個呢？如果一個寶貝展示裡面，有多個鏈接怎麼辦？所以直接將米色的代碼模板，進行修改，方便快捷。下面會有詳細說明，看完你就知道這個代碼模板的妙處瞭。三：效果展示因為一排4個的截圖太長，不方便做封面，所以隻截取瞭2個寶貝展示。四：代碼說明【註意】：為瞭方便不同基礎的小夥伴使用，米色專門編寫瞭2個版本的代碼模板，根據需要下載使用【作者】：米色（miseu）【適用】：淘寶店（由於沒有天貓店測試，所以理論上也適用於天貓店）【權限】：無需購買CSS權限版本一：完美概念版註意下面代碼均為沒有全屏的，因為不同版本店鋪，全屏代碼會不一樣。需要全屏，可以使用下面的全屏生成工具【使用】：為瞭方便使用，在代碼中已經做瞭詳細的文字說明如果需要全屏，可以使用我編寫的全屏工具，不會用，看使用教程。工具地址：http://www.mgsns.com/portal.php?mod=topic&topicid=7下面所有的灰色註釋文字，在店鋪裡面不會顯示，放心復制註意，這是完美概念版，也就是可拓展性非常高，但是不敢保證，天貓和淘寶店 是不是都可以清理浮動，如果不能清浮動，可能導致背景色不顯示。可隨意修改內容部分寬度。可隨意修改一排放多少寶貝，隻需要修改一個數值，就可以隨意切換一排的個數。可隨意添加寶貝個數，想放幾個 直接復制粘貼即可代碼的使用，下面已經寫瞭完整的文字說明代碼中所有的圖片，鏈接，文字均可隨意修改【源碼下載】：由於不能發網盤鏈接，所以直接放的代碼，復制到DW裡面修改使用<!– ========== 復制下面的代碼去使用 ========== –><div style=”width:1920px; background-color: #490585;”><!–這下面的width:1100px;是中間寶貝展示的寬度，你想做成多寬 就改成多少–> <div style=”width:1100px; padding:30px 0; margin:0 auto; font-size:12px;font-family:Microsoft YaHei;”> <ul class=”clear-fix”> <!–寶貝1開始–> <!– 1-一排2個，將下面每個li標簽裡面的 width:24%; 改成 width:49%; 2-一排3個，將下面每個li標簽裡面的 width:24%; 改成 width:32.333333%; 3-一排4個，默認不需要修改 4-一排5個，將下面每個li標簽裡面的 width:24%; 改成 width:19%; –> <li style=”width:24%; background:#fff; margin:0 1% 1% 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” alt=”主圖1″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>產品賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” alt=”logo” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;”> <a href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:35%; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a href=”#” target=”_blank” style=”float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;”>點擊購買</a> </div> </div> </li> <!–寶貝1結束–> <li style=”width:24%; background:#fff; margin:0 1% 1% 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” alt=”主圖1″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>產品賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” alt=”logo” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;”> <a href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:35%; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a href=”#” target=”_blank” style=”float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;”>點擊購買</a> </div> </div> </li> <li style=”width:24%; background:#fff; margin:0 1% 1% 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” alt=”主圖1″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>產品賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” alt=”logo” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;” data-source=”www.mgsns.com”> <a href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:35%; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a href=”#” target=”_blank” style=”float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;”>點擊購買</a> </div> </div> </li> <li style=”width:24%; background:#fff; margin:0 1% 1% 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” alt=”主圖1″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>產品賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” alt=”logo” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;”> <a href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:35%; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a href=”#” target=”_blank” style=”float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;”>點擊購買</a> </div> </div> </li> <!–如果需要再加一個寶貝展示，就直接把整個<li>….</li>復制放到下面即可，看最後灰色註釋樣例–> <!–<li style=”width:24%; background:#fff; margin:0 1% 1% 0; float:left;”>…………</li>–> </ul> </div></div>版本二：固定保守版【使用】：為瞭方便使用，在代碼中已經做瞭詳細的文字說明如果需要全屏，可以使用我編寫的全屏工具，不會用，看使用教程。工具地址：http://www.mgsns.com/portal.php?mod=topic&topicid=7下面所有的灰色註釋文字，在店鋪裡面不會顯示，放心復制這是保守版，也就是尺寸都固定瞭，而且一排隻能放4個寶貝如果有代碼基礎，可隨意修改代碼來顯示寶貝展示方式代碼的使用，下面已經寫瞭完整的文字說明代碼中所有的圖片，鏈接，文字均可隨意修改【源碼分享】：<!– ========== 復制下面的代碼去使用 ========== –><div style=”width:1920px; background-color: #490585;”><div style=”width:1100px; padding:30px 0; margin:0 auto; font-size:12px;font-family:Microsoft YaHei;”> <!–因為限制瞭尺寸，所以如果隻做一排4個，不需要修改；如果需要2排（8個）就將下面的height:404px;改成height:808px; 也就是有幾排就乘幾。–> <ul class=”clear-fix” style=”height:404px;”> <!–這裡一個<li></li>就是一個寶貝–> <!–寶貝1代碼開始–> <li style=”width:266px; height:392px; background:#fff; margin:0 12px 12px 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>寶貝賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;” data-source=”www.mgsns.com”> <a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>點擊購買</a> </div> </div> </li> <!–寶貝1代碼結束–> <li style=”width:266px; height:392px; background:#fff; margin:0 12px 12px 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>寶貝賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;”> <a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>點擊購買</a> </div> </div> </li> <li style=”width:266px; height:392px; background:#fff; margin:0 12px 12px 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>產品賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;”> <a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>點擊購買</a> </div> </div> </li> <li style=”width:266px; height:392px; background:#fff; margin:0 0 12px 0; float:left; text-align:center;”> <div style=”padding:5px;”> <a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a> <p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>產品賣點描述</p> <h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>產品標題文字部分</h4> <div style=”height:40px; line-height:40px; padding:4px 0;”> <img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” /> <p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>預售價：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p> </div> <div style=”height:30px; line-height:30px;”> <a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”> <span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span> <span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span> </a> <a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>點擊購買</a> </div> </div> </li> <!– === 一排四個分割線，超過4個就復制上面的<li></li> 放後面即可，看下面樣例=== –> <!–<li style=”width:266px; height:392px; background:#fff; margin:0 0 12px 0; float:left; text-align:center;”>5</li>–> </ul> </div></div>