：前言

馬上電商年底大促雙十一要開始了，店鋪都在緊張備戰中，特別是美工，各種頁面設計裝修，各種加班。

所以米色加班編寫了一個雙十一店鋪寶貝展示的代碼模板。美工只需要復制代碼到DW里面，替換文字，圖片，鏈接即可快速在店鋪裝修一個寶貝展示的效果。

因為是模板，所以樣式可能是固定的，不過你有代碼基礎，也可以修改寶貝展示的效果。

二：我要吐槽

有小伙伴要吐槽了，我在PS里面直接設計好，只要放圖片就可以嘛，搞這么麻煩干什么？

答：PS里面涉及圖片是方便，但是如果老板要修改主圖或者文案等內容呢？如果老板覺得一排4個不好看，換成1排3個呢？如果一個寶貝展示里面，有多個鏈接怎么辦？

所以直接將米色的代碼模板，進行修改，方便快捷。下面會有詳細說明，看完你就知道這個代碼模板的妙處了。

三：效果展示

因為一排4個的截圖太長，不方便做封面，所以只截取了2個寶貝展示。

四：代碼說明

【注意】：為了方便不同基礎的小伙伴使用，米色專門編寫了2個版本的代碼模板，根據需要下載使用

【作者】：米色（miseu）

【適用】：淘寶店（由于沒有天貓店測試，所以理論上也適用于天貓店）

【權限】：無需購買CSS權限

版本一：完美概念版

注意下面代碼均為沒有全屏的，因為不同版本店鋪，全屏代碼會不一樣。需要全屏，可以使用下面的全屏生成工具

【使用】：

1. 為了方便使用，在代碼中已經做了詳細的文字說明

2. 如果需要全屏，可以使用我編寫的全屏工具，不會用，看使用教程。工具地址：http://www.mgsns.com/portal.php?mod=topic&topicid=7

3. 下面所有的灰色注釋文字，在店鋪里面不會顯示，放心復制

4. 注意，這是完美概念版，也就是可拓展性非常高，但是不敢保證，天貓和淘寶店 是不是都可以清理浮動，如果不能清浮動，可能導致背景色不顯示。

5. 可隨意修改內容部分寬度。

6. 可隨意修改一排放多少寶貝，只需要修改一個數值，就可以隨意切換一排的個數。

7. 可隨意添加寶貝個數，想放幾個 直接復制粘貼即可

8. 代碼的使用，下面已經寫了完整的文字說明

9. 代碼中所有的圖片，鏈接，文字均可隨意修改

【源碼下載】：

由于不能發網盤鏈接，所以直接放的代碼，復制到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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043741120.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043742408.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043741120.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043742408.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043741120.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043742408.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043741120.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="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808043742408.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>

很多時候，我們裝修無線端頁面的都需要大量的無線連接，通常我們都是用現成的轉換工具來轉換，但是如果沒有這些無線連接轉換工具了，我們該怎么獲取無線端手機端頁面鏈接呢？

下面我們瘋狂小編教大家如何手動獲取淘寶天貓手機無線店鋪的各種鏈接。下面直接看下面的操作動圖吧：

如果看完以上動圖演示步驟還是不懂的，歡迎留言，我會盡量教會大家。

文章來源 瘋狂的美工一站式設計師服務平臺 https://www.fkdmg.com/article/2939.html