2020较完整淘宝店铺装修代码

时间: 2024年8月12日

淘宝装修过程中我们不仅要回p图，更重要的是要会看到代码，毕竟我们在装修淘宝店后是用前端显示了，能看懂和运营代码尤其重要.

淘宝装修代码

一、插入图片代码：

注：先把图片上传到网络相册网络地址(如果你没有网络相册可以申请一个)，把它拷贝下来，放到下边一串代码里替代汉字部分；可以应用于公告栏、分类栏及宝贝描述内。

二、插入公告栏挂饰代码：

注：先把挂饰图片上传到网络相册；可以应用于公告栏、分类栏及宝贝描述内。

三、背景音乐代码：

< loop="-1" src="音乐地址"></ >

注：先把挂饰图片上传到网络相册；可以应用于公告栏、宝贝描述内。

三、在图片里附加音乐的办法：

四、浮动的图片的代码：

＜img alt="1" height="150" src="这里放图片地址"/＞

五、悬浮挂饰代码：

＜img src="这里放图片地址" style="left:20px; position: relative; top:0px" /＞

六、文字链接代码:

＜a href="网页地址"＞链接的文字＜/a＞

七、移动文字代码:

＜marquee＞从右到左移动的文字＜/marquee＞

八、计数器代码

<a href="http://00counter.com" target="_blank"><img src="计数器地址"border=0

alt="00Counter.com"></a>

九、店铺公告里的漂亮悬浮挂件的代码：

十、店铺公告添加个性的鼠标指针代码：

十一、宝贝描述加上个性的鼠标指针代码

先选“编辑源文件” ，然后复制以下代码：

<tr>

另外，还要在源文件底部输入代码：</td></tr></table>

十二、添加QQ在线交谈代码：

注: 这是QQ在线状态的代码，里面的数值要改变，号码和网址改为你自己的，这个链接的作用是别人可以直接点击联系你而无需加你为好友，使用方法是直接链接。

十三、下面的代码设置在一定区域内让文字向上滚：“scrollamount=”可改变速度。

<font size=3 color=ff0000><b><center><marquee width=150 height=100 direction=up

scrollamount=2>文字</marquee></font></b></center>

十四、添加旺旺在线代码：

<A href="wangwang:SendIM?yexiaoyewen&uid_t=yexiaoyewen"><IMG src=

"http://pics. /newstyle/online_pic.gif" border=0></A>

十五、插入-FLASH动画：

< src="http://cartoonfile.163.com/source/55095/mingzzd" width="400"height="290"></ >

十六、让文字左右来回流动：

十七、让文字由下至上滚动：

十八、让文字由左向右流动：

十九、如何让文字滚动起来：

常用源代码

1．分时问候

<!--

var mess1="";

document.write("<center><font color='#0000FF' size=4><b>")

day = new Date( )

hr = day.getHours( )

if (( hr >= 0 ) && (hr <= 4 ))

mess1="深夜了，注意身体，该休息了！"

if (( hr >= 4 ) && (hr < 7))

mess1="清晨好，这麽早就上网呀？！ "

if (( hr >= 7 ) && (hr < 12))

mess1="早上好，一天之际在于晨，又是美好的一天！"

if (( hr >= 12) && (hr <= 13))

mess1="该吃午饭啦！有什麽好吃的？"

if (( hr >= 13) && (hr <= 17))

mess1="外面的天气很热吧?！心静自然凉！ "

if (( hr >= 17) && (hr <= 18))

mess1="太阳落山了！快看看夕阳吧！"

if ((hr >= 18) && (hr <= 19))

mess1="吃过晚饭了吗？"

if ((hr >= 19) && (hr <= 23))

mess1="一天过的可真快！今天过的好吗？"

document.write(mess1)

document.write("</b></font></center>")

//--->

</script>

说明：将代码放至<body>…</body>之间，其中：

