淘宝基础版全屏分栏是怎么做的

时间：2021-11-10 16:18:08 意向书

篇一:《淘宝店铺基础版全屏代码》

基础版（750+190）全屏海报代码

</div>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

基础版（190+750）全屏海报代码

</div>

篇二:《【经验】如何将淘宝店铺用基础版装修成专业版效果》

【经验】将淘宝店铺用基础版装修成专业版效果（格调魅力女人馆）

大家是否都在苦恼，基础版店铺装修总没有专业版店铺好看，虽然钻一下淘宝给咱们提供了旺铺专业版扶持版，但是升了钻之后每月就要花50元来维护店铺。很多卖家相信因此又回归到基础版。

下面给大家分享一下如何将基础版店铺装修成专业版效果的。方法有千万种，我也研究了很久，过年期间终于弄了一弄，还请大家指教，不敢说非常好看，但是相信比普通基础版还是好一点的。

首先强调现在确实是基础版

下面开始具体操作

1. 首先店招图片可以自己设计，这个根据个人喜好不同，可以确定整体色调和风格再进行装修。度娘里有很多店招在线制作，也有很多免费的店招、促销模板等，很多模板都是建立在这些模板的基础上装修的。

2. 下面讲讲全屏轮播怎么设置，首先自己选好几张1920*450的图片，然后百度一下代码在线生成

填写完成生成代码也可以先预览一下效果，生成代码后先将代码复制到记事本，要想有居中的全屏效果还需要一个全屏代码{淘宝基础版全屏分栏是怎么做的}.

<div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium

none;padding-bottom:0px;padding-left:0px;width:950px;padding-right:0px;height:580px;border-top:medium none;top:auto;border-right:medium none;padding-top:0px;left:50%;">

<div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium

none;padding-bottom:0px;padding-left:0px;width:950px;padding-right:0px;height:580px;border-top:medium none;border-right:medium none;padding-top:0px;left:-575px;">

<font color="#ff0000">加入自己的自定义内容</font>

</div>

将上面加入自己的自定义内容删除插入原先准备好的全屏轮播代码，然后将整体代码复制到自定义内容区一定要点击这个之后再黏贴。

3. 有人说基础版的布局都是左右的那么左边的模块怎么弄，那不是重叠了吗，这也是我弄了好久才发现的

左边小的模板直接删掉，只需要右边的大模块添加自定义内容区就好了。

4. 全屏轮播图下面开始就是各类的促销模板，在刚才提到的网上有很多促销模板大家可以选择，再利用上面的全屏代码就能做出居中的950模块咯。大家选择模板的时候一定要想着我的店就是专业版的要按专业版的效果选择950宽的模板。

5. 客服模板同理可弄，大家稍微自己研究研究，我就不一一说明了。

6. 还有一点大家弄的时候可能会碰到的问题就是上面的全屏代码高度是固定的，不适用所有促销模板高度。所以我们其实只要自己改了高度就可以了

更改上面的数值就可以调整高度。

7.第一次发论坛，希望各位亲多多指正支持，上述经验都是总结了各位大师的经验综合后的结果，我把他实施如果大家觉得有用的话，一起加油共勉！（格调魅力女人馆）

篇三:《淘宝基础版专业版通用全屏轮播代码》

专业版和基础版全屏大海报代码

淘宝2012旺铺专业版装修，这里是代码，直接套用就可以了，下面是要注意的地方：（淘宝新店旺铺专业版本，在一钻之前都是免费的）

如何做个全屏大图，首先是准备一张大图，代码写的是三张图片，大小为宽1500px，高为600px。第一步，在店铺装修的时候新建一个自定义文件

第二步进入源码编辑

基础版全屏代码

<div data-widget-config="{

'contentCls': 'slide-kun1362899830209content',

'triggerCls': 'slide-kun1362899830209triggers',

'navCls': 'slide-kun1362899830209triggers',

'triggerType': 'mouse',

'effect': 'scrollx',

'prevBtnCls':'prev',

'nextBtnCls':'next',

'steps': 1,

'autoplay': true,

'viewSize':[1920],

