公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝装修代码

淘宝装修常用代码

2015-03-11 10:11:50

      淘宝店铺中,描述模板、公告栏、促销区等区域都可以编写HTML代码。因此,对于HTML代码的了解和掌握非常重要,笔者根据店铺装修中的常用功能,收集了以下代码标签,可以快速掌握HTML代码标签的使用。 

      HTML基础知识 

HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”,和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。一个HTML文件的后缀名是.htm或者是.html。 

      在淘宝店铺中描述模板、公告栏、促销区等编写的源文件就是由HTML编写的网页代码。推荐使用Dreamweaver进行代码编辑,因为它是所见即所得的编辑HTML的优秀软件。


1.HTML文件基本架构 


<HTML> 文件开始 

<HEAD> 标头区开始 <TITLE>...</TITLE> 标题区 </HEAD> 标头区结束 

<BODY> 本文区开始 

文本区内容 

</BODY> 本文区结束 </HTML> 文件结束 
其中: 
<HTML> 网页文件格式。 
<HEAD> 标头区:记录文件基本资料,如作者、编写时间等信息。 

<TITLE> 标题区:文件标题须使用在标头区内,可以在浏览器最上面看到标题。 <BODY> 本文区:文件资料,即在浏览器上看到的网站内容,也是要复制、粘贴到店铺装修中的源文件。 


2.HTML元素 

HTML元素是用来标记文本,表示文本的内容。比如body,p,title就是HTML元素。 HTML元素用Tag表示,Tag以“<”开始,以“>”结束。 
Tag通常是成对出现的,比如<body></body>。起始的叫做Opening Tag,结尾的就叫做Closing Tag。  

目前HTML的Tag不区分大小写的。比如,<HTML>和<html>其实是相同的。


3.HTML元素的属性 

HTML元素可以拥有属性,属性可以扩展HTML元素的能力。 

比如可以使用一个bgcolor属性,使得页面的背景色成为红色,像这样: <body bgcolor="red"> 

再比如,可以使用border这个属性,将一个表格设成一个无边框的表格: <table border="0"> 


基本代码


1.文本代码 

<font color="#666666" size="4">零界点设计</font> 

说明:设定字体的大小,分绝对SIZE,如 <font size=4>和相对size如:<font size=+1>。 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度(00暗~FF亮)。 #RRGGBB所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示(即十进制0~255)。十六进制:0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F

2.图片代码 

<img src="图片地址" alt="图片说明" align=top border=1> 

说明:先把图片上传到网络相册中,将图片地址拷贝下来,替换“图片地址”文字。 

3.链接代码 

<a href="链接地址">这里可以是文字或图片</a> 

说明:将文字或图片的要指向的链接地址粘贴至“链接地址”处。


4.背景音乐代码 

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

说明:loop循环,背景音乐播放次数;src文件或URL地址(可为WAV、MIDI格式) 

5.滚动条代码 

<marquee bgcolor=red behavior=alternate direction=left scrollamout=10 scrolldelay=100 width=100px>零界点设计</marquee>

说明:behavior设定卷动方式,其中alternate为交替来回卷动;scroll为卷动(默认设置);slide为滑动。

Bgcolor是设置背景颜色; Direction是设定卷动方向; Height是高度; 

Loop设置循环,卷动次数(默认为无限循环); Scrollamount设定卷动距离; Scrolldelay设定卷动时间; Truespeed设定卷动速度; Width是宽度。

常用源代码

1.分时问候 

<script language="JavaScript"> <!-- 

var mess1=""; 

document.write("<center><font color='#0000FF' size=4><b>") day = new Date( ) hr = day.getHours( ) 

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



淘宝网店铺装修宝典——附录2 店铺装修常用代码 


人民邮电出版社  www.ptpress.com.cn 

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>之间,其中: 

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

mess1="深夜了,注意身体,该休息了!" 

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

淘宝网店铺装修宝典——附录2 店铺装修常用代码

人民邮电出版社  www.ptpress.com.cn 


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() {  if (navigator.appVersion.indexOf("MSIE") != -1)   {  document.all.c.style.color = color[x];   }  (x < color.length-1) ? x++ : x = 0; }setInterval("chcolor()",1000); --> </script> 

说明:将代码放至<body>…</body>之间要显示闪烁文字的位置,其中: var ctext = "看看我,我会变色"; 输入要显示的闪烁文字。 

4.图形跟随鼠标 

<script language="JavaScript">  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   { 

淘宝网店铺装修宝典——附录2 店铺装修常用代码 

人民邮电出版社  www.ptpress.com.cn 

  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   } 
  else   { 
   newtop=document.body.scrollTop + event.clientY   } 
  eval('curElement'+styleSwitch+'.pixelTop=newtop') }   document.onmousemove = doMouseMove;  