在0-4点间，出现“深夜了，注意身体，该休息了！”字样，依此类推。

2．图片淡入淡出

var b = 1;

var c = true;

function fade(){

if(document.all);

if(c == true) {

b++;

}

if(b==100) {

b--;

c = false

if(b==10) {

c = true;

if(c == false) {

child.filters.alpha.opacity=0 + b;

setTimeout("fade()",100);

<img src="img/1.jpg" name="child" border=0

alt="Image" style="filter:alpha(opacity=0)">

说明：将代码放至<body>…</body>之间要显示该图片的位置，其中：

表示插入一个文件名为“1.jpg”的图片，设置其透明度为0，根据插入的图片路径进行修改。

3．闪烁文字

function initArray() {

this.length = initArray.arguments.length;

for (var i = 0; i < this.length; i++) {

this[i] = initArray.arguments[i];

var ctext = "看看我，我会变色";

var speed = 1000;

var x = 0;

var color = new initArray(

"red",

"blue",

"green",

"black",

"yellow",

"pink");

if (navigator.appVersion.indexOf("MSIE") != -1)

{

document.write('<div id="c"><center>'+ctext+'</center></div>');

function chcolor()

document.all.c.style.color = color[x];

(x < color.length-1) ? x++ : x = 0;

setInterval("chcolor()",1000);

-->

说明：将代码放至<body>…</body>之间要显示闪烁文字的位置，其中：

输入要显示的闪烁文字。

4．图形跟随鼠标

var newtop=0

var newleft=0

if (navigator.appVersion.indexOf("MSIE") != -1) {

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

function doMouseMove() {

layerName = 'iit'

eval('var curElement='+layerRef+'["'+layerName+'"]')

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')

eval('curElement'+styleSwitch+'.visibility="visible"')

eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')

eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')

eval('height=curElement'+styleSwitch+'.height')

eval('width=curElement'+styleSwitch+'.width')

width=parseInt(width)

height=parseInt(height)

if (event.clientX > (document.body.clientWidth - 5 - width))

newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width

else

newleft=document.body.scrollLeft + event.clientX

eval('curElement'+styleSwitch+'.pixelLeft=newleft')

if (event.clientY > (document.body.clientHeight - 5 - height))

newtop=document.body.clientHeight + document.body.scrollTop - 5 - height

newtop=document.body.scrollTop + event.clientY

eval('curElement'+styleSwitch+'.pixelTop=newtop')

document.onmousemove = doMouseMove;

document.write('<div ID=OuterDiv>')

document.write('<img ID=iit src="images/rabbit.gif" STYLE="position:absolute;TOP:0pt;LEFT:0pt;Z-INDEX:2;visibility:hidden;">')

document.write('</div>')

说明：将代码放至<body>…</body>之间，效果与动画鼠标类似，该代码是在鼠标指针旁边跟随一张图片，其中：

document.write('<img ID=iit src="images/rabbit.gif"

rabbit.gif为上传后的图形名称

5．滚动显示图片

var scrollerwidth=64

var Scrollerheight=64

var scrollerbgcolor='white'

var pausebetweenimages=3000

var slideimages=new Array()

slideimages[0]='<a href=#; img src=img/logo1.gif; border=0;'

slideimages[1]='<a href=#; img src=img/logo2.gif; border=0;'

slideimages[2]='<a href=#; img src=img/logo3.gif; border=0;'

slideimages[3]='<a href=#; img src=img/logo4.gif; border=0;'

slideimages[4]='<a href=#; img src=img/logo5.gif; border=0;'

if (slideimages.length>1)

i=2

i=0

function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=5){

tlayer.top=0

setTimeout("move1(tlayer)",pausebetweenimages)

setTimeout("move2(document.main.document.second)",pausebetweenimages)

return

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=5

setTimeout("move1(tlayer)",100)

else{

tlayer.top=scrollerheight

tlayer.document.write(slideimages[i])

tlayer.document.close()

if (i==slideimages.length-1)

i++

function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=5){

tlayer2.top=0

setTimeout("move2(tlayer2)",pausebetweenimages)

setTimeout("move1(document.main.document.first)",pausebetweenimages)

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=5

setTimeout("move2(tlayer2)",100)

tlayer2.top=scrollerheight

tlayer2.document.write(slideimages[i])

tlayer2.document.close()

function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",pausebetweenimages)

setTimeout("move4(second2)",pausebetweenimages)

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=5

setTimeout("move3(tdiv)",100)

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=slideimages[i]

function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",pausebetweenimages)

setTimeout("move3(first2)",pausebetweenimages)

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=5

setTimeout("move4(second2)",100)

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=slideimages[i]

function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

else if (document.layers){

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

window.onload=startscroll

//-->

if (document.layers)

document.write(slideimages[0])

</layer>

document.write(slideimages[1])

</ilayer>

<p>

document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')

document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')

document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')

document.writeln('</span>')

说明：将代码放至<body>…</body>之间要滚动显示图片的位置，其中：

logo1.gif、logo2.gif、logo3.gif、logo4.gif、logo5.gif为滚动显示的5张图片。该滚动显示图片的效果与滚动字幕略有不同，每显示一张图片会略有停顿，方便浏览。

6．随机产生的图片

a = 3

var pp = Math.random();

var foot = Math.round(pp * (a-1))+1;

function create() {

this.src = ''

this.border = ''

this.alt = ''

b = new Array()

for(var i=1; i<=a; i++) { b[i] = new create() }

b[1].src = "img/4.jpg"

b[1].border = "0"

b[1].alt = ""

b[2].src = "img/2.jpg"

b[2].border = "0"

b[2].alt = ""

b[3].src = "img/3.jpg"

b[3].border = "0"

b[3].alt = ""

var pic = "";

pic += '<img src='+b[foot].src+' border="0"'+' alt='+b[foot].alt+'>';

document.write(pic)

说明：将代码放至<body>…</body>之间要显示图片的位置，每次刷新网页都会随机显示不同的图片，其中：2.jpg、3.jpg、4.jpg为该实例中显示的图片名称，请更换为你需要显示的图片名称。

导航代码

.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}

/*首页/店铺动态背景色*/

.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #FFFFFF;}

/*首页/店铺动态右边线*/

.skin-box-bd .menu-list .menu{border-right:1px #006205solid;}

/*首页/店铺动态文字颜色*/

.skin-box-bd .menu-list .menu .title{color: #9F5F9F}

/*所有分类背景色*/

.all-cats .link{background: none repeat scroll 0 0 #FF00FF;}

/*所有分类右边线*/

.all-cats .link{border-right:1px #8C7853 solid;}

/*所有分类文字颜色*/

.skin-box-bd .all-cats .title{color: #FFFF00}

全渠道商城
新零售门店
社区团购
社群团购
社交微分销
小程序商城
多用户系统
企微SCRM
直播带货
社交零售
裂变玩法
代理商管理
O2O业态
商城源码
B2B云仓订货
更多产品...

查看演示

上一篇：做一个商城app平台费用是多少 下一篇：一份完整app运营推广方案!教你如何制作

多店商城系统是什么?多店商城系统有哪些功能?

如今市面上的商城系统有很多，但是各种系统各有各的优势，而且很多用户对于各种系统的模...

多商户商城系统具备哪些特点与优势

随着电子商务的需求越来越大，很多传统企业都想要借助多商户商城系统的开发来入局电子商...

c2c电商平台有哪些?其模式特点又是什么?

电子商务虽然在历史的长河中已有20多个年头，但发展的趋势依然迅猛，越来越多的企业商家都...

c2c类型的电商平台都有哪些?

随着电商的高速发展，各种电商模式层出不穷，而其中C2C模式凭借着对消费者提供的专业服务...