'circular': true

}" data-widget-type="Carousel" class="J_TWidget" style="z-index:10;top:0px;left:-485px;padding:0px;margin:0px;width:1920px;">

<div class="J_TWidget" data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}"

data-widget-type="Popup" style="display:none;">

<li style="width:1920px;height:520px;padding:0px;margin:0px;list-style-type:none;"><a target="_blank" href="

style="padding:0px;margin:0px;"><img src="width="1920" height="520" border="0px"></a></li>

<li style="width:1920px;height:520px;padding:0px;margin:0px;list-style-type:none;"><!--"链接地址

2"--><a target="_blank" href="

style="padding:0px;margin:0px;"><img src="width="1920px" height="500px" border="0px"></a></li><li style="width:1920px;height:520px;padding:0px;margin:0px;list-style-type:none;"><a target="_blank"

href="

style="padding:0px;margin:0px;"><img src="width="1920px" height="520px" border="0px"></a></li><li style="width:1920px;height:520px;padding:0px;margin:0px;list-style-type:none;"><a target="_blank"

href="

style="padding:0px;margin:0px;"><img src="width="1920" height="520" border="0px"></a></li>

</ul>

</div>

</ul>

</div>

篇四:《漂亮的淘宝店铺全屏背景大图制作详细图解》

漂亮的淘宝店铺全屏背景大图制作详细图解

淘宝店铺全屏漂亮背景大图制作详细图解，直接进入正题。想大多数卖都看到很多商城卖家的首页那漂亮大气的全屏（宽屏）背景大图了吧，有没有想自己的店里也弄一个？只要你会一点PS，错！只要你有个PS软件，{淘宝基础版全屏分栏是怎么做的}.

我就教你做出来，但前提是你的旺铺版本支持，设置背景图片据我了解应该是拓展版以上或商城才可以的。如果你的版本是拓展版以上的，那我们现在开始动手做吧！

因为商城跟集市的制作有点不一样，现在我们以集市店的为例，集市店拓展版最终效果展示：

一、准备工作

一个PHOTOSHOP图片处理软件，一张你准备做店铺首页背景宣传的大图片，建议图片宽度是大于或等于1440PX，没有PHOTOSHOP的朋友，可以去下载一个哦，（我用的是CS4版本，至于什么版本好，这个根据个人习惯）安装很容易的，所以安装的步骤我也不详说了。不要怕麻烦，凡事都要自己动手了，能才从中学到东西，学到经验。

二、图片处理

1、安装好PS后，打开界面

接着点击"文件""打开"，{淘宝基础版全屏分栏是怎么做的}.

把你要的制作的图片打开到PS里面

2、把图片裁成宽度大于或等于1440像素的宽度，高度取决于你自己的要求，一般是600－750像素就可以了。首先打开剪裁工具，

然后操作就跟QQ软件里的的剪图类似，裁出来的图片如果宽度跟1440像素相差不大的话，就可以通过图像大小来调整一下，

在宽度里输入1440，后面的记得是像素，不是厘米哦！还有下面的约束比例也要勾上，这样图片就不会变形了。

3、1440像素宽度的图片剪裁完后，接着在这个图片里剪裁出950像素的图片，因为淘宝全通栏的大小是950像素。至于950的图片怎么剪裁，这里就比较重要了。

首先我们可以把图片1440像素分成三份，245+950+245＝1440！245是19寸宽屏两侧背景其中一边的像素。

4、我们新建一个PS文件

宽度是245像素的新文件，高度可以随便。

在左侧工具栏，切换到“矩形选框工具”，

选中新建的文件“未标题－1”按着CTRL+A键，会有虚线显示全选了这个空白的图像，

点着鼠标左键不放，把虚线边框接到左边的宣传图片，并如左边边缘对齐。

在这里需要把标尺调出来作为参考

接着在工具栏里选择“移动工具”，在标尺里面拉出一条浅蓝色的辅助线，跟虚线边框右边

篇五:《淘宝美工培训之淘宝二级页面全屏》

____________________________________________________________________________________________

淘宝美工培训之淘宝二级页面全屏