</script> 
<script language="javascript">  if (navigator.appVersion.indexOf("MSIE") != -1) {    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>')  } </script> 

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

document.write('<img ID=iit src="images/rabbit.gif" rabbit.gif为上传后的图形名称 

5.滚动显示图片 

<script language="JavaScript1.2">  <!--  

var scrollerwidth=64 var Scrollerheight=64 var scrollerbgcolor='white' 
var pausebetweenimages=3000 var slideimages=new Array() 
slideimages[0]='&lt;a href=#; img src=img/logo1.gif; border=0;' slideimages[1]='&lt;a href=#; img src=img/logo2.gif; border=0;' slideimages[2]='&lt;a href=#; img src=img/logo3.gif; border=0;' slideimages[3]='&lt;a href=#; img src=img/logo4.gif; border=0;' slideimages[4]='&lt;a href=#; img src=img/logo5.gif; border=0;'  
if (slideimages.length>1) i=2 else 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) 

淘宝网店铺装修宝典——附录2 店铺装修常用代码 

人民邮电出版社  www.ptpress.com.cn 

} else{ 
tlayer.top=scrollerheight 
tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else 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) return } 
if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 
setTimeout("move2(tlayer2)",100) } else{ 
tlayer2.top=scrollerheight 
tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } }  
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) return } 
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){ tdiv.style.pixelTop-=5 
setTimeout("move3(tdiv)",100) } else{ 
tdiv.style.pixelTop=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else 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) return 

淘宝网店铺装修宝典——附录2 店铺装修常用代码 


人民邮电出版社  www.ptpress.com.cn 


if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){ tdiv2.style.pixelTop-=5 
setTimeout("move4(second2)",100) } else{ 
tdiv2.style.pixelTop=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else 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  //-->  
</script> 
      <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgcolor=&{scrollerbgcolor};>        <layer id="first" left=0 top=1 width=&{scrollerwidth};>        <script language="JavaScript1.2"> if (document.layers) 
document.write(slideimages[0]) </script> 
      </layer>       <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>        <script language="JavaScript1.2"> if (document.layers) 
document.write(slideimages[1]) </script> 
      </layer>       </ilayer>       <p>          <script language="JavaScript1.2"> <!--   
if (document.all){ 
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.write(slideimages[0]) document.writeln('</div>') 

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">') document.write(slideimages[1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</span>') 

淘宝网店铺装修宝典——附录2 店铺装修常用代码 

人民邮电出版社  www.ptpress.com.cn 


//-->   
</script> 
说明:将代码放至<body>…</body>之间要滚动显示图片的位置,其中: 
slideimages[0]='&lt;a href=#; img src=img/logo1.gif; border=0;' slideimages[1]='&lt;a href=#; img src=img/logo2.gif; border=0;' slideimages[2]='&lt;a href=#; img src=img/logo3.gif; border=0;' slideimages[3]='&lt;a href=#; img src=img/logo4.gif; border=0;' slideimages[4]='&lt;a href=#; img src=img/logo5.gif; border=0;' 
logo1.gif、logo2.gif、logo3.gif、logo4.gif、logo5.gif为滚动显示的5张图片。该滚动显示图片的效果与滚动字幕略有不同,每显示一张图片会略有停顿,方便浏览。 
6.随机产生的图片 
<script language="JavaScript"> 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) </script> 
说明:将代码放至<body>…</body>之间要显示图片的位置,每次刷新网页都会随机显示不同的图片,其中:2.jpg、3.jpg、4.jpg为该实例中显示的图片名称,请更换为你需要显示的图片名称。
0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 游戏充值 瀑布流 虚拟充值网店模板

    游戏充值 瀑布流 虚拟充值网店模板

    人气:39788
  • 好茶汇聚 素雅浅色 食品保健淘宝模板

    好茶汇聚 素雅浅色 食品保健淘宝模板

    人气:30571
  • 高雅大牌 舒爽浅色 女包女鞋网店模板

    高雅大牌 舒爽浅色 女包女鞋网店模板

    人气:56240
  • 春季、夏季清爽 化妆美容、健美店铺模板 全屏轮播

    春季、夏季清爽 化妆美容、健美店铺模板 全屏轮播

    人气:1
  • 大牌简约 大气背景 珠宝配饰网店模板

    大牌简约 大气背景 珠宝配饰网店模板

    人气:38768
  • 森林情调-深绿色 食品保健 家居 玉器 茶叶 户外运动 类模板

    森林情调-深绿色 食品保健 家居 玉器 茶叶 户外运动 类模板

    人气:1
  • 家居首饰淘宝模板 新秀系列 高雅背景

    家居首饰淘宝模板 新秀系列 高雅背景

    人气:34730
  • 奢华香包 大图模块 珠宝鞋靴淘宝模版

    奢华香包 大图模块 珠宝鞋靴淘宝模版

    人气:0