今天剛學會。通過不花一毛錢就可以跳出淘寶設置的950框架,做全屏的淘寶店鋪首頁裝修。需要一丟丟代碼知識,要學會套用。
原理:不用買模板也可以IDE,de用代碼編輯 單圖全屏模式就可以
1.首先,當然是把淘寶自帶導航去掉,淘寶導航只支持CSS代碼)
插入代碼.skin-box-bd .menu-list{display:none;}.all-cats{display:none;}.skin-box-bd{background:none;} 點擊確定
你會發現,導航被影藏掉了
2.接著可以做店招了,店招只支持950的寬度,全屏顯示是1920.怎么破?原理很簡單,做一個1920的店招,取中間950放自己的內容。然后將1920整張設置為店招背景,再將950的部分裁出來上傳到店招的位置,就把背景重復的覆蓋掉了~~
以下圖是950的店招區域
然后添加1920整張圖片作為背景
再看一下,兩部分就疊加一起了~
預覽一下~跳出950框架,巧妙1920全屏了
3.接下來可以開始做產品頁面了,全部做成1920寬度,時間關系,我就以色塊表示,做好之后切片保存為圖像和HTML格式(因為每個寶貝都要添加鏈接,要用到DW)
然后,到布局管理里面把淘寶的模板刪掉~~,自己添加一個自定義模塊(一個就行,把圖片全部放進去)
進入編輯狀態。因為框架是支持950的,所以直接把圖片上傳的話,系統就會自動壓縮成950.而要做1920的就要用到css代碼了。
<div style="height:450px;">
<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
<div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
<a href="這是產品的連接地址" target="_blank">
<img src=http://m.gooddi.cn/skin/qyskindir/image/nopic.gif " width="1920px" height="450px" border="0" />
</a>
</div>
</div>
</div>
重要事情說3遍。切了多少張圖片藍色代碼就復制多少次,比如我剛才切3張,就復制3次,然后依次把圖片地址換掉。
比如我改好之后是這樣的,三張圖片就添加好了。
預覽一下~~,頁頭和頁面都挑出了原有框架。會了這招,就不用花錢買模板了。整個邏輯其實就是添加CSS代碼,沖出原有固定框架~~。下班~~~下班~~
補充
有人問DW,補充一下用DW添加鏈接,把圖片都上傳好之后,把源代碼全部復制到DW代碼里面,點擊拆分或者設計,點擊選中圖片,就會出現框選區域的工具,就可以框選區域了,對你的寶貝添加鏈接。鏈接必須是淘寶的鏈接,其他鏈接不會成功。。因為淘寶已經設定了。。。搞好之后,再把全部代碼復制回到淘寶。。。就ok了。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 淘寶店鋪如何全屏裝修呢?