淘宝二级页面全屏一直是困扰广大装修朋友的问题，试过很多论坛里的方法都不管用，我表示很蛋疼，于是我尝试下用自己的方法令淘宝二级页面实习了全屏。一网学，致力于网页设计培训、UI设计培训、淘宝美工培训，平面设计培训，是最好的远程设计培训学校。

方法如下：慷慨分享给大家，首先对你的需要全屏的图片进行分割处理，我的定义1440像素全屏，切去中间950个像素，另存为背景，上传到图片空间。

切工中注意事项，上部一定要留出150像素的空白区域，尔后按照图示步骤将二级页面背景上传。

____________________________________________________________________________________________

完毕后关键来了现将你的整张需要全屏的图片上传到图片空间为了防止错误请使用一些代码

<div class="footer-more- trigger"

style="width:1440px;height:924px;left:auto;top:auto;margin:0;padding:0;border:0;">

<div class="footer-more-trigger"

style="left:-250px;top:-20px;margin:0;padding:0;border:0;">

</div>

____________________________________________________________________________________________ </div>

</div>

其中top可调节高度，防止错位，这样就大工告成了，哈哈，大家不必谢我！

【一网学，淘宝美工培训，我的未来我设计】

本文资源来自一网学淘宝美工培训：/peixun/taobao.html

篇六:《怎么制作淘宝店铺全屏海报》{淘宝基础版全屏分栏是怎么做的}.

淘宝店铺怎么制作全屏海报

淘宝2012旺铺专业版装修，这里是代码，直接套用就可以了，下面是要注意的地方：（淘宝新店旺铺专业版本，在一钻之前都是免费的）

如何做个全屏大图，首先是准备一张大图，代码写的是三张图片，大小为宽19200px，高为600px。

第一步：在买家中心的店铺装修的时候新建一个自定义文件

第二步：进入源码编辑（注意：店家最好装修的时候用IE或者淘宝浏览器，否则其他的浏览器很容易出错）

代码：

<div class="main-wrap" data-modules="main" data-width="b950" style="overflow:visible;">{淘宝基础版全屏分栏是怎么做的}.

<div class="J_TWidget" data-widget-config="{'contentCls': 'taobao-kaidian-com','navCls': 'taobaokaidian-com','effect':

'scrollx','easing':

'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel"> <div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-480,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">{淘宝基础版全屏分栏是怎么做的}.

<span><img

data-ks-lazyload="title="上一屏" /></span></div> </div>

<span><img

data-ks-lazyload="title="下一屏" /></span></div> </div>

<div class="ux1920" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;overflow:hidden;padding-top:0px;"> <ul

class="taobao-kaidian-com"

style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">

<li

style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">

<span><a

data-attr-replace="[派比童装href="

style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img border="0" data-ks-lazyload="height="500" width="1920" /></a></span></li>

<li

style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;">

<span><a

data-attr-replace="[派比童装href="

style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img border="0" data-ks-lazyload="height="500" width="1920" /></a></span></li>

</ul>

</div>

<div

class="footer-more-trigger" style="border-bottom:medium none;border-left:medium

none;padding-bottom:0px;padding-left:0px;padding-right:0px;border-top:medium none;border-right:medium none;padding-top:0px;left:50%;"> <div

class="footer-more-trigger" style="border-bottom:medium none;border-left:medium

none;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:45px;border-top:medium none;top:444px;border-right:medium none;padding-top:0px;left:-960px;">

<ul

class="taobaokaidian-com" style="border-bottom:medium none;text-align:center;border-left:medium none;margin:0px auto;width:1920px;height:45px;border-top:medium

none;border-right:medium none;">

<li

style="line-height:45px;margin:0px

5px;display:inline;cursor:pointer;">

<span><img

border="0" data-ks-lazyload="" height="48" style="border-bottom:#33CCFF 0px solid;border-left:#33CCFF 0px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 0px solid;border-right:#33CCFF 0px solid;" width="186" /></span></li> <li

style="line-height:45px;margin:0px

5px;display:inline;cursor:pointer;">

<span><img

</div>

</ul>

</div>

代码中的红色字体可替换成自己图片空间的网络连接，注意的是图片的大小事1920*600 px

第三步：保存好代码之后直接发布，记住一定要发布。

发布结果

相关文章

范文推